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(
"獲取到的元素節(jié)點："+ele+"\n"+
"id屬性："+ele.getAttribute("id")+"\n"+
"節(jié)點類型："+ele.nodeType+"\n"+
"文本內容："+ele.firstChild.nodeValue
);
}
document.getElementById("demo_div").onclick=function(){
getNode(this); // this 指向當前發(fā)生鼠標單擊事件的節(jié)點
}
document.getElementById("demo_p").onclick=function(){
getNode(this); // this 指向當前發(fā)生鼠標單擊事件的節(jié)點
}
document.getElementById("demo_h5").onclick=function(){
getNode(this); // this 指向當前發(fā)生鼠標單擊事件的節(jié)點
}
</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)+" 個節(jié)點的文本是："+nodeArr[i].firstChild.nodeValue+"\n";
}
document.getElementById("demo2").onclick=function(){
alert(
"節(jié)點個數(shù)："+len+"\n\n"+
"節(jié)點文本：\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.
