How to parse JS to obtain nodes and encapsulate them for compatibility-JS Tutorial-php.cn

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

藏色散人

Release： 2022-08-06 17:18:30

forward

1948 people have browsed it

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

Copy after login

Get parent node

Get parent node:Child element.parentNode

Get child element

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

Copy after login

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

Copy after login

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>

Copy after login

1.Brother elements and sibling nodes

Get sibling nodes

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

Copy after login

Get element:

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

Copy after login

Previous node

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

Copy after login

Next Node

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

Copy after login

Get sibling elements

Previous element

 console.log(box2.previousElementSibling);

Copy after login

Next element

console.log(box2.nextElementSibling);

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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>我是标题</h1>
 </div>

Copy after login

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

Copy after login

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"

Copy after login

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>

Copy after login

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!