Maison > Article > interface Web > Qu’est-ce que le DOM en JavaScript ? Comment accéder au nœud dom

Qu’est-ce que le DOM en JavaScript ? Comment accéder au nœud dom

伊谢尔伦original: 2017-07-20 13:20:541936parcourir

DOM est l'abréviation de Document Object Model. Le modèle objet de document est un document qui exprime XML ou HTML sous forme de nœuds d'arborescence. À l'aide des méthodes et propriétés DOM, vous pouvez accéder, modifier, supprimer n'importe quel élément de la page, et vous pouvez également ajouter un élément. DOM est une API indépendante du langage qui peut être implémentée dans n'importe quel langage, y compris Javascript

Regardez le texte ci-dessous.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
 <head> 
  <title>My page</title> 
 </head> 
 <body> 
  <p class="opener">first paragraph</p> 
  <p><em>second</em> paragraph</p> 
  <p id="closer">final</p> 
 </body> 
</html>

Jetons un coup d'oeil au deuxième paragraphe

<p><em>second</em> paragraph</p>

Vous pouvez voir que c'est une balise p. Il est inclus dans la balise body. Donc body est le nœud parent de p et p est le nœud enfant. Les premier et troisième paragraphes sont également des nœuds enfants du corps. Ce sont tous des nœuds frères du deuxième paragraphe. Cette balise em est un nœud enfant du deuxième segment p. Donc p est son nœud parent. La relation entre nœud parent-enfant peut représenter une relation arborescente. On appelle donc ça l'arbre DOM

Accéder aux nœuds DOM

Avant de valider un formulaire ou de modifier une image, il faut savoir comment accéder aux éléments (element. ). Il existe de nombreuses façons d'obtenir des éléments.
Nœud Document
Grâce au document, nous pouvons accéder au document actuel. Nous pouvons utiliser des firebugs (plug-in Firefox) pour visualiser les propriétés et méthodes du document.
Tous les nœuds ont les attributs nodeType, nodeName, nodeValue. Jetons un coup d'œil au nodeType du document

document.nodeType;//9

Il existe 12 types de nœuds au total. le document est le 9. Les plus couramment utilisés sont l'élément (élément : 1), l'attribut (attribut : 2) et le texte (texte : 3).
Les nœuds ont aussi des noms. pour les balises HTML. Le nom du nœud est le nom de l'étiquette. Le nom du nœud de texte (text) est #text Le nom du nœud de document (document) est #document

les nœuds ont également des valeurs. Pour les nœuds de texte, la valeur est le texte. La valeur du document est null
documentElement
XML aura un nœud ROOT pour envelopper le document. pour les documents HTML. Le nœud ROOT est la balise html. Accédez au nœud racine. Vous pouvez utiliser les propriétés de documentElement.

document.documentElement;//<html> 
document.documentElement.nodeType;//1 
document.documentElement.nodeName;//HTML 
document.documentElement.tagName;//对于element，nodeName和tagName相同

Nœuds enfants
Afin de déterminer s'il contient des nœuds enfants, nous pouvons utiliser la méthode suivante

document.documentElement.hasChildNodes();//true

HTML a deux nœuds enfants.

document.documentElement.childNodes.length;//2 
 
document.documentElement.childNodes[0];//<head> 
 
document.documentElement.childNodes[1];//<body>

Vous pouvez également accéder au nœud parent via le nœud enfant

document.documentElement.childNodes[1].parentNode;//<html>

Nous attribuons le référence aux variables du corps

var bd = document.documentElement.childNodes[1]; 
bd.childNodes.length;//9

Regardons la structure du corps

 
 first paragraph 
 <p><em>second</em> paragraph</p> 
 final

Pourquoi les nœuds enfants Le nombre est-il 9.
Il y a d’abord 4 P et un commentaire, soit un total de 4.
4 nœuds incluent 3 nœuds vierges. Cela fait 7.
Le 8ème nœud vierge entre le corps et la première p.
Le neuvième est le nœud vide entre le commentaire et 36cc49f0c466276486e50c850b7e4956.
Il y a 9 nœuds au total.

Accès rapide au DOM

Vous pouvez accéder à n'importe quel nœud du document via childNodes, parentNode, nodeName, nodeValue et les attributs. Mais dans l'application réelle, les nœuds de texte sont assez ennuyeux. Si le texte change, cela peut affecter le script. De plus, si l’arborescence DOM est suffisamment profonde, il est effectivement peu pratique d’y accéder. Heureusement, nous pouvons accéder aux nœuds de manière plus pratique. Ces méthodes sont

getElementsByTagName()
getElementsByName()
getElementById()

Parlons d'abord de getElementsByTagName()
Obtenez une collection d'éléments HTML via un nom de balise. L'exemple est le suivant

document.getElementsByTagName(&#39;p&#39;).length;//3

Comme ce qui est renvoyé est une collection, nous pouvons y accéder sous forme d'indice de tableau ou via la méthode item. Pour comparer, il est recommandé d'utiliser la méthode d'accès au tableau. Plus simple.

document.getElementsByTagName(&#39;p&#39;)[0];// <p class="opener"> 
document.getElementsByTagName(&#39;p&#39;).item(0);//和上面的结果一样 
 
document.getElementsByTagName(&#39;p&#39;)[0].innerHTML;//first paragraph

Pour accéder aux attributs d'un élément, vous pouvez utiliser la collection d'attributs. Mais le plus simple est d’y accéder directement en tant que propriété. Prenons un exemple

document.getElementsByTagName(&#39;p&#39;)[2].id;//closer

Il est à noter que l'attribut class ne peut pas être utilisé normalement. . Utilisez className. Parce que class est un mot réservé dans la spécification JavaScript.

document.getElementsByTagName(&#39;p&#39;)[0].className;//opener

Nous pouvons accéder à tous les éléments de la page en utilisant la méthode suivante

<span style="color: #ff0000;">document.getElementsByTagName(&#39;*&#39;).length;//9</span>

Remarque : Au début d'IE La version ne prend pas en charge la méthode ci-dessus. Peut être remplacé par document.all. IE7 le prend déjà en charge, mais tous les nœuds sont renvoyés, pas seulement les nœuds d'éléments.

Frères et sœurs, corps, premier, dernier enfant
nextSibling et previousSibling sont deux moyens plus pratiques d'accéder au DOM. Utilisé pour accéder aux nœuds adjacents. Les exemples sont les suivants

var para = document.getElementById(&#39;closer&#39;) 
para.nextSibling;//"\n" 
para.previousSibling;//"\n" 
para.previousSibling.previousSibling;//<p> 
para.previousSibling.previousSibling.previousSibling;//"\n" 
para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">

body est utilisé pour accéder à l'élément body.

document.body;//<body>

firstChild et lastChild . firstChild est identique à childNodes[0]. lastChild est identique à childNodes[childNodes.length - 1].

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la façon d'utiliser JavaScript dom pour créer et supprimer des instances d'éléments HTMLArticle suivant：Explication détaillée de la façon d'utiliser JavaScript dom pour créer et supprimer des instances d'éléments HTML

Articles Liés

Voir plus