Maison > Article > interface Web > Qu'est-ce que le DOM en JavaScript ? Comment accéder au nœud dom
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('p').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('p')[0];// <p class="opener"> document.getElementsByTagName('p').item(0);//和上面的结果一样 document.getElementsByTagName('p')[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('p')[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('p')[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('*').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('closer') 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!