Maison > Article > interface Web > Comment analyser JS pour obtenir des nœuds et les encapsuler pour des raisons de compatibilité
Comment analyser JS pour obtenir des nœuds et les encapsuler pour des raisons de compatibilité
- 藏色散人avant
- 2022-08-06 17:18:301940parcourir
Cet article présente principalement comment obtenir des nœuds et une encapsulation de compatibilité dans JS. J'espère qu'il sera utile aux amis dans le besoin !
Nœud
Le contenu de la page Web est composé de balises (pas tout à fait correct)
Le contenu de la page Web est composé de nœuds
Nœud d'élément Nœud d'attribut Nœud de texte Nœud de commentaire Nœud de document
Trois éléments de nœud
- Nœud type: nodeType
- Nom du nœud: nodeName
- Valeur du nœud: nodeValue
节点类型（nodeType） 节点名称（ nodeName） 节点值（nodeValue） 元素节点 1 标签名大写 null属性节点 2 属性名 属性值 文本节点 3 #text 文本 注释节点 8 #comment 注释内容 文档节点 9 #document null
Obtenir le nœud parent
Obtenir le nœud parent:élément enfant.parentNode
Obtenir l'élément enfant
<div id = "box"> <!--宫崎骏--> <div>千与千寻</div> <div id="box2">哈儿的移动城堡</div> 龙猫 <div>悬崖上的金鱼姬</div> </div>
var box2 = document.getElementById("box2");console.log(box2.parentNode);
Le nœud parent obtenu doit être un élément node (seuls les éléments sont Il y aura des nœuds enfants)
Ajouter des éléments enfants à la page (dans l'élément parent)Élément parent.appendChild (élément enfant)
Obtenir tous les nœuds enfants
<div id="box" style="width: 100px; height: 100px;">
<div id="box1" style="background-color: lightblue;">千与千寻</div>
<div id="box2">哈尔的移动城堡</div>
</div>
<script type="text/javascript">
var box = document.getElementById("box")
console.log(box.chilNodes);
</script>1. nodes
Obtenir les nœuds frères et sœurs
<div id = "box"> <!--宫崎骏--> <div>千与千寻</div> <div id="box2">哈儿的移动城堡</div> 龙猫 <div>悬崖上的金鱼姬</div> </div>
Obtenir des éléments :
var box = document.getElementById("box");var box2 = document.getElementById("box2");
Nœud précédent
console.log(box2.previousSibling); // 文本节点
Nœud suivant
console.log(box2.nextSibling); // 文本节点
Obtenir des éléments frères et sœurs
Élément précédent
console.log(box2.previousElementSibling);
Élément suivant
console.log(box2.nextElementSibling);
IE8 ne prend pas en charge l'opération d'obtention d'éléments frères et sœurs , et le résultat n'est pas défini, et il n'y a pas d'alternative dans IE8
IE8 veut obtenir l'intelligence de l'élément frère via le nœud
Obtenir le package de l'élément frère précédent
@param ele : le package cible qui doit être trouvé
@return node : renvoie un nœud d'élément
function getPreviousElement(ele) {
// 能力检测
if(ele.previousElementSibling) { // 谷歌火狐
return ele.previousElementSibling;
} else { // IE8
// 获取上一个节点 : null 元素 文本 注释
var node = ele.previousSibling;
// 循环次数不确定
// 1. node必须存在, 不是null, 2. node不是元素节点
while(node != null && node.nodeType != 1) {
node = node.previousSibling }
// node == null 或者 node.nodeType == 1
return node;
}
}
console.log(getPreviousElement(li2));
2. Obtenez le premier nœud enfant et l'élément enfant
Obtenez le premier nœud et l'élément enfant
Obtenez le premier nœud enfant :élément parent.firstChild
Obtenez le premier enfant. element:parent element.firstElementChild
var box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);
IE8 ne peut pas effectuer d'opérations sur les éléments
Obtenir le package de compatibilité du premier élément enfant
function getFirstElementChild(ele) {
if (ele.firstElementChild != undefined) {
return ele.firstElementChild;
} else {
var nodeFirst = ele.firstChild;
while (nodeFirst && nodeFirst.nodeType == 1) {
nodeFirst = nodeFirst.nextSibling;
}
return nodeFirst;
}
}
console.log(ul.firstElementChild);
3 Obtenir le dernier nœud enfant et l'élément enfant
Obtenir le dernier nœud enfant et l'enfant. element
Obtenir le dernier nœud enfant : Parent element.lastChild
Obtenir le dernier élément enfant : Parent element.lastElementChild
var box = document.getElementById("box");console.log(box.lastChild);console.log(box.lastElementChild);
Obtenir le package de compatibilité du dernier élément enfant
function firstElement(ele) {
if (ele.firstElementChild) {//谷歌和火狐
return ele.firstElementChild;
}
else {//IE8
var node = ele.firstChild;
while (node != null && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
console.log(firstElement(ul))
4. Cloner le nœud
Clone node : Element.cloneNode (paramètre)
Paramètres :
Lorsqu'il y a des paramètres :
Si le paramètre est vrai, cela signifie un clonage profond : Cette balise et tout le contenu de la balise peuvent être clonés.
Si le paramètre est faux, cela signifie un clonage superficiel : seule la balise actuelle peut être clonée, et le contenu de cette balise ne sera pas cloné.
Aucun paramètre, la valeur par défaut est false.
<div id="box">
I'm a big box
<h1>我是标题</h1>
</div>var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);
Le nœud cloné ne clonera qu'une seule copie dans la mémoire et ne sera pas ajouté à la page. Il ne peut être ajouté que manuellement
Clone huibaid est également cloné
Afin de conserver l'unicité. de l'ID de la page, le clone doit être modifié. ID de l'élément
Newbox.id = "Newbox"
Cas Taobao, code QR caché
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>关闭二维码</title>
<style type="text/css">
#box{
width: 94px;
height: 92px;
margin: 30px auto;
position: relative;
}
#x{
width: 14px;
height: 14px;
line-height: 14px;
border: 1px solid #D9D9D9;
color: #D6D6D6;
text-align: center;
position: absolute;
top: 0;
left: -15px;
}
#img{
width: 76px;
height: 90px;
background-image: url(img/erweima.png);
}
</style>
</head>
<body>
<div id="box">
<div id="x">x</div>
<div id="img"></div>
</div>
<script type="text/javascript">
var x = document.getElementById("x")
x.onclick = function(){
this.parentNode.style.display = 'none';
}
</script>
</body>
</html>Recommandations associées : [Tutoriel vidéo JavaScript]
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!