Explication détaillée des opérations DOM en JavaScript

1. Qu'est-ce que DOM

JavaScript se compose de trois parties : ECMAScript, DOM et DOM représentent la méthode et l'interface pour décrire le contenu Web, c'est-à-dire. c'est-à-dire le modèle objet de document (Document Object Model). Sur une page Web, les objets qui organisent la page (ou le document) sont organisés dans une structure arborescente. Le modèle standard utilisé pour représenter les objets dans le document est appelé DOM, et la structure arborescente est ce que nous appelons souvent l'arborescence DOM.

L'introduction du DOM dans Wikipédia est plus précise : DOM est une interface de programmation d'applications multiplateforme et indépendante du langage qui traite les documents HTML, XHTML ou XML actuels sous la forme d'une arborescence, dans laquelle chaque nœud est un objet. , chaque nœud représente une partie du document.

2. Nœuds DOM

1. Types de nœuds

L'arborescence DOM est composée de nombreux types de nœuds différents, et ces types de nœuds ont une valeur nodeType Nous pouvons utiliser la valeur nodeType pour déterminer si ce que nous obtenons ou voulons est un nœud du type correspondant.

节点类型	元素节点(标签节点)	属性节点	文本节点(空格、换行、文字)	注释节点	document节点
nodeType值	1	2	3	8	9

En plus de juger le type via la valeur nodeType, nous pouvons également afficher les noms de nœuds d'éléments et d'attributs via nodeName, et utiliser nadeValue pour afficher les valeurs d'attribut des nœuds d'attribut.

2. Obtenez le nœud d'élément

document.getElementById(id);
document.getElementByTagName(tagname);
document.getElementByClassName(classname);

Habituellement, vous voulez Lors de la modification de ou de l'utilisation de nœuds d'élément dans HML en JavaScript, ils doivent être obtenus avant d'appeler. Ensuite, nous l'obtenons en définissant l'attribut Id ou l'attribut Class de l'élément, ou en utilisant le nom de la balise pour l'obtenir. . Mais sachez que la méthode getElementById() ne fonctionne pas en XML. Dans les documents XML, les recherches doivent être effectuées en ayant l'attribut id, et ce type doit être déclaré dans la DTD XML.

Après avoir obtenu le nœud que nous voulons, nous pouvons également faire fonctionner d'autres nœuds grâce à la relation des nœuds. Ici, nous prenons l'élément p comme nœud d'élément initial comme exemple.

　2.1 Nœuds enfants

p.children();
p.childNodes();

Obtenez les nœuds enfants sous p, tandis que p.children() ne peut obtenir que les nœuds enfants des nœuds d'élément, tandis que p.childNodes() obtiendra tous les types de nœuds enfants, ce qui signifie qu'il analysera les nœuds de texte vides.

　2.2 Nœud parent

p.parentNode();
p.offsetParent();

Récupère le nœud parent de p. p.offsetParent() obtient le nœud ancêtre avec l'attribut de positionnement, c'est-à-dire à partir du nœud parent, si le nœud parent If il n'y a pas d'attribut de positionnement, puis recherchez le nœud parent du nœud parent jusqu'à ce qu'un nœud avec un attribut de positionnement soit trouvé.

　2.3 Nœuds frères

//下一个兄弟节点 p.nextElementSibling();
p.nextSibling();//上一个兄弟节点 p.previousElementSibling();
p.previousSibling();

Qu'il y ait un élément ici est essentiel, tout comme pour obtenir des nœuds enfants, p.nextSibling() et p.previousSibling() analyseront les nœuds vides et. get Entrez l'espace ci-dessous p ou appuyez sur Entrée.

　2.4 Nœuds enfants tête et queue

//获取p的第一个子节点p.firstElementChild();
p.firstChild();//获取p的最后一个子节点p.lastElementChild();
p.lastElementChild();

La différence est la même que ci-dessus.

3. Opérations sur les nœuds

En plus d'ajouter et de supprimer des nœuds de modification en HTML, nous pouvons également opérer des nœuds en JavaScript.

　3.1 Créer un nœud

//创建节点/创建文本节点createElement();
createTextNode()；

La création de nœuds de texte est généralement utilisée pour ajouter du contenu aux nœuds d'éléments. Elle crée du texte statique et ne peut pas avoir un format HTML comme innerHTML, donc creatTextNode() est plus sûr, innerText a des problèmes de compatibilité avec le navigateur. encore.

　3.2 Ajouter un nœud

　Le nœud que nous créons ne sera pas automatiquement ajouté au HTML, nous devons faire fonctionner le nœud créé.

//向尾部添加子节点 appendChild(); 
//向目标节点之前添加insertBefore(newElement,targetElement);

Le deuxième paramètre de insertBefore() est un paramètre facultatif. Si vous n'écrivez pas le deuxième paramètre, il sera ajouté à la queue par défaut. est équivalent à appendChild() ;

　3.3 Remplacement

//将旧节点换为新节点replaceChild(newElement,oldElement);

p.replaceChild(newElement ,oldElement), qu'il s'agisse d'un nouveau nœud ou d'un ancien nœud, il doit s'agir d'un nœud enfant de p.

　3.4 Supprimer

removeChild();

Notez que les nœuds enfants sont supprimés.

　3.5 Clone/Copie

//深复制或浅复制cloneNode(boolean);

profond lorsque la valeur booléenne du paramètre est vraie La copie copiera le nœud lui-même et tous les nœuds enfants en dessous.

Lorsque la valeur booléenne du paramètre est fausse, il s'agit d'une copie superficielle, et seul le nœud lui-même sera copié.

　3.6 Déterminer s'il existe des nœuds enfants et renvoyer une valeur booléenne.

　

3.7 Propriétés

hasChildNode();

//获取节点属性getAttribute();//设置节点属性setAttribute();//删除节点属性removeAttribute();

 　要注意的一点就是class属性不能通过setAttribute(); 设置。

三、DOM的优缺点

　　DOM的优点主要表现在：易用性强，并且遍历简单，支持XPath，增强了易用性。

　　DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高。

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!