JavaScript를 사용하여 코드 작성을위한 노드 관계 작업 - 인형

HTML DOM 트리는 노드 간의 계층 관계에있는 패밀리 트리와 비슷합니다. 사실 자바 스크립트 프로그래머가 트리의 노드 간 관계를 설명하는 데 사용되는 기술 용어는 가족 관계에서 이름을 사용합니다.

루트 노드를 제외한 모든 노드에는 하나의 부모가 있습니다.
각 노드는 임의의 수의 자식을 가질 수 있습니다.
같은 부모를 가진 노드는 형제입니다.

HTML 문서에는 동일한 유형의 요소가 여러 개있는 경우가 많으므로 DOM을 사용하면 인덱스 번호를 사용하여 노드 목록의 고유 한 요소에 액세스 할 수 있습니다. 예를 들어, 문서의 첫 번째

요소를 p [0]으로, 두 번째

요소 노드를 p [1]로 참조 할 수 있습니다.

노드 목록이 배열처럼 보일지라도, 그렇지 않습니다. 노드 목록의 내용을 반복 할 수 있지만 노드 목록에 배열 방법을 사용할 수는 없습니다.

이 코드에서 세 개의

요소는 모두 요소의 하위 요소입니다. 그들은 부모가 같기 때문에 형제입니다.

HTML 패밀리 처음

두 번째

위 예제에서 HTML 주석은 section 요소의 하위 요소입니다. 닫는 섹션 태그 앞에있는 마지막 주석은 섹션의

마지막 하위 태그 라고합니다.

문서 노드 간의 관계를 이해하면 DOM 트리를 사용하여 문서 내의 모든 요소를 찾을 수 있습니다.

다음은 섹션 요소의 모든 하위 노드를 출력하는 스크립트가 포함 된 HTML 문서입니다.

HTML 패밀리

처음

두 번째

섹션 요소
var myNodelist =

문서의 노드. 신체. childNodes [1]. childNodes; for (i = 0; i 
");} 
이 코드의 출력은 브라우저에서와 유사합니다. 섹션 요소의 첫 번째 자식 노드는 텍스트 노드입니다. HTML 마크 업을 자세히 살펴보면 시작 섹션 태그와 주석 사이에 공백이 하나 있음을 알 수 있습니다.이 단일 공간처럼 단순한 것조차도 DOM 트리에 전체 노드를 만듭니다. 이 사실은 노드 간의 관계를 사용하여 DOM을 탐색 할 때 고려해야합니다. 
코드 출력보기. HTML DOM은 또한 형제 또는 부모에 대한 위치를 사용하여 노드를 탐색하기위한 몇 가지 키워드를 제공합니다. firstChild: 노드의 첫 번째 자식 참조

lastChild: 노드의 마지막 자식 참조

nextSibling: 동일한 부모 노드를 가진 다음 노드 참조

previousSibling: 이전 참조 동일한 부모 노드를 가진 노드

이 예제는 이러한 상대적인 속성을 사용하여 DOM을 탐색하는 방법을 보여줍니다.
이구아나는 재미 없다 boldFirstAndLastNav () {document. 신체. childNodes [1]. firstChild. 스타일. fontWeight = "bold"; 문서. 신체. childNodes [1]. 막내. 스타일. fontWeight = "bold";} 홈 |
href = "이유. html "> 왜 이구아나는 재미 있지 않습니까? | 무엇을 할 수 있습니까? | 저희에게 연락주세요
이구아나는 주변에있는 재미가 없습니다. 자세한 내용은 위 링크를 사용하십시오.

boldFirstAndLastNav ();

firstChild 및 lastChild 속성이 선택하고 스타일을 지정하려는 올바른 요소에 액세스하려면 요소 내의 모든 요소 사이의 간격을 제거해야합니다. 
이것은 브라우저에서 미리 볼 때 문서가 보이는 것입니다. 네비게이션의 첫 번째 링크와 마지막 링크는 굵게 표시됩니다.
브라우저에서 코드 미리보기.
DOM을 사용하여 문서 내의 기존 요소를 변경하는 예입니다. 이 요소를 선택하는 방법은 거의 사용되지 않습니다. 실수하기가 너무 쉽고 해석하고 사용하기가 너무 어렵습니다.