Navigation JavaScript HTML DOM (partage de résumé)

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement les problèmes liés à la navigation HTML DOM. Examinons-le ensemble, j'espère qu'il sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, front-end web】

Navigation JS HTML DOM

Grâce à HTML DOM, vous pouvez utiliser les relations de nœuds pour naviguer dans l'arborescence des nœuds.

Nœud DOM

Selon la norme HTML DOM du W3C, Tout ce qui se trouve dans un document HTML est un nœud :

• Le document entier est un nœud de document
• Chaque élément HTML est un nœud d'élément
• Le texte à l'intérieur du L'élément HTML est un nœud de texte
• Chaque attribut HTML est un nœud d'attribut
• Tous les commentaires sont des nœuds de commentaires
  
  Avec le DOM HTML, tous les nœuds de l'arborescence des nœuds sont accessibles via JavaScript.

Possibilité de créer de nouveaux nœuds et également de modifier et supprimer tous les nœuds.

Relations entre nœuds

Les nœuds de l'arborescence des nœuds ont une certaine relation hiérarchique les uns avec les autres.

• Les termes (parent, enfant et frère, parent, enfant et frère) sont utilisés pour décrire ces relations
  • Dans une arborescence de nœuds, le nœud supérieur est appelé la racine (nœud racine)
  • Chaque nœud a un parent, sauf Root (le nœud racine n'a pas de nœud parent)
  • Le nœud peut avoir un certain nombre d'enfants
  • Les frères et sœurs (frères ou sœurs) font référence aux nœuds avec le même parent

par exemple:

   
       <title>DOM 教程</title>
   

  
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   

从以上的 HTML 中您能读到以下信息：

-  是根节点
-  没有父
-  是  和  的父
-  是  的第一个子
-  是  的最后一个子
**同时：**

-  有一个子：<title>
- <title> 有一个子（文本节点）："DOM 教程"
- </title>
</title> 有两个子：<h1> 和 </h1><p>
- </p><h1> 有一个子："DOM 第一课"
- </h1><p> 有一个子："Hello world!"
- </p><h1> 和 </h1><p> 是同胞</p>

in Navigation entre

Avec JavaScript, vous pouvez naviguer entre nœuds en utilisant les propriétés de nœud suivantes : précédentFrère ou sœur

• Enfant Nœuds et valeurs de nœud
• Une erreur courante dans le traitement DOM est de penser que les nœuds d'éléments contiennent du texte.
• Exemple :

<title>DOM 教程</title>

(dans l'exemple ci-dessus) le nœud d'élément

ne contient pas de texte

Il contient un nœud de texte avec la valeur "DOM Tutorial".

La valeur du nœud texte est accessible via l'attribut innerHTML du nœud :

var myTitle = document.getElementById("demo").innerHTML;

Accéder à l'attribut innerHTML équivaut à accéder à la nodeValue du premier nœud enfant :

var myTitle = document.getElementById("demo").firstChild.nodeValue;

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Les trois exemples suivants récupèrent le texte de l'élément

1. et le copient dans l'élément

 :

2. Exemple 1

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>

3. Exemple 2

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

Ex amplement 3

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

InnerHTML

us Utiliser innerHTML Récupérer le contenu d'un élément HTML. Le nœud racine

DOM

possède deux propriétés spéciales qui permettent d'accéder au document complet :

document.body - le corps du document

document.documentElement - le document complet instance

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>

<script>
 alert(document.body.innerHTML);
</script>

instance

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.documentElement</b> 属性。</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

Attribut nodeName

L'attribut spécifie le nom du nœud.
nodeName est en lecture seule

Le nodeName du nœud élément est équivalent au nom de la balise
Le nodeName du nœud d'attribut est le nom de l'attribut

Le nodeName du nœud texte

Toujours

#text

nodeNameLe nodeName du nœud du document

Always

#document
• Exemple :

• <h1>我的第一张网页</h1>
  <p>Hello!</p>
  
  <script>
  document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
  </script>

Return H1
• Comment :
nodeName contient toujours le nom de balise
• uppercase de l'élément HTML.
  Attribut nodeValue L'attribut nodeValue spécifie la valeur d'un nœud.

nodeValue du nœud d'élément n'est pas défini
nodeValue du nœud de texte est du texte texte
nodeValue du nœud d'attribut est la valeur d'attribut

attribut nodeType

l'attribut nodeType renvoie le type de ** nœud. **nodeType est en lecture seule.

Instance

<h1>我的第一张网页</h1>
<p>Hello!</p>

<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeType;
</script>

renvoie 1

L'attribut nodeType le plus important est :

Le type 2 est obsolète dans le DOM HTML. Non obsolète dans XML DOM.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

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!