노드 탐색
자바스크립트를 이용하면 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며, 부모, 형제, 자식 노드 등을 탐색할 수 있습니다.
- 자식 노드(child node, children)는 바로 아래의 자식 요소를 나타냅니다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만듭니다. <head>와 <body>는 <html>요소의 자식 노드입니다.
- 후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 의미합니다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.
자식 노드 탐색
자식 노드를 탐색하기 위해서 다음과 같은 프로퍼티들을 사용합니다.
- element.children
: element의 자식 요소 모음(HTMLCollection)을 반환합니다. 자식 요소 모음은 텍스트 노드를 포함하지 않습니다. - element.firsrtElementChild
: element의 첫 번째 자식 요소 하나를 반환합니다. - element.lastElementChild
: element의 마지막 자식 요소 하나를 반환합니다. - node.childNodes
: node의 자식 노드 모음(NodeList)을 반환합니다. 자식 노드 모음은 요소 노드와 텍스트 노드를 포함합니다. - node.fisrtChild
: node의 첫 번째 자식 노드 하나를 반환합니다. 자식 노드는 텍스트 노드이거나 요소 노드입니다. - node.lastChild
: node의 마지막 자식 노드 하나를 반환합니다. 자식 노드는 텍스트 노드이거나 요소 노드입니다.
부모 노드 탐색
부모 노드를 탐색하기 위해서 다음과 같은 프로퍼티들을 사용합니다.
- element.parentElement
: element의 부모 요소 하나를 반환합니다. 부모가 텍스트 노드인 경우는 없기 때문에 부모는 요소 노드입니다. - node.parentNode
: node의 부모 요소 하나를 반환합니다. 부모가 텍스트 노드인 경우는 없기 때문에 부모는 요소 노드입니다.
형제 노드 탐색
형제 노드를 탐색하기 위해서 다음과 같은 프로퍼티들을 사용합니다.
- element.previousElementSibling
: 부모가 같은 형제 요소 중 이전(previous) 요소(텍스트 포함) 하나를 반환합니다. - element.nextElementSibling
: 부모가 같은 형제 요소 중 다음(next) 요소(텍스트 포함) 하나를 반환합니다. - node.previousSibling
: 부모가 같은 형제 노드 중 이전(previous) 형제 노드를 반환합니다. - node.nextSibling
: 부모가 같은 형제 노드 중 다음(next) 형제 노드를 반환합니다.
노드 조작
자바스크립트를 이용하면 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제, 수정할 수 있습니다.
노드 내용 조작
- element.textContent
- 요소 안의 HTML 태그 부분을 제외하고 텍스만 문자열로 반환합니다. (줄바꿈, 들여쓰기 포함)
- 새로운 값을 할당하면 내부의 값을 새로운 값으로 교체합니다.
ex) element.textContent = '수정할 내용'
- element.innerHTML
- 요소 안의 HTML 코드를 문자열로 반환합니다. (줄바꿈, 들여쓰기 포함)
- 새로운 값을 할당하면 내부의 값을 새로운 값으로 교체합니다.
- elemnet.innerHTML += '추가할 내용'은 추가가 아니라 기존 내용을 삭제하고 덮어쓰기 때문에 주의해서 사용해야 합니다.
- element.outerHTML
- 요소 노드 자체의 HTML 코드를 반환합니다. (줄바꿈, 들여쓰기 포함)
- 새로운 값을 할당하면 요소 자체를 새로운 값으로 교체합니다.
노드 생성
- document.createElement('태그 이름')
- 페이지에 요소를 추가하거나 내용을 관리하기 위해 변수에 담아 사용하는게 일반적입니다.
const el = document.createElement('div'); el.textContent = '...'
- 페이지에 요소를 추가하거나 내용을 관리하기 위해 변수에 담아 사용하는게 일반적입니다.
노드 추가 및 이동
- element.prepend
: 노드나 문자열을 element의 첫 번째 자식으로 추가 또는 이동합니다. - element.append
: 노드나 문자열을 element의 마지막 자식으로 추가 또는 이동 합니다. - node.appendChild
: 노드를 부모 요소의 마지막 자식으로 추가 또는 이동합니다. (append와 달리 문자열을 추가 할 수 없습니다.) - element.before
: 노드나 문자열을 element의 이전(앞) 형제로 추가 또는 이동합니다. - element.after
: 노드나 문자열을 element의 다음(뒤) 형제로 추가 또는 이동합니다.
노드 삭제
- element.remove
: 매개변수로 받은 요소를 삭제한다. (매개변수로 NodeList를 받으면 NodeList에 포함된 모든 요소를 삭제합니다.)
'개발 공부 일지 > JavaScript' 카테고리의 다른 글
| [JS] 마우스 이벤트 (1) | 2024.09.11 |
|---|---|
| [JS] 이벤트 버블링과 캡처링 (2) | 2024.09.10 |
| [JS] 자바스크립트로 HTML 속성 및 스타일 다루기 (0) | 2024.09.10 |
| [JS] DOM 트리구조 (0) | 2024.09.10 |
| [JS] JavaScript 기초 - Dom 요소 선택하기 (1) | 2024.09.09 |