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

QQ截图20161013091511.png

QQ截图20161013091518.png

QQ截图20161013091525.png

QQ截图20161013091533.png

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.

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML DOM树型结构图</title> <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> </head> <body> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Javascript obtient le nœud DOM

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]