[부트캠프 DOM기초] 210728 DOM 기본메서드 및 퀴즈 체크

밍징·2021년 7월 28일

DOM

개념복습_ver.

목록 보기

9/30

📌 오늘의 목표

createElement - CREATE
querySelector, querySelectorAll - READ
textContent, id, classList, setAttribute - UPDATE
remove, removeChild, innerHTML = "" , textContent = "" - DELETE
appendChild - APPEND
innerHTML과 textContent의 차이

1) 생성할 때 이용 - createElement메서드
새로운 element를 만들 때

ex)
document.createElement('div')

이렇게만 작성시엔 html에선 변화가 없음.

2) 조회할 때 이용 - querySelector / querySelectorAll
셀렉터를 조회한다는 의미

ex)

const oneTweet = document.querySelector('.tweet')

const otherTweet = document.querySelector('div')

const anotherTweet = document.querySelector("#tweetList")

3) 컨텐츠 업데이트 - textContent, classList.add

ex) textContent이용

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

ex) classList.add 이용

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

4) 컨텐츠 삭제 - remove, removeChild

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

❗append? appendChild?
말 그대로 추가한다는 뜻. 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
ex) 
document.body.append(tweetDiv) 

📌 DOM 퀴즈 오답체크

1.

HTML이 다음과 같을 때, div를 전부 조회하는 적당한 방법은? (정답 2개)
<body>
   <div>
    <div>hello</div>
    <div>world</div>
    <span>code</span>
    <span>states</span>
  </div>
</body>

querySelectorAll 과 document.getElementsByTagName('div') 가 전부 조회할 수 있다.

4.

3번 문제에서 적절하게 div를 모두 조회하였다면, 몇 개를 조회했는가?
<body>
   <div>
    <div>hello</div>
    <div>world</div>
    <span>code</span>
    <span>states</span>
  </div>
</body>

querySelectorAll() 과 getElementsByTagName('div')로 조회할 땐 부모 자식 가리지 않고 조회한다고 함.

5.

아이디가 "javascript"이고, 내용이 "awesome"인 a 태그를 생성하기 위해 옳은 방법은? (정답 2개)

let aElement = document.createElement('a')
aElement.setAttibute('id', 'javascipt')
aElement.textContent = 'awesome'

setAttribute로 key 값과 value 값 별도 지정 및 testContent이용

let aElement = document.createElement('a')
 aElement.id = 'javascipt'
 aElement.innerHTML = 'awesome'

위의 것도 가능하나 innerHTML 사용은 지양

7.

6번 문제에서 HTML에 삽입 한 aElement 를 HTML에서 제거하기 위한 올바른 방법은? (정답 2개)

HTML 파일
<body>
   <div>
    <div>hello</div>
    <div id="world">
      world
      <a id="javascript"></a>
    </div>
    <span id="code">code</span>
    <span>states</span>
  </div>
</body>

6번 문제 JS 파일

let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'

삭제할 땐 remove메서드 이용하되 여기선 removeChild() 이용.
aElement.remove()
document.querySelector(#world).removeChild(aElement)

9.

아래 예제의 button을 클릭하면 안내창에 "코드스테이츠에 오신 것을 환영합니다"라고 하기 위한 적절한 방법은? (정답 2개)
<body>
   <div>
    <div>hello</div>
    <div id="world">world</div>
    <span id="code">code</span>
    <span>states</span>
    <button id="apply">apply</button>
  </div>
</body>

DOM 객체에 onclick을 직접 지정할 수도 있고 (B) , addEventListener라는 메소드 이용.

function displayAlert() {
  alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert

and

document.querySelector('#apply').addEventListener('click', function(){
   alert("코드스테이츠에 오신 것을 환영합니다")
})

📌 유효성검사 퀴즈 오답체크

2.

어떤 버튼(btn)이 존재하고, 버튼을 클릭할 때 콘솔에 "버튼이 눌렸습니다!"가 출력되게 만들고 싶습니다. 자바스크립트 코드로 적절한 것을 전부 고르세요.
A. btn.onClick = function() {
  console.log('버튼이 눌렸습니다!');
}
B. btn.onclick = function() {
  console.log('버튼이 눌렸습니다!');
}
C. btn.addEventListener('click', function() {
  console.log('버튼이 눌렸습니다!');
});
D. function handler() {
  console.log('버튼이 눌렸습니다!');
}
btn.onclick = handler;
E. function handler() {
  console.log('버튼이 눌렸습니다!');
}
btn.onclick = handler();

onclick dom 메서드임. onClick이 아님. 이벤트 속성(onclick)에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 합니다. 함수 실행을 등록하는 것이 아님.