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

  
千与千寻
 
哈儿的移动城堡
 龙猫 
悬崖上的金鱼姬
 

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

 
千与千寻
 
哈尔的移动城堡
 
 

1.Brother elements and sibling nodes

Get sibling nodes

  
千与千寻
 
哈儿的移动城堡
 龙猫 
悬崖上的金鱼姬
 

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.

 I'm a big box 
我是标题
 

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

      
  
 
x
 
 
   

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!