So analysieren Sie JS, um Knoten zu erhalten und sie aus Kompatibilitätsgründen zu kapseln

Dieser Artikel stellt hauptsächlich vor, wie man Knoten und Kompatibilitätskapselung in JS erhält. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Knoten

Der Inhalt der Webseite besteht aus Tags (nicht ganz korrekt)
Der Inhalt der Webseite besteht aus Knoten
Elementknoten Attributknoten Textknoten Kommentarknoten Dokumentknoten
Drei Elemente des Knotens

• Knoten Typ: nodeType
• Knotenname: nodeName
• Knotenwert: nodeValue

			节点类型（nodeType）			节点名称（ nodeName）		节点值（nodeValue）
元素节点				1						标签名大写						null属性节点				2						属性名							属性值
文本节点				3						#text							文本
注释节点				8						#comment						注释内容
文档节点				9						#document						null

Übergeordneten Knoten abrufen

Übergeordneten Knoten abrufen:child element.parentNode

Untergeordnetes Element abrufen

		<div id = "box">
			<!--宫崎骏-->
			<div>千与千寻</div>
			<div id="box2">哈儿的移动城堡</div>
			龙猫
			<div>悬崖上的金鱼姬</div>
		</div>

var box2 = document.getElementById("box2");console.log(box2.parentNode);

Der erhaltene übergeordnete Knoten muss ein Element sein Knoten (nur Elemente werden untergeordnete Knoten haben)

Untergeordnete Elemente zur Seite hinzufügen (im übergeordneten Element)Übergeordnetes Element.appendChild(untergeordnetes Element)

Alle untergeordneten Knoten abrufen

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

Geschwisterknoten abrufen

<div id = "box">
			<!--宫崎骏-->
			<div>千与千寻</div>
			<div id="box2">哈儿的移动城堡</div>
			龙猫
			<div>悬崖上的金鱼姬</div>
		</div>

Elemente abrufen:

var box = document.getElementById("box");var box2 = document.getElementById("box2");

Vorheriger Knoten

console.log(box2.previousSibling);  // 文本节点

Nächster Knoten

console.log(box2.nextSibling);  // 文本节点

Geschwisterelemente abrufen

Vorheriges Element

 console.log(box2.previousElementSibling);

Nächstes. Element

console.log(box2.nextElementSibling);

IE8 unterstützt den Vorgang zum Abrufen von Geschwisterelementen nicht , und das Ergebnis ist undefiniert , und es gibt keine Alternative in IE8
IE8 möchte die Intelligenz des Geschwisterelements über den Knoten abrufen

Das Paket des vorherigen Geschwisterelements abrufen

@param ele: das Zielpaket, das gefunden werden muss
@return node: Gibt einen Elementknoten zurück

 	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. Holen Sie sich den ersten untergeordneten Knoten und das untergeordnete Element. Holen Sie sich den ersten untergeordneten Knoten und das untergeordnete Element element:

parent element.firstElementChild

var box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);

IE8 kann keine Operationen an Elementen ausführenHolen Sie sich das Kompatibilitätspaket des ersten untergeordneten Elements

			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. Holen Sie sich den letzten untergeordneten Knoten und das untergeordnete Element elementHolen Sie sich den letzten untergeordneten Knoten:

Parent element.lastChild

Holen Sie sich das letzte untergeordnete Element:

Parent element.lastElementChild

var box = document.getElementById("box");console.log(box.lastChild);console.log(box.lastElementChild);

Holen Sie sich das Kompatibilitätspaket des letzten untergeordneten Elements

        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. Klonen Sie den Knoten Clone Knoten:
Element.cloneNode (Parameter) Parameter:

Wenn Parameter vorhanden sind:

Wenn der Parameter wahr ist, bedeutet dies tiefes Klonen: Dieses Tag und der gesamte Inhalt im Tag können geklont werden.

Wenn der Parameter falsch ist, bedeutet dies flaches Klonen: Nur das aktuelle Tag kann geklont werden und der Inhalt in diesem Tag wird nicht geklont.

• Keine Parameter, der Standardwert ist falsch.

  <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);

• Der geklonte Knoten klont nur eine Kopie im Speicher und wird nicht zur Seite hinzugefügt. Er kann nur manuell hinzugefügt werden

Klon-Huibaid wird ebenfalls geklont

• Um die Einzigartigkeit beizubehalten der Seiten-ID muss der Klon geändert werden Element-ID

  Newbox.id = "Newbox"

  Taobao-Fall, versteckter QR-Code

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

• Verwandte Empfehlungen: [

  JavaScript-Video-Tutorial

  ]

Das obige ist der detaillierte Inhalt vonSo analysieren Sie JS, um Knoten zu erhalten und sie aus Kompatibilitätsgründen zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!