Accéder, créer, modifier et supprimer des nœuds DOM dans les connaissances JavaScript

Maison

interface Web

js tutoriel

Accéder, créer, modifier et supprimer des nœuds DOM dans les connaissances JavaScript_Basic

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:32 PM

dom javascript js

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
Jetez un œil à l’un des textes 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'œil au deuxième paragraphe

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

Copier après la connexion

Vous pouvez voir qu'il s'agit d'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. C'est donc ce qu'on appelle l'arbre DOM.

Core DOM et HTML DOM
Nous savons déjà que DOM peut représenter des documents HTML et XML. En fait, un document HTML est un document XML, mais plus standardisé. Par conséquent, dans le cadre du DOM niveau 1, la spécification Core DOM s'applique à tous les documents XML et la spécification HTML DOM étend Core DOM. Bien entendu, HTML DOM ne s'applique pas à tous les documents XML, uniquement aux documents HTML. Jetons un coup d'œil aux constructeurs de Core DOM et HTML DOM.

Relation constructeur

20151116142938841.png (639×572)

Accéder au nœud DOM
Avant de valider le formulaire ou de modifier l'image, il faut savoir comment accéder à l'élément (element.). Il existe de nombreuses façons d'obtenir des éléments.

Nœud de document
Nous pouvons accéder au document actuel via document. 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 et 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 également 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 nulle

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

On attribue la référence du corps à la variable

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

Copier après la connexion

Regardons la structure du corps

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

Copier après la connexion

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

Propriétés
Parce que le premier nœud est un nœud vide, le deuxième nœud est la première étiquette p.

bd.childNodes[1];//  <p class="opener">

Copier après la connexion

Vous pouvez vérifier s'il a des attributs

bd.childNodes[1].hasAttributes();//true

Copier après la connexion

Vous pouvez également vérifier le nombre d'attributs

bd.childNodes[1].attributes.length;//1 
 
//可以用index和名字来访问属性，也可以用getAttribute方法。 
bd.childNodes[1].attributes[0].nodeName;//class 
 
bd.childNodes[1].attributes[0].nodeValue;//opener 
 
bd.childNodes[1].attributes['class'].nodeValue;//opener 
 
bd.childNodes[1].getAttribute('class');//opener

Copier après la connexion

Accéder au contenu dans la balise
Regardons la première balise p
Vous pouvez y accéder en utilisant la propriété textContent. Il convient de noter que textContent n'existe pas dans le navigateur IE. Veuillez le remplacer par innerText. Le résultat sera le même.

bg.childNodes[1].textContent;// "first paragraph"

Copier après la connexion

Il existe également un attribut appelé innerHTML. Ce n'est pas une spécification DOM. Mais tous les principaux navigateurs prennent en charge cet attribut. Ce qu'il renvoie est du code HTML.

bg.childNodes[1].innerHTML;// "first paragraph"

Copier après la connexion

Il n'y a pas de code html dans le premier paragraphe, donc le résultat est le même que textContent (innerText dans IE). Jetons un coup d'œil à la deuxième balise contenant du code HTML

bd.childNodes[3].innerHTML;//"<em>second</em> paragraph" 
 
bd.childNodes[3].textContent;//second paragraph

Copier après la connexion

Une autre façon d'obtenir le nœud de texte, puis d'obtenir l'attribut nodeValue, le code est le suivant

bd.childNodes[1].childNodes.length;//1 子节点个数 
 
bd.childNodes[1].childNodes[0].nodeName;// 节点名称 #text 
 
bd.childNodes[1].childNodes[0].nodeValue;//节点值 first paragraph

Copier après la connexion

快速访问DOM
通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中，文本节点是比较讨厌的。如果文本改变了，有可能就影响脚本了。还有如果DOM树足够的深入，那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是

getElementsByTagName()
getElementsByName()
getElementById()

Copier après la connexion

首先说下getElementsByTagName()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下

document.getElementsByTagName('p').length;//3

Copier après la connexion

因为返回的是个集合，我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。

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

Copier après la connexion

访问元素的属性，可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子

document.getElementsByTagName('p')[2].id;//closer

Copier après la connexion

要注意的是，class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。

document.getElementsByTagName('p')[0].className;//opener

