Summary of common js dom node operation methods

This time I will bring you a summary of the common js dom node operation methods. What are the precautions for the common js dom node operation methods. The following is a practical case, let's take a look.

DOM meaning: DOM is the Document Object Model, a set of API interfaces based on browser programming, and a recommended standard issued by the W3C. It gives JS operation nodes Capability. When a web page is loaded, the browser creates the document object model of the page.

Nodes: According to the W3C's HTML DOM standard, all content in an HTML document is a node:

1. The entire document is a document node.
2. Each HTML element is an element node.
3. The text within the HTML element is a text node.
4. Each HTML attribute is an attribute node.
5. Each comment is a comment node.

So HTML DOM treats the HTML document as a tree structure, which is It is called a node tree. Through HTML DOM, all nodes in the node tree can be accessed through JS. All HTML elements (nodes) can be modified.

1. Create nodes, Append node

1, createElement (tag name) Create an element node (a specific element).
2, appendChild (node) Append a node.
3. createTextNode (node ​​text content)Create a text node

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向元素

2. Insert node

1, appendChild (node) is also a way to insert nodes. You can also add existing elements, which will move their elements from their original positions to new positions.
2, insertBefore (a, b) is a reference node, which means that node a will be inserted in front of node b.

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

3. Delete and remove Node

1, removeChild(node) Delete a node, used to remove and delete a parameter (node). The removed node returned by it is The removed node is still in the document, but its position is no longer in the document.

var removeChild = document.body.removeChild(p1);//移除document对象的方法p1

4. Replace the node

1,replaceChild (inserted node, replaced node) , used to replace nodes, accepts two parameters, the first parameter is the node to be inserted, the second is the node to be replaced. The returned Replaced node.

var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2

5. Find node

1, childNodes Contains children of text nodes and element nodes Node.

for (var i = 0; i <p style="text-align: left;">2, </p><p style="text-align: left;">A, <span style="color: #0000ff">children</span> can also obtain child nodes and are compatible with various browsers. Including IE6-8</p><p style="text-align: left;">B, <span style="color: #0000ff">parentNode</span>: Get the parent node </p><pre class="brush:php;toolbar:false">var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数

3,

A, firstChild ; firstElementChildFind the first child node. There is a browser compatibility issue: firstChild is IE compatible, firstElementChild is not IE compatible.

//查找第一个子节点的封装函数
function firstChild(ele) {
  if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.firstElementChild;
  } else {
    return ele.firstChild;
  }
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

B, lastChild ; lastElementChildFind the last child node. There is a browser compatibility issue: lastChild is IE compatible, and lastElementChild is not IE compatible.

//查找最后一个子节点的封装函数
function lastChild(ele) {
  if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

C, nextSibling ; nextElementSiblingFind the next sibling node. There are also compatibility issues.

//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.nextElementSibling;
  } else {
    return ele.nextSibling;
  }
}
nextSibling(oMid).style.background = 'red';

D、previousSibling ; previousElementSiblingFind the previous sibling node. There are also compatibility issues.

//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.previousElementSibling;
  } else {
    return ele.previousSibling;
  }
}
previousSibling(oMid).style.background = 'red';

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Scoped usage step analysis in Vue

Vue uses v-model steps in custom components Detailed explanation

The above is the detailed content of Summary of common js dom node operation methods. For more information, please follow other related articles on the PHP Chinese website!