Bagaimana untuk menghuraikan JS untuk mendapatkan nod dan merangkumnya untuk keserasian

Artikel ini terutamanya memperkenalkan cara mendapatkan nod dan enkapsulasi keserasian dengan JS. Saya harap ia dapat membantu rakan-rakan perlukan!

Nod

Kandungan halaman web terdiri daripada teg (tidak betul sepenuhnya)
Kandungan halaman web terdiri daripada nod
Teks nod atribut nod elemen nod komen nod Nod dokumen
Nod tiga elemen

• Jenis nod: nodeType
• Nama nod: nodeName
• Nilai nod: nodeValue

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

Dapatkan nod induk

Dapatkan nod induk: Elemen anak.parentNode

Dapatkan elemen anak

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

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

Dapatkan induk Nod mestilah nod elemen (hanya elemen akan mempunyai nod anak)

Tambahkan elemen anak pada halaman (dalam elemen induk) Unsur induk.appendChild (elemen anak)

Dapatkan semua nod anak

		<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. Elemen adik beradik dan nod adik beradik

Dapatkan nod adik beradik

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

Dapatkan elemen:

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

Nod sebelumnya

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

Nod seterusnya

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

Dapatkan elemen adik beradik

Elemen sebelumnya

 console.log(box2.previousElementSibling);

Elemen seterusnya

console.log(box2.nextElementSibling);

IE8 tidak menyokong operasi mendapatkan elemen adik beradik, dan hasilnya tidak ditentukan, dan tiada alternatif dalam IE8
IE8 perlu mendapatkan elemen adik beradik sebelumnya melalui nod

Enkapsulasi elemen adik beradik

@param ele: Pekapsulan sasaran untuk ditemui
@return nod: Mengembalikan nod elemen

 	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. Dapatkan yang pertama nod anak dan Elemen anak

mendapat nod pertama dan elemen anak

mendapat nod anak pertama: elemen induk.firstChild
mendapat elemen anak pertama: Elemen induk.firstElementChild

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

IE8 tidak boleh melaksanakan operasi elemen

Dapatkan pakej keserasian elemen anak pertama

			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. Dapatkan nod anak terakhir dan elemen anak

Dapatkan nod anak terakhir dan elemen anak

Dapatkan nod anak terakhir: Elemen ibu bapa.lastChild
Dapatkan elemen anak terakhir: Elemen induk.lastElementChild

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

Dapatkan pakej keserasian elemen anak terakhir

        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 🎜>Nod klon:

Element.cloneNode(parameter)

Parameter: Apabila terdapat parameter:

Jika parameter itu benar, ia bermakna pengklonan dalam: Boleh mengklon teg ini dan Semua kandungan di dalam teg.
Jika parameter palsu, ini bermakna pengklonan cetek: hanya teg semasa boleh diklon dan kandungan dalam teg ini tidak akan diklon.
tidak mempunyai parameter dan lalai kepada palsu.

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

Nod yang diklon hanya akan diklon dalam ingatan dan tidak akan ditambahkan pada halaman Ia hanya boleh ditambah secara manual
Klon huibaid dan juga klon
Untuk mengekalkan keunikan id halaman, anda perlu mengubah suai id elemen klon

Sarung Taobao, sembunyikan kod QR

Newbox.id = "Newbox"

Cadangan berkaitan: [

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

Tutorial video JavaScript

]

Atas ialah kandungan terperinci Bagaimana untuk menghuraikan JS untuk mendapatkan nod dan merangkumnya untuk keserasian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!