Detailed explanation of common addition, deletion, modification and query operations of JS DOM elements

This time I will bring you a detailed explanation of the common addition, deletion, modification and query operations of JS DOM elements. What are theprecautionsfor the common addition, deletion, modification and query operations of JS DOM elements. The following is a practical case, let's take a look.

DOM concept

DOM (Document Object Model): Document Object Model.

You can view it through the Elements tab of the developer tool

You can also observe that the entire document has a series of nodes through the Sources tab of the developer tool

The entire document is composed of A tree composed of a series of node objects.

Node (Node) includes element node (1), attribute node (2), text node (3) (1..2..3..represents the node type)_

var th1= document.getElementById("th1"); alert(th1.nodeType); alert(th1.nodeName); alert(th1.nodeValue);

th1 represents an element node (nodeType=1), nodeName is the label name (th), and nodeValue=null of the element node.

var attr1=th1.getAttributeNode("name"); alert(attr1.nodeType); alert(attr1.nodeName); alert(attr1.nodeValue);

The getAttributeNode method is to get the attribute node of the element. At this time, the output node type is the attribute node (2), the node name is the attribute name (name), and the node value is the attribute value (sex)

var txtl = th1.firstChild； alert(txtl.nodeType); alert(txtl.nodeName); alert(txtl.nodeValue)

txt1 is a text node (3), the node name is fixed to #text, and the node value is the text content.

Get the element

(1)getElementByid

Get the element based on the id attribute of the element. What you get is a element.

(2)getElementsByTagName

Get elements based on the tag name, and the result is a collection of elements.

(3)getElementsByClassName

Get elements based on the class attribute, and the result is a collection of elements.

(4)getElementsByName

Get elements based on the name attribute, and the result is a collection of elements.

Summary:Obtaining elements can be obtained based on the tag name, or based on the id, name, and class attributes. The result obtained based on the id attribute is an element, while the other results are a collection.

The document object supports the above four types, while the element object only supportsgetElementsByTagNameandgetElementsByClassName.

Modify elements

(1) Modify content

function fun(){ //获取到指定元素 var p1 = document.getElementById("p1"); p1.innerText = "我被单击了！"; }

The content text of the label can be read or set through the .innerText property

function fun(){ //获取到指定元素 var p1 = document.getElementById("p1"); p1.innerHTML = "我被单击了！
换行了"; }

You can also get or set the content text through innerHTML attributes

The difference between the two: innerHTML will parse the text according to HTML rules, while innerText will just treat it as ordinary text content.

(1) Modify style

A. xxx． style.Attribute name="value"

B. xxx． classname="..." (equivalent to modifying the attributes of class)

 
  
修改样式测试
     

Add and delete elements

(1)CreateElementCreate an element node

CreateElement("p")Create a paragraph

(2)createTextNodeCreate a text node

createTextNode("Text Content"), create a text node with a value of "Text Content".

(3)appendChildAdd child node

(4 )removeChildDelete child node

Dynamic addition

Dynamic deletion

 
 
第1段落 
 
第2段落 
 
第3段落 
 
第4段落 
 
    

This method The method is to find the parent node and the node to be deleted respectively, and then perform the deletion operation. A prerequisite for this method is to know who the parent node is

So if you don’t know who the parent node is, how to delete it

p2.parentNode.removeChild(p2);

This method does not require who the parent node is.

Dynamic addition and deletion:

Dynamic addition and dynamic deletion, deletion dynamic addition Odd paragraphs

思路1：获取p1 下的所以段落，遍历所以的段落，将序号为奇数的段落删除。

function del(){ var p1 = document.getElementById("p1"); var paras = p1.getElementsByTagName("p"); for(var i in paras){ if((i+1)%2 == 1){ p1.removeChild(paras[i]); } } }

这种在初始时是可以的,但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判

思路2：添加通过设置class属性，然后通过getElementsByclassName来获取奇数行

（也可以从后往前删）

导航

Document：是根节点

ParentNode：获取父节点

childNodes：获取所有子节点

firstChild：第一个子节点

lastChlid：获取最后一个子节点

  
 
第一段第一句第二句
 
       

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS保留一位数字后移除非数字

node puppeteer实现网站登录步骤详解（附代码）

The above is the detailed content of Detailed explanation of common addition, deletion, modification and query operations of JS DOM elements. For more information, please follow other related articles on the PHP Chinese website!