JS에서 DOM 문서 트리를 탐색하는 방법-JS 튜토리얼-php.cn

JS에서 DOM 문서 트리를 탐색하는 방법

php中世界最好的语言

풀어 주다： 2018-04-08 13:59:16

원래의

1710명이 탐색했습니다.

이번에는 JS로 DOM문서 트리를 순회하는 방법과 JS로 DOM 문서 트리를 순회할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

이 문서의 예에서는 JS가 DOM 문서 트리를 순회하는 방법을 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1 소개

문서 트리 탐색은 parentNode 속성, firstChild 속성, lastChild 속성, PreviousSibling 속성 및 nextSibling 속성을 사용하여 수행됩니다.

1. parentNodeAttribute

이 속성은 현재 노드의 상위 노드를 반환합니다.

[pNode=]obj.parentNode[pNode=]obj.parentNode

pNode：该参数用来存储父节点，如果不存在父节点将返回“null”。

2、firstChild属性

该属性返回当前节点的第一个子节点。

[cNode=]obj.firstChild

cNode：该参数用来存储第一个子节点，如果不存在将返回“null”。

3、lastChild属性

该属性返回当前节点的最后一个子节点。

[cNode=]obj.lastChild

cNode：该参数用来存储最后一个子节点，如果不存在将返回“null”。

4、previousSibling属性

该属性返回当前节点的前一个兄弟节点。

[sNode=]obj.previousSibling

sNode：该参数用来存储前一个兄弟节点，如果不存在将返回“null”。

5、nextSibling属性

该属性返回当前节点的后一个兄弟节点。

[sNode=]obj.nextSibling

pNode: 이 매개변수는 상위 노드를 저장하는 데 사용됩니다. 상위 노드가 없으면 "null"이 반환됩니다.

firstChildAttribute이 속성은 현재 노드의 첫 번째 하위 노드를 반환합니다.

[cNode=]obj.firstChild

cNode: 이 매개변수는 첫 번째 하위 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다.

3. lastChildAttribute

이 속성은 현재 노드의 마지막 하위 노드를 반환합니다.

[cNode=]obj.lastChildcNode: 이 매개변수는 마지막 하위 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다.

previousSiblingAttribute

이 속성은 현재 노드의 이전 형제 노드를 반환합니다.

[sNode=]obj.previousSibling

sNode: 이 매개변수는 이전 형제 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다. 5,
nextSibling

Attribute

이 속성은 현재 노드의 다음 형제 노드를 반환합니다.
[sNode=]obj.nextSibling

🎜sNode: 이 매개변수는 다음 형제 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다. 🎜🎜🎜🎜2 애플리케이션 🎜🎜🎜🎜문서 트리를 탐색하면 해당 페이지에서 해당 버튼을 통해 문서의 각 노드에 대한 이름, 유형 및 노드 값을 찾을 수 있습니다. 🎜🎜🎜🎜Three Code🎜🎜🎜

<head>
<title>遍历文档树</title>
</head>
<body >
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na"/><br />
节点类型：<input type="text" id="ty"/><br />
节点的值：<input type="text" id="va"/><br />
<input type="button" value="父节点" onclick="txt=nodeS(txt,&#39;parent&#39;);"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,&#39;firstChild&#39;);"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,&#39;lastChild&#39;);"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,&#39;previousSibling&#39;);" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,&#39;nextSibling&#39;);"/>
<input type="button" value="返回根节点" onclick="txt=document.documentElement;txtUpdate(txt);"/>
</form>
<script language="javascript">
<!--
function txtUpdate(txt)
{
 window.document.frm.na.value=txt.nodeName;
 window.document.frm.ty.value=txt.nodeType;
 window.document.frm.va.value=txt.nodeValue;
}
function nodeS(txt,nodeName)
{
switch(nodeName)
{
case"previousSibling":
if(txt.previousSibling)
{
 txt=txt.previousSibling;
}
else
 alert("无兄弟节点");
break;
case"nextSibling":
if(txt.nextSibling)
{
 txt=txt.nextSibling;
}
else
 alert("无兄弟节点");
break;
case"parent":
if(txt.parentNode)
{
 txt=txt.parentNode;
}
else
 alert("无父节点");
break;
case"firstChild":
if(txt.hasChildNodes())
{
 txt=txt.firstChild;
}
else
 alert("无子节点");
break;
case"lastChild":
if(txt.hasChildNodes())
{
 txt=txt.lastChild;
}
else
 alert("无子节点")
break;
}
 txtUpdate(txt);
return txt;
}
var txt=document.documentElement;
 txtUpdate(txt);
-->
</script>
</body>

로그인 후 복사

🎜🎜🎜Four Running results🎜🎜🎜🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트에서! 🎜🎜추천 도서: 🎜🎜🎜React는 휴대폰 번호의 데이터 동기화를 실현합니다.🎜🎜🎜🎜🎜Babel은 es6 클래스 구문을 어떻게 변환합니까?🎜🎜🎜

위 내용은 JS에서 DOM 문서 트리를 탐색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!