강의노트 - 17

김희목·2024년 7월 22일

DOM 패스트캠퍼스

패스트캠퍼스

목록 보기

25/53

DOM(Document Object Model)

= DOM이란 HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 해줍니다.

const element = document.querySelector('h1')
console.log(element.textContent) // 'Hello wolrd!'

DOM API

= DOM에서 사용할 수 있는 명령어들

Node vs Element

Node = HTML 요소, 텍스트, 주석 등 모든 것을 의미

Element = HTML 요소를 의미

ex)
const parent = document.querySelector('.parent')

//부모 요소의 모든 자식 노드 확인!
console.log(parent.childNodes)

//부모 요소의 모든 자식 요소 확인!
console.log(parent.children)

document.getElementById()

= HTML id 속성(Attributes) 값으로 검색한 요소를 반환합니다.
= 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환합니다.
= 검색 결과가 없으면, null을 반환합니다.

ex)
html

<body>
  <div class="parent">
    <!-- 주석 -->
     <div class="child">1</div>
     텍스트1
     <div id="child2" class="child">2</div>
     텍스트2
  </div>
</body>

const el = document.getElementById('child2')
console.log(el) //

<div id="child2" class="child">2</div>

document.querySelector()

= 'CSS 선택자'로 검색한 요소를 하나 반환합니다.
= 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환합니다.
= 검색결과가 없으면 null을 반환합니다

ex)
const el = document.querySelector('.child:first-child')
console.log(el) //

<div class="child">1</div>

document.querySelectorAll()

= 'CSS 선택자'로 검색한 모든 요소를 NodeList로 반환합니다.
= NodeList 객체는 .forEach()를 사용할 수 있습니다.

ex)
const nodeList = document.querySelectorAll('.child')
console.log(nodeList)


NodeList(2) [div.child, div#child2.child]
0
: 
div.child
1
: 
div#child2.child
length
: 
2
[[Prototype]]
: 
NodeList

nodeList.forEach(el => console.log(el.textContent)) // 1, 2
// 유사 배열을 실제 배열 메소드를 사용하려면 from을 통해 실제 배열로 변경하여 사용가능합니다.
console.log(Array.from(nodeList).reverse())

N.parentElement

= 노드의 부모 요소를 반환합니다.

ex)
const el = document.querySelector('.child')
console.log(el.parentElement)

  <div class="parent">
    <!-- 주석 -->
     <div class="child">1</div>
     텍스트1
     <div id="child2" class="child">2</div>
     텍스트2
  </div>

E.closest()

= 자신을 포함한 조상 요소 중 CSS 선택자와 일치하는, 가장 가까운 요소를 반환합니다.
= 요소를 찾지 못하면 null을 반환합니다.

ex)
const el = document.querySelector('.child')

console.log(el.closest('div'))

<div class="child">1</div>

console.log(el.closest('body'))

<body>
  <div class="parent">
    <!-- 주석 -->
     <div class="child">1</div>
     텍스트1
     <div id="child2" class="child">2</div>
     텍스트2
  </div>
</body>

console.log(el.closest('.hello')) // null

N.previousSibling / N.nextSibling

= 노드의 이전 형제 혹은 다음 형제 노드를 반환합니다.

ex)
const el = document.querySelector('.child')
console.log(el.previousSibling) // #text
console.log(el.nextSibling)

E.previousElementSibling / E.nextElementSilbing
= 요소의 이전 형제 혹은 다음 형제 요소를 반환합니다.

ex)
const el = document.querySelector('.child')
console.log(el.previousElementSibling) // null
console.log(el.nextElementSibling) //

E.children

= 요소의 모든 자식 요소를 반환합니다.

ex)
const el = document.querySelector('.parent')
console.log(el.children)

HTMLCollection(2) [div.child, div#child2.child, child2: 
div#child2.child]
0: div.child

1: div#child2.child

child2: div#child2.child

length: 2

[[Prototype]]: HTMLCollection