DOM(Document Object Model)
DOM은 HTML에서 정의하는 것이나, 자바스크립트의 일부로 구현된 것이 아닌, 주요 브라우저 벤더들이 구현하는 것이다.
DOM은 HTML 페이지에 대한 모델을 구성하거나 페이지에 접근하고 수정하는 영역을 담당한다.
DOM은 브라우저가 DOM tree를 이용하여 이 모델을 구성하는 방법을 명시한다.
DOM 쿼리 캐싱하기
스크립트가 같은 요소를 한 번 이상 사용할 필요가 있다면 요소의 위치를 변수에 저장하는 것이 좋다.
같은 요소를 탐색하기 위해 DOM 트리를 여러번 조회하는 것을 방지할 수 있기 때문이다.
이런 방법을 Caching 이라고 한다. DOM 트리내의 객체에 대한 Reference(노드의 위치)를 저장한다고도 한다.
var itemOne = getElementById('one');
사용한 메서드가 하나 이상의 노드를 리턴할 수 있다면 탐색 조건에 일치하는 노드가 하나 뿐이더라도,
항상 노드의 collection인 NodeList 객체를 리턴한다.
Nodelist 객체에서 요소 선택하기
var elements = getElementById('hot');
if (elements.length >=1) {
var firstItem = elements[0]; // elements.item(0);
}
배열 문법이 item() 메서드보다 빠르게 동작한다.
CSS 선택자를 이용해 요소 선택하기
querySelector는 첫번째 요소만 리턴하고, querySelectorAll은 NodeList 객체를 리턴한다.
// querySelector 메서드는 조건에 일치하는 첫 번째 요소만 리턴한다.
var el = document.querySelector('li.hot');
el.className = 'cool';
// querySelectorAlll 메서드는 NodeList 객체를 리턴한다.
// 조건에 일치하는 두 번째 (목록에서는 세 번째) li 요소를 선택하여 특성을 변경한다.
var els = document.querySelectorAll('li.hot');
els[1].className = 'cool';
공백 노드
일부 브라우저는 요소 사이사이의 공백을 텍스트 노드로 추가하기 떄문에 DOM을 탐색하는데 방해가 된다.
(ie는 공백문자를 무시해 텍스트 노드를 추가 생성하지 않음)
페이지 내의 공백 문자를 모두 제거한다면 페이지 크기가 작아져 더욱 빠르게 클라이언트에 전송되거나 로드할 수 있지만,
코드를 읽기 어려워진다.
jQuery라는 자바스크립트 라이브러리는 이 문제를 알아서 해결해준다.
텍스트 노드에 접근해서 변경하기
var itemTwo = document.getElementById('two'); // 목록의 두 번째 아이템을 가져온다.
var elText = itemTwo.firstChild.nodeValue; // 텍스트 내용을 가져온다.
//elText = elText.replace('잣', '양배추');
itemTwo.firstChild.nodeValue = elText.replace('잣', '양배추'); // 잣을 양배추로 변경한다.
HTML 콘텐츠 추가 / 제거하기
DOM 조작방식은 innerHTML 속성을 이용하는 방법보다 보안상 안전하다. 하지만 더 많은 코드를 작성해야하며, 더 느리게 동작할 수도 있다.
innerHTML 속성은 전체 콘텐츠에 접근 및 수정할 때 적합하다.
요소로부터 HTML을 가져올 때 innerHTML 속성을 이용해 요소의 모든 콘텐츠를 하나의 문자열로 가져올 수 있다.
이 때 마크업도 포함된다.
'<em>신선한</em>무화과'
아래는 마크업을 포함한 문자열을 수정하는 예제이다.
// 목록의 첫 번째 아이템을 변수에 저장한다.
var firstItem = document.getElementById('one');
// 아이템의 콘텐츠를 가져온다.
//var itemContent = firstItem.innerHTML;
// 첫 번째 아이템의 콘텐츠를 링크로 수정한다.
firstItem.innerHTML = '<a href=\"http://example.org\">' + firstItem.innerHTML + '</a>';