DOM 다루기

1. 하나의 문서 객체 선택

• 찾는 값이 없다면 null 반환

document.querySelector(CSS 선택자)	가장 첫 번째 요소만 선택 가능 / IE9 이상 지원
document.getElementById(id명)	id명으로 하나의 요소만 선택(id값 대소문자 구별)

 

2. 여러 문서 객체 선택

• 문서 내에 같은 이름의 요소가 존재한다면, 그 개수만큼 배열 형태로 반환
• 실제 배열이 아닌 유사 배열 객체!!!
• 찾는 값이 없다면 빈 배열 반환

document.querySelectorAll(CSS 선택자)	None-Live NodeList 반환 탐색 범위 내에서 선택자의 마지막 요소만 검증(https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll#HTML)
document.getElementsByTagName(요소명)	Live HTMLCollection 반환
document.getElementsByClassName(class명)	Live HTMLCollection 반환 / IE9 이상 지원

 

※  HTMLCollecton vs NodeList ?!

둘 다 실제 배열은 아니지만 length 속성을 가지고 있는 유사 배열 객체이다. 

index를 제공하여 배열과 같이 각 항목에 접근 가능하다. 

 

HTMLCollection

• DOM이 바뀔 때(추가/삭제) 실시간으로 업데이트된다.
• DOM을 선택하는 메소드를 다시 호출하지 않아도 자동으로 업데이트하여 DOM트리와 동기화된 상태를 유지
• name 속성, id 속성, index number으로 접근 가능
  • HTMLCollectioin.item() : index로 접근
  • HTMLCollection.namedItem() : id 속성, name 속성으로 접근
• 참고) 이전 브라우저에서는 getElementsByClassName()과 같은 메소드에 대해서 HTMLCollection 대신 NodeList를 반환했다.

NodeList

• Live NodeList -> ex) element.childNodes()
  • DOM의 동적 변경 사항을 실시간으로 반영
• None-Live NodeList -> ex) document.querySelectorAll()
  • DOM을 동적으로 변경해도 반영하지 않는다.
• index로만 item에 각 항목에 접근 가능
  • NodeList.item() : index로 접근 가능
  • NodeList.entries() : 키&값 쌍의 iterator 반환
  • NodeList.keys() : 키 순회 
  • NodeList.values() : 값 순회
  • NodeList.forEach() : 요소마다 한번씩 인자로 전달받은 함수 실행
• NodeList에만 Text Node, Attribute Node 포함 가능

var node_list = document.querySelectorAll('li'); //NodeList 객체
var collection = document.getElementsByTagName('li'); // HTML Collection 객체

collection[0].style.color = "red" // 인덱스 번호로 접근 가능
collection.namev.style.color = "red"; // id 접근 가능
collection.idv.style.color = "red"; // name 접근 가능

node_list[1].style.backgroundColor = "orange"; // 인덱스번호로 접근 가능
node_list[2].style.backgroundColor = "orange"; // item() 메서드 접근 가능
node_list.namev.style.backgroundColor = "orange"; // name 접근이 안됨 예외발생

 

순회 방식

 

일반적은 for 반복문 사용 가능

for..of 사용 가능(IE 지원 X)

NodeList.prototype.forEach() 사용 가능(NodeList만 사용 가능, IE 지원 X)

• Array.prototype.forEach()는 IE9 이상 지원

// Array.prototype.forEach() 사용시
Array.prototype.forEach.call(li, function(item){
	console.log(item);
});

// Array로 변환하여 사용
let arr_li = Array.prototype.slice.call(li); // Array.from보다 빠르다
let arr_li2 = Array.from(li); // IE 미지원하는 ES6문법

// NodeList.prototype.forEach() 사용은 바로 가능
let node_li = document.querySelectorAll('li');
node_li.forEach(function(el){
	console.log(el);
});

 

for..in을 사용하여 순회 비추

• 요소뿐만 아니라 길이와 항목 속성까지 순회하며 고정된 순서로 각 요소를 접근한다는 보장이 없다.

 

 

---

※ ES6에 해당하는 내용은 노란색 배경으로 구분하였습니다.