JS adds, deletes, modifies and checks DOM nodes

This time I will bring you JS to add, delete, modify and check DOM nodes. What are the things to note when JS adds, deletes, modifies and checks DOM nodes? 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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var op = document.createElement(&quot;p&quot;);//创建一个p元素，因为是document对象的方法。 var opText = document.createTextNode(&quot;666&quot;);//创建一个文本节点内容是“666”，因为是document对象的方法。 op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666” document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向&lt;body&gt;元素 document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向&lt;html&gt;元素</pre><div class="contentsignin">Copy after login</div></div>

2. Insert node1,

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. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var op = document.createElement(&quot;p&quot;);//创建一个p元素，因为是document对象的方法。 var op1 = document.getElementById(&quot;p1&quot;); document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾</pre><div class="contentsignin">Copy after login</div></div>

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.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var removeChild = document.body.removeChild(p1);//移除document对象的方法p1</pre><div class="contentsignin">Copy after login</div></div>

4. Replace the node1,

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. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2</pre><div class="contentsignin">Copy after login</div></div>

5. Find node1,

childNodes

Contains children of text nodes and element nodes Node.

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

2,

A,

children

can also obtain child nodes and are compatible with various browsers. Including IE6-8B,

parentNode

: Get the parent node

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

What are the commonly used mathematical functions in JS?

How to operate vue to enable v-model in a custom component

The above is the detailed content of JS adds, deletes, modifies and checks DOM nodes. For more information, please follow other related articles on the PHP Chinese website!