Comment analyser JS pour obtenir des nœuds et les encapsuler pour des raisons de compatibilité

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&#39;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 = &#39;none&#39;;
			}
		</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!