DOM Script 01 - 노드 다루기

From. 「jQuery를 활용한 인터랙티브 웹 콘텐츠 제작 - 기초부터 실전활용까지」

Sample Structure

샘플 페이지(div, id=sample_page, class=page)
헤더 영역(div, id=hdr)
컨텐츠 영역(div, id=cnt, class=sample_content)
JavaScript란?(div)

1. 자바스크립트 Core(p, id=data_1)

2. 자바스크립트 BOM(p, id=data_2)

3. 자바스크립트 DOM(p, id=data_3)

을 배운다는것
자바스크립트에서 배울 내용(div, class=content_data)

1. 자바스크립트 DOM(p)

2. 자바스크립트 Ajax(p)

jQuery에서 배울 내용(div, class=content_data)

1. jQuery DOM(p)

2. jQuery Ajax(p)

푸터 영역(div, id=ftr)


문서에서 특정 태그 이름을 지닌 노드 찾기


NodeList 객체

getElementsByTagName()의 결과 값은 검색된 모든 노드를 NodeList 라는 객체에 담아 반환됩니다. NodeList는 벼열과 비슷한 일종의 컬렉션(Collection) 객체로서, DOM의 객체 중 하나입니다. NodeList 객체에서 제공하는 프로퍼티와 메서드는 length와 item() 메서드 둘뿐입니다. length에는 결과값의 전체 개수 정보가 단겨 있으며, item()은 결과값 항목별로 접근할 때 사용합니다. item() 대신 배열을 사용하듯 divs[i]와 같은 식으로도 특정 항목에 접근할 수 있습니다.



특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기

문서 전체가 아닌 특정 노드의 자식 노드 가운데 특정 태그 이름을 가진 엘리먼트를 찾고 싶은 경우 Document 객체의 메서드인 getElementsByTagName() 대신 Element 객체의 메서드인 getElementsByTagName()을 사용합니다.
(window.document.getElementsByTagName() 메서드는 Document 객체의 메서드이고, div2.getElementsByTagName() 메서드는 Element객체인 div2의 getElementsByTagName() 메서드 입니다. )
이 두 메서드는 같은 이름에 같은 기능, 그리고 반환값 역시 같지만 검색 대상이 문서 전체냐 아니면 특정 노드냐에 따라 완전히 달라지므로 혼동스로울 때가 있습니다. 다음 page를 참고하세요. http://florakid.com/florakid_lib/sub/javascript/dom_02.html 페이지 내 검색 기능을 사용하여 "getElementsByTagName()"을 검색해 보면 Document 객체와 Element 객체 모두에 getElementsByTagName()가 들어있는 것을 확인할 수 있습니다.