Qu'est-ce que le DOM en JavaScript ? Comment accéder au nœud dom-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-07-20 13:20:54

original

1978 Les gens l'ont consulté

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>

Copier après la connexion

Jetons un coup d'oeil au deuxième paragraphe

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

Copier après la connexion

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

Copier après la connexion

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相同

Copier après la connexion

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

Copier après la connexion

HTML a deux nœuds enfants.

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

Regardons la structure du corps

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

Copier après la connexion

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 .
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()

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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">

Copier après la connexion

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