How to modify DOM nodes using JavaScript

With the development of web applications, JavaScript has become an integral part. JavaScript can be used to modify web content and achieve dynamic effects. Among them, modifying the DOM is a very important part because it is the key to interacting with the web page.

What is DOM?
DOM is the Document Object Model, which is a tree structure representation of an HTML document. In this document, each HTML element is a node, such as: , ,

, etc. These nodes can have child nodes and attributes. For example, the node

can contain child nodes , and it can also have attributes, such as class, id, etc. JavaScript changes the content of the web page by manipulating these nodes.

How to select nodes?
To manipulate the DOM, we need to select nodes. This can be achieved in a variety of ways, mainly the following methods:

1. Select nodes by id

Use the document.getElementById() method to select nodes based on the specified id Select a node. As shown below:

var myNode = document.getElementById("myNode");

The above code will select an HTML element with id="myNode".

2. Select nodes by class

To select one or more nodes with the same class attribute, you can use the getElementsByClassName() method. As shown below:

var myNodes = document.getElementsByClassName("classNode");

The above code will select all HTML elements whose class attribute is equal to "classNode".

3. Select nodes by tag name

To select all nodes with specified tag names, you can use the getElementsByTagName() method. As shown below:

var myNodes = document.getElementsByTagName("p");

The above code will select all

tags in the document.

Operation of DOM node attributes
DOM nodes have many attributes, such as: id, class, title, etc. We can modify or get the values ​​of these properties through JavaScript. The following are some commonly used DOM node attribute manipulation methods:

1. Get or set the innerHTML attribute

You can use the getInnerHTML() method to get the innerHTML attribute of the node. You can also use the setInnerHTML() method to set the innerHTML property of a node. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";

2. Get or set the innerText property

Get the innerText property using the getInnerText() method, and set the innerText property using the setInnerText() method. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";

3. Get or set the nodeType attribute

The nodeType attribute returns the type of the current node. You can use the getNodeType() method to get the nodeType attribute of the node. You can also use the setNodeType() method to set the nodeType attribute of a node. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;

4. Get or set the nodeName attribute

The nodeName attribute returns the name of the node. You can use the getnodeName() method to get the nodeName attribute of the node. You can also use the setnodeName() method to set the nodeName attribute of a node. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";

5. Get or set the nodeValue property

The nodeValue property returns or sets the value of the node. The nodeValue property can be obtained using the getNodeValue() method. To set the property value, use the setNodeValue() method. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";

6. Get or set the className attribute

The className attribute returns or sets the class name of the node. The className attribute can be obtained using the getclassName() method. To set the attribute value you can use the setclassName() method. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";

7. Get or set the id attribute

The id attribute returns or sets the id of the node. The id attribute can be obtained using the getId() method. To set the attribute value you can use the setId() method. As shown below:

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

Creation and insertion of DOM nodes
In addition to modifying DOM node attributes, DOM nodes can also be created and inserted into the existing DOM structure.

Create DOM node
To create a DOM node, you can use the createElement() method. As shown below:

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);

Insert DOM node
There are the following points to insert DOM node:

1. Insert parent node
   Use the appendChild() method to add elements to the end of the parent node. As shown below:

var parent = document.getElementById("parent");

// 创建新的 <li> 元素
var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到父节点的末尾
parent.appendChild(newNode);

2. Insert sibling node
   Use the insertBefore() method to insert a new node before another node. As shown below:

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);

3. Replace Node
   Use the replaceChild() method to replace a node. As shown below:

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);

Removal of DOM nodes
DOM nodes can be removed in a variety of ways. The following are some commonly used methods:

1. Remove child nodes
   Use the removeChild() method to remove a child node. As shown below:

var parent = document.getElementById("parent");

// 移除 "node" 元素
parent.removeChild(node);

2. Remove itself
   Use the remove() method to remove the node itself. As shown below:

var node = document.getElementById("node");

// 移除节点本身
node.remove();

Summary
By using JavaScript to manipulate the DOM, web page content, including HTML tags and text content, can be easily modified. We can select nodes, change node properties, create and insert new elements, and delete existing nodes. These operations allow the website to dynamically update and respond to user behavior.

The above is the detailed content of How to modify DOM nodes using JavaScript. For more information, please follow other related articles on the PHP Chinese website!