Maison > Article > interface Web > Résumé des méthodes courantes de fonctionnement des nœuds dom js

Résumé des méthodes courantes de fonctionnement des nœuds dom js

php中世界最好的语言original: 2018-05-21 14:58:402311parcourir

Cette fois, je vais vous apporter un résumé des méthodes courantes de fonctionnement des nœuds dom js. Quelles sont les précautions qui résument les méthodes courantes de fonctionnement des nœuds dom js. Voici des cas pratiques, jetons un coup d'œil.

Signification DOM : DOM est le modèle d'objet de document, un ensemble d'interfaces API basées sur la programmation du navigateur et une norme recommandée émise par le W3C. Il donne la capacité aux nœuds d'opération JS lorsqu'un. la page Web est chargée, le navigateur crée le modèle objet de document de la page :

Selon la norme HTML DOM du W3C, tout le contenu d'un document HTML est un nœud :

1 Le document entier est un nœud de document. . 2. Chaque

élément HTML

est un nœud d'élément
3. Le texte à l'intérieur de l'élément HTML est un nœud de texte >4. Nœud d'attribut.5.Chaque commentaire est un nœud de commentaire.Par conséquent, le DOM HTML traite le document HTML comme une structure arborescente.Grâce à HTML DOM, tous les nœuds de l'arborescence des nœuds sont accessibles. JS.

1. Créer des nœuds

Créer un nœud d'élément (un élément spécifique). >2,

Ajouter un nœud. Créez un nœud de texte

2. Insérez un nœud

createElement（标签名）
appendChild（节点）1. est également un moyen d'insérer un nœud. L'ajout d'un élément existant déplacera son élément de sa position d'origine vers la nouvelle position
2 et createTextNode（节点文本内容） sont des nœuds de référence, ce qui signifie que le nœud a sera inséré devant le nœud. b. 🎜>

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素

3. Supprimer et supprimer le nœud

1 Supprimer un nœud, qui est utilisé pour supprimer un paramètre (nœud) qu'il renvoie. Le nœud supprimé est toujours dans le document, mais sa position n'est plus dans le document. 4. Remplacez le nœud

1, appendChild（节点）, utilisé pour remplacer des nœuds, en accepte deux. paramètres, le premier paramètre est le nœud à insérer et le deuxième paramètre est le nœud à remplacer
insertBefore（a,b）

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

5. 🎜>1. childNodes contient des nœuds enfants de nœuds de texte et des nœuds d'éléments 🎜>

removeChild(节点)A,

children

var removeChild = document.body.removeChild(p1);//移除document对象的方法p1

peuvent. obtiennent également des nœuds enfants et sont compatibles avec divers navigateurs, notamment IE6-8

B, parentNode : obtenez le nœud parent

3, replaceChild(插入的节点，被替换的节点)

var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2

firstChild

; firstElementChild pour trouver le premier nœud enfant. Il y a un problème de compatibilité avec le navigateur : firstChild est compatible avec IE, firstElementChild n'est pas compatible avec IE. .

B, lastChild

;

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

lastElementChild

trouve le dernier nœud enfant. Il existe un

problème de compatibilité avec le navigateur

: lastChild est compatible avec IE et lastElementChild n'est pas compatible avec IE.

nextSibling ; nextElementSibling

trouve le nœud frère suivant. Il existe également des

var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数

problèmes de compatibilité

D, previousSibling ; previousElementSibling trouve le nœud frère précédent. Il existe également des problèmes de compatibilité

//查找第一个子节点的封装函数
function firstChild(ele) {
  if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.firstElementChild;
  } else {
    return ele.firstChild;
  }
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée : Analyse des étapes utilisant scoped dans Vue

//查找最后一个子节点的封装函数
function lastChild(ele) {
  if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

Vue utilise les étapes du modèle V dans les composants personnalisés Détaillé explication

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 des étapes de mise en œuvre de la fonction ajax encapsulée jsArticle suivant：Explication détaillée des étapes de mise en œuvre de la fonction ajax encapsulée js

Articles Liés

Voir plus