Javascript obtient le nœud DOM
Il existe de nombreuses façons d'obtenir des nœuds DOM. Vous pouvez les obtenir en fonction de l'attribut id et du nom de la balise. Vous pouvez également obtenir des nœuds enfants, des nœuds parents, des nœuds précédents et des nœuds suivants.
Cette section explique comment obtenir des nœuds en fonction de l'attribut id et du nom de balise HTML.
Méthode getElementById()
Pour obtenir le nœud DOM en fonction de l'attribut id de la balise HTML, veuillez utiliser la méthode getElementById(). Cette méthode renvoie un objet nœud.
Syntaxe :
document.getElementById(id)
où id est l'attribut id de la balise HTML.
Par exemple, l'instruction pour obtenir le nœud avec id="demo" est :
La valeur de retour de cette instruction est [ object HTMLDivElement ] (objet nœud d'élément).
Par exemple, obtenez plusieurs nœuds d'éléments typiques :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML DOM树型结构图</title>
<div id="demo_div">我是<div>标签</div>
<p id="demo_p">我是<P>标签</p>
<h5 id="demo_h5">我是<h5>标签</h5>
<script type="text/javascript">
function getNode(ele){
alert(
"获取到的元素节点："+ele+"\n"+
"id属性："+ele.getAttribute("id")+"\n"+
"节点类型："+ele.nodeType+"\n"+
"文本内容："+ele.firstChild.nodeValue
);
}
document.getElementById("demo_div").onclick=function(){
getNode(this); // this 指向当前发生鼠标单击事件的节点
}
document.getElementById("demo_p").onclick=function(){
getNode(this); // this 指向当前发生鼠标单击事件的节点
}
document.getElementById("demo_h5").onclick=function(){
getNode(this); // this 指向当前发生鼠标单击事件的节点
}
</script>
</head>
<body>
</body>
</html>Veuillez consulter la démonstration suivante
Méthode getElementsByTagName()
Pour obtenir des nœuds DOM basés sur les noms de balises HTML, veuillez utiliser getElementsByTagName() méthode . Cette méthode renvoie le nœud d'élément obtenu sous forme de tableau.
Syntaxe :
nodeObject.getElementsByTagName(tagName)
où nodeObject est le nœud de l'élément et tagName est le nom de la balise HTML.
Remarque : la méthode getElementsByTagName() peut non seulement rechercher tous les nœuds dans l'ensemble du document HTML, mais également rechercher les nœuds enfants d'un certain nœud. Lorsque vous l'utilisez, vous devez spécifier la plage de recherche, c'est-à-dire spécifier nodeObject.
Par exemple, pour obtenir toutes les balises <div> dans un document HTML :
document.getElementsByTagName("div");
Obtenir tous les < à l'intérieur de la balise avec id=" demo" ;div> tag :
document.getElementById("demo").getElementsByTagName("div");
Par exemple, comptez le nombre de toutes les balises <div> et affichez leur Texte :
<div id="demo2"> <div>我是第 1 个<div>标签</div> <div>我是第 2 个<div>标签</div> <div>我是第 3 个<div>标签</div> <div>我是第 4 个<div>标签 <div>我是第 5 个<div>标签</div> <div>我是第 6 个<div>标签</div> </div> </div>
<script type="text/javascript">
// 使用 getElementsByTagName() 方法获得 id="demo2" 的标签内部的所有 <div> 标签
var nodeArr=document.getElementById("demo2").getElementsByTagName("div");
var len=nodeArr.length;
var nodeStr="";
for(i=0;i<len;i++){
nodeStr+="第 "+(i+1)+" 个节点的文本是："+nodeArr[i].firstChild.nodeValue+"\n";
}
document.getElementById("demo2").onclick=function(){
alert(
"节点个数："+len+"\n\n"+
"节点文本：\n"+nodeStr
);
}
</script>Remarque :
getElementById( ) est une méthode de document (nœud racine), les autres nœuds d'éléments ne peuvent pas utiliser cette méthode. Étant donné que l'attribut id est unique dans l'ensemble du document HTML, il doit être recherché à partir du nœud racine.
getElementsByTagName() est une méthode de tous les nœuds d'éléments, non seulement le document (nœud racine) peut être utilisé, mais d'autres nœuds peuvent également être utilisés. Par conséquent, pour obtenir des nœuds DOM basés sur les noms de balises HTML, vous pouvez non seulement effectuer une recherche à partir du document (nœud racine), mais également à partir de n'importe quel autre nœud d'élément.
section suivante