Detailed explanation of the steps to add, delete and modify JavaScript DOM elements-JS Tutorial-php.cn

This time I will bring youJavaScriptA detailed explanation of the steps for adding, deleting, and modifying DOM elements. What are theprecautions for adding, deleting, and modifying JavaScript 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);

Copy after login

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

Copy after login

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)

Copy after login

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 supports

getElementsByTagNameandgetElementsByClassName.

Modify elements

(1) Modify content

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

Copy after login

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

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

Copy after login

You can also get or set the content text through inner

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

修改样式测试

Copy after login

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

Copy after login

Dynamic deletion

第1段落

第2段落

第3段落

第4段落

Copy after login

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:

动态添加和动态删除，删除动态添加的奇数段落

思路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]); } } }

Copy after login

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

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

（也可以从后往前删）

Copy after login

导航

Document：是根节点

ParentNode：获取父节点

childNodes：获取所有子节点

firstChild：第一个子节点

lastChlid：获取最后一个子节点

第一段第一句第二句