Copier après la connexion

我们可以用如下方法访问页面所有元素

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

Copier après la connexion

注意：在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了，但是返回的是所有节点(node)，而不仅仅是元素节点(element nodes)。

Siblings, Body, First, Last Child
nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下

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

Copier après la connexion

body 用来访问body元素的。

document.body;//<body>

Copier après la connexion

firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。

遍历DOM
通过以上的学习，我们可以写个函数，用来遍历DOM

function walkDOM(n) { 
 do { 
  alert(n); 
  if (n.hasChildNodes()) { 
   walkDOM(n.firstChild) 
  }   
 } while (n = n.nextSibling) 
} 
 
walkDOM(document.body);//测试

Copier après la connexion

修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。

var my = document.getElementById('closer');

Copier après la connexion

非常容易更改这个元素的属性。我们可以更改innerHTML.

my.innerHTML = 'final';//final

Copier après la connexion

因为innerHTML可以写入html，所以我们来修改html。

my.innerHTML = '<em>my</em> final';//<em>my</em> fnal

Copier après la connexion

em标签已经成为dom树的一部分了。我们可以测试一下

my.firstChild;//<em> 
my.firstChild.firstChild;//my

Copier après la connexion

我们也可以通过nodeValue来改变值。

my.firstChild.firstChild.nodeValue = 'your';//your

Copier après la connexion

修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码

my.style.border = "1px solid red";

Copier après la connexion

CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推

my.style.fontWeight = 'bold';

Copier après la connexion

我们还可以修改其他的属性，无论这些属性是否被初始化。

my.align = "right"; 
my.name = 'myname'; 
my.id = 'further'; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">

Copier après la connexion

创建节点

为了创建一个新的节点，可以使用createElement和createTextNode.如果新建完成，可以用appendChild()把节点添加到DOM树中。
创建一个元素P，并把设置innerHTML属性

var myp = document.createElement('p'); 
myp.innerHTML = 'yet another';

Copier après la connexion

元素P建完成了，就可以随意修改添加属性了

myp.style.border = '2px dotted blue'

Copier après la connexion

接下来可以用appendChild把新的节点添加到DOM树中的。

document.body.appendChild(myp)

Copier après la connexion

使用DOM的方法
用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。

新建一个文本节点(yet another)
新建一个段落
把文本节点添加到段落中。
把段落添加到body中

// 创建p 
var myp = document.createElement('p'); 
// 创建一个文本节点 
var myt = document.createTextNode('one more paragraph') 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement('strong'); 
str.appendChild(document.createTextNode('bold')); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()

Copier après la connexion

另一种新建节点的方法是，我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制，包括他的子节点，false，仅仅复制自己。

首先获取要复制的元素。

var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>

Copier après la connexion

先不用深度复制。

document.body.appendChild(el.cloneNode(false))

Copier après la connexion

我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。

document.body.appendChild(document.createElement('p'));

Copier après la connexion

如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。

document.body.appendChild(el.cloneNode(true))

Copier après la connexion

insertBefore()
用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。

elementNode.insertBefore(new_node,existing_node)

Copier après la connexion

实例

document.body.insertBefore( 
 document.createTextNode('boo!'), 
 document.body.firstChild 
);

Copier après la connexion

意思就是新建一个文本节点，把它作为body元素的第一个节点。

删除节点

要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

Copier après la connexion

来看看下面代码，删除第二段

var myp = document.getElementsByTagName('p')[1]; 
var removed = document.body.removeChild(myp);

Copier après la connexion

removed节点就是删除的节点。以后还可以用这删除的节点。

我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下

<body> 
 <p class="opener">first paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

Copier après la connexion

我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p

var replaced = document.body.replaceChild(removed, p);

Copier après la connexion

和removeChild返回一样。replaced就是移除的节点。现在结果为

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <!-- and that's about it --> 
</body>

Copier après la connexion

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

1 Il y a quelques mois By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

1 Il y a quelques mois By DDD

R.E.P.O. Meilleurs paramètres graphiques

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

1 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7388

Tutoriel Java

1630

Tutoriel CakePHP

1357

Tutoriel Laravel

1267

Tutoriel PHP

1216

Afficher plus

Related knowledge

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

See all articles