How to parse JS to obtain nodes and encapsulate them for compatibility

This article mainly introduces how to obtain nodes and compatibility encapsulation in JS. I hope it will be helpful to friends in need!

Node

The content of the web page is composed of tags (not entirely correct)
The content of the web page is composed of nodes
Element node attribute node text node comment node Document node
Three elements of node

• Node type: nodeType
• Node name: nodeName
• Node value: nodeValue

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

Get parent node

Get parent node:Child element.parentNode

Get child element

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

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

The parent node obtained must be an element node (only The element will have child nodes)

Add child elements to the page (in the parent element)Parent element.appendChild(child element)

Get all child nodes

		<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.Brother elements and sibling nodes

Get sibling nodes

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

Get element:

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

Previous node

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

Next Node

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

Get sibling elements

Previous element

 console.log(box2.previousElementSibling);

Next element

console.log(box2.nextElementSibling);

IE8 does not support the operation of getting sibling elements, and the result is undefined , and there is no alternative in IE8
IE8 wants to obtain the sibling element intelligence through the node

Get the package of the previous sibling element

@param ele: the target package to be found
@return node: Returns an element node

 	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. Get the first child node and child element

Get the first node and child element

Get the first Child node: Parent element.firstChild
Get the first child element: Parent element.firstElementChild

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

IE8 cannot perform the operation of the element

Get the compatibility package of the first child element

			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. Get the last child node and child element

Get the last child node and child element

Get the last A child node: Parent element.lastChild
Get the last child element: Parent element.lastElementChild

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

Get the compatibility package of the last child element

        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. Clone node

Clone node: Element.cloneNode(parameter)
Parameter:
When there are parameters:

• If the parameter is true, it means deep cloning: This tag and all the content in the tag can be cloned.

• If the parameter is false, it means shallow cloning: only the current tag can be cloned, and the content in this tag will not be cloned.

No parameters, default is false.

<div id="box"> 
    I&#39;m a big box
      <h1 id="我是标题">我是标题</h1>
 </div>

var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);

• The cloned node will only be cloned in the memory and will not be added to the page. It can only be added manually

• Clone huibaid will also be cloned In the past

In order to maintain the uniqueness of the page id, it was necessary to modify the id of the cloned element

Newbox.id = "Newbox"

Taobao case, hiding the 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>

Related recommendations :【JavaScript Video Tutorial】

The above is the detailed content of How to parse JS to obtain nodes and encapsulate them for compatibility. For more information, please follow other related articles on the PHP Chinese website!