JavaScript에서 노드에 액세스하는 방법

노드에 액세스하는 방법: 1. ownerDocument 속성을 사용합니다. 3. childNodes 속성을 사용합니다. 5. lastChild 속성을 사용합니다. .

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

노드 간의 트리 관계를 통해 문서에서 각 노드를 찾을 수 있습니다. DOM은 문서 트리의 각 노드에 대한 JavaScript 탐색을 용이하게 하기 위해 노드 유형에 대해 다음 속성을 정의합니다.

• ownerDocument: 현재 노드의 루트 요소(문서 개체)를 반환합니다.
• parentNode: 현재 노드의 부모 노드를 반환합니다. 모든 노드에는 하나의 부모 노드만 있습니다
• childNodes: 현재 노드의 모든 자식 노드의 노드 목록을 반환합니다.
• firstChild: 현재 노드의 첫 번째 자식 노드를 반환합니다.
• lastChild: 현재 노드의 마지막 자식 노드를 반환합니다
• nextSibling: 현재 노드 뒤에 인접한 형제 노드를 반환
• previousSibling: 현재 노드 앞에 인접한 형제 노드를 반환

【1】childNodes

각 노드에는 childNodes 속성이 있으며, 이는 다음을 나타내는 nodeList 개체를 저장합니다. 모든 하위 노드의 목록입니다.

nodeList는 사용자가 자신의 위치를 ​​첨자로 액세스할 수 있는 정렬된 노드 집합을 저장하는 데 사용되는 배열형 개체입니다. childNodes는 대괄호 구문을 통해 nodeList의 값에 접근할 수 있고, childNodes 객체에는 목록에 포함된 자식 노드의 수(길이)를 나타내는 길이 속성이 포함되어 있지만, childNodes는 배열이 아니므로 배열 메서드를 직접 호출할 수 없습니다.

【2】parentNode

각 노드에는 문서 트리의 상위 노드를 가리키는 parentNode 속성이 있습니다. childNodes 목록에 포함된 모든 노드는 동일한 부모 노드를 가지므로 해당 parentNode 속성은 모두 동일한 노드를 가리킵니다.

parentNode 속성에서 반환된 노드는 항상 요소 유형 노드입니다. 요소 노드에만 하위 노드가 포함될 수 있기 때문입니다. 그러나 문서 노드에는 상위 노드가 없으며 문서 노드의 parentNode 속성은 null을 반환합니다.

【3】firstChild 및 lastChild

firstChild 속성은 첫 번째 자식 노드를 반환하고 lastChild 속성은 마지막 자식 노드를 반환합니다. 텍스트 노드와 속성 노드의 firstChild 및 lastChild 속성은 항상 null을 반환합니다.

참고: firstChild는 childNodes의 첫 번째 요소와 동일하며 lastChild 속성 값은 childNodes의 마지막 요소와 동일합니다.

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1]  = node.lastChild

【4】nextSibling 및 PreviousSibling

nextSibling 속성은 다음 인접 노드를 반환하고, PreviousSibling 속성은 이전 인접 노드를 반환합니다. 동일한 상위를 공유하는 인접한 노드가 없으면 null을 반환합니다.

【5】ownerDocument

DOM 문서 트리에서 ownerDocument 속성을 사용하여 루트 노드에 액세스할 수 있습니다.

node.ownerDocument

각 노드의 ownerDocument 속성을 통해 최상위에 도달하기 위해 여러 단계의 역추적을 거치지 않고도 문서 노드에 직접 액세스할 수 있습니다. 또한 사용자는 다음 방법을 사용하여 루트 노드에 액세스할 수도 있습니다.

document.documentElement

【관련 추천: javascript 학습 튜토리얼】

위 내용은 JavaScript에서 노드에 액세스하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!