🍅DOM(Document Object Model)
- HTML 문서를 객체로 표현한 것
- JS에서 HTML을 제어할 수 있게 해줌
- DOM API: 사용할 수 있는 다양한 명령
🍅Node vs Element
- Node(노드): HTML 요소, 텍스트, 주석 등 모든 것을 의미
- 부모 요소의 모든 자식 노드 확인:
console.log(parent.childNodes)
-> 모든 내용이 NodeList로 출력됨
- 부모 요소의 모든 자식 노드 확인:
- Element(요소): HTML 요소를 의미
- 부모 요소의 모든 자식 요소 확인:
console.log(parent.children)
-> HTMLCollection으로 div 요소만 출력됨
- 부모 요소의 모든 자식 요소 확인:
=> element는 node라는 객체에서 상속되어 만들어진 개념
🍅검색과 탐색
- index.html (아래 예제에서 사용)
<body>
<div class="parent">
<!--주석-->
<div class ="child"> 1 </div>
텍스트1
<div id = "child2" class= "child">2</div>
텍스트2
</div>
</body>1. document.getElementById()
- HTML 'id' 속성(Attributes) 값으로 검색한 요소를 반환
- 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환
- 검색 결과가 없으면 'null'을 반환
const el = document.getElementById('child2') //ID 잘못 입력시 null반환
console.log(el)실행 결과:
<div id="child2" class="child">2</div>
2. document.querySelector()
- CSS 선택자로 검색한 요소를 하나 반환
- 여러요소가 검색되면, 가장 먼저 찾은 요소만 반환
- 검색 결과가 없으면 'null'을 반환
const el = document.querySelector('.child:first-child')
console.log(el)실행 결과:
<div class ="child">1</div>
3. document.querySelectorAll()
- CSS 선택자로 검색한 모든 요소를 NodeList로 반환
- NodeList 객체는 .forEach()를 사용할 수 있음
const nodeList = document.querySelectorAll('.child')
console.log(nodeList)
nodeList.forEach(el => console.log(el.textContent)) //검색한 요소의 개수만큼 내부에 콜백을 반복적으로 호출(검색된 요소가 2이기 때문에 두번 반복)
//배열 데이터로 바꾸기
console.log(Array.from(nodeList).reverse()) //바로 배열 메서드 리버스 사용가능실행 결과:
NodeList(2) [div.child, div#child2.child] -> 배열 데이터처럼 보이지만 유사 배열
1 -> console.log(el.textContent)의 결과
2 -> console.log(el.textContent)의 결과
4. N.parentElement
- 노드의 부모 요소를 반환
const el = document.querySelector('.child') //<div class ="child"> 1 </div> 부분
console.log(el.parentElement) //해당 부분의 부모 요소 반환실행 결과:
<div class = "parent">...</div>
5. E.closest()
- 자신을 포함한 조상 요소 중 CSS 선택자와 일치하는 가장 가까운 요소 반환
- 요소를 찾지 못하면 null 반환
const el = document.querySelector('.child')
console.log(el.closest('div'))
console.log(el.closest('.hello')) //hello라는 클래스를 가진 요소는 없음실행 결과:
<div class ="child"> 1 </div>
null
6. N.previousSibling / N.nextSibling
- 노드의 이전 형제 혹은 다음 형제 노드를 반환
const el = document.querySelector('.child')
console.log(el.previousSibling)
console.log(el.nextSibling)실행 결과:
#text -> 줄바꿈 문자
텍스트1
7. E.previousElementSibling / E.nextElementSibling
- 요소의 이전 형제 혹은 다음 형제 요소를 반환
const el = document.querySelector('.child')
console.log(el.previousElementSibling)
console.log(el.nextElementSibling)실행 결과:
null
<div id = "child2" class= "child">2</div>
8. E.children
- 요소의 모든 자식 요소를 반환
const el = document.querySelector('.parent')
console.log(el.children)실행 결과:
HTMLCollection(2) [div.child, div#child2.child, child2: div#child2.child]
-> 유사배열
9. E.firstElementChild / E.lastElementChild
- 요소의 첫번째 자식 혹은 마지막 자식 요소를 반환
const el = document.querySelector('.parent')
console.log(el.firstElementChild)
console.log(el.lastElementChild)실행 결과:
<div class ="child"> 1 </div>
<div id = "child2" class= "child">2</div>
🍅생성, 조회, 수정
- index.html (아래 예제에서 사용)
<body>
<div class = "parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
</body>1. document.createElement()
- 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환
const divEl = document.createElement('div')
console.log(divEl)
const inputEl = document.createElement('input')
console.log(inputEl)실행결과:
<div></div>
<input>
2. E.prepend() / E.append()
- 노드를 요소의 첫번째 혹은 마지막 자식으로 삽입
const parentEl = document.querySelector('.parent')
const el = document.createElement('div')
el.textContent = 'Hello'
parentEl.prepend(new Comment('주석'))
parentEl.append(el, 'Text!') //인수를 여러개 넣으면 순서대로 추가됨3. E.remove()
- 요소를 제거
const el = document.querySelector('.child')
el.remove()
렛츠고 스터디 렛츠고 스터디 예 렛츠고 오오오 스터디 렛츠고 스터디 예