Maison > Article > interface Web > Quelles sont les méthodes pour parcourir l’arborescence des documents DOM ?
Quelles sont les méthodes pour parcourir l’arborescence des documents DOM ?
- php中世界最好的语言original
- 2018-05-02 11:56:201350parcourir
Cette fois je vais vous présenter quelles sont les méthodes pour parcourir l'arborescence des documents DOM, et quelles sont les précautions de parcourir l'arborescence des documents DOM. Voici un cas pratique. , jetons un coup d'oeil. z
1 Introduction
La traversée de l'arborescence du document est réalisée en utilisant l'attribut parentNode, l'attribut firstChild, l'attribut lastChild, l'attribut previousSibling et l'attribut nextSibling . 1. AttributparentNode
Cet attribut renvoie le nœud parent du nœud actuel.[pNode=]obj.parentNode
firstChild
Cet attribut renvoie le premier nœud enfant du nœud actuel.[cNode=]obj.firstChild
lastChild
Cet attribut renvoie le dernier nœud enfant du nœud actuel.[cNode=]obj.lastChild
previousSibling
Cet attribut renvoie le nœud frère précédent du nœud actuel.[sNode=]obj.previousSibling
nextSibling
Cet attribut renvoie le nœud frère suivant du nœud actuel.[sNode=]obj.nextSibling
Deuxième application
Parcourez l'arborescence du document Sur la page, vous pouvez trouver le nom, le type et le numéro de chaque nœud du document. via la valeur du nœud du bouton correspondant.Trois codes
<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,'parent');"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');"/>
<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>
Quatre résultats en cours d'exécution
Explication détaillée du webpack de mise à niveau de vue cli en 4 étapes
Comment configurer l'application vue monopage routage frontal
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!