노드

• DOM 트리구조의 객체 하나하나를 노드라고 한다.
• 문서 노드, 요소 노드(태그), 속성 노드(요소의 속성), 텍스트 노드(요소의 내용) 등

노드 찾기

<ul id="purchases" class="list">
    <li>두부</li>
    <li>계란</li>
    <li>라면</li>
</ul>

태그의 id 이용

• document.getElementById(id)
• id 속성값에 해당하는 노드 객체를 반환

// id가 "purchases"인 요소 노드 찾기
const shoppingList = document.getElementById("purchases");
// ul 반환

태그의 class 이용

• document.getElementsByClassName(className)
• class 속성값에 해당하는 노드의 목록을 반환
• 배열 형태로 반환되므로 인덱스 지정 필요

const shoppingList = document.getElementsByClassName('list')[0];
// ul 반환

태그명 이용

• 요소노드.getElementsByTagName(tagName)
• 유사 배열 객체로 반환
• 인덱스 지정 가능

// 태그명이 "li"인 요소 노드 찾기
const liList = shoppingList.getElementsByTagName('li');
// // [li, li, li] 반환

const secondLi = movies.getElementsByTagName('li')[1];

트리구조 이용

부모/자식 노드 찾기

요소 노드의 속성	설명
childNodes	자식 노드가 배열 형태로 저장
firstChild	첫번째 자식 노드(요소, 텍스트, 주석)
firstElementChild	첫번째 자식 요소 노트
lastChild	마지막 자식 노드(요소, 텍스트, 주석)
lastElementChild	마지막 자식 요소 노드
parentNode	부모 노드

const firstItem = shoppingList.firstChild;
// 요소, 텍스트, 주소 등 모든 노드를 찾기 때문에 \n(줄바꿈) 반환

const firstItem = shoppingList.firstElementChild 
// <li>두부</li> 반환

형제 노드 찾기

요소 노드의 속성	설명
previousSibling	바로 앞의 형제 노드(요소, 텍스트, 주석)
previousElementSibling	바로 앞의 형제 노드
nextSibling	바로 뒤의 형제 노드(요소, 텍스트, 주석)
nextElementSbling	바로 뒤의 형제 요소 노드

const secondItem = firstItem.previousElementSibling;
// <li>계란</li> 반환

CSS 셀렉터 이용

• 지정한 selector 구문에 매칭되는 노드 목록 중 첫번째 노드 반환
  document.querySelector(selector)
• 지정한 selector 구문에 매칭되는 노드 목록 반환
  document.querySelectorAll(selector)

const lastItem = document.querySelector('#purchases > li:last-child').firstChild.nodeValue;
// 라면 반환

nodeValue

• 노드 찾기를 하면 객체를 출력한다 ex)
• 두부
• 따라서 노드의 텍스트 값만 반환하기 위해 nodeValue 사용

// lastElementChild > shoppingList의 마지막 자식: <li>라면</li>
// firstChild > <li>라면</li>의 첫번째 노드 객체 선택: "라면"
// nodeValue > 실제 텍스트 값 반환: 라면
const lastItem = shoppingList.lastElementChild.firstChild.nodeValue
// 라면 반환

// nodeValue를 사용하여 텍스트 내용 수정
firstTextNode.nodeValue = '양파';