How to assign values ​​to nodes in JavaScript

JavaScript is an important language in modern Web development and can implement many functions, among which the operation of DOM is the most common one. In actual development, assigning values ​​to nodes (that is, elements on HTML) is a common operation. The following will introduce in detail how to assign values ​​to nodes in JavaScript.

1. Get the node

Before assigning a value to the node, you first need to get the node. Commonly used methods to obtain nodes are as follows:

1. Get nodes by ID

We can obtain the node with the specified ID through the getElementById method, for example:

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

Among them, "id_name" is the ID attribute value of the HTML element.

2. Get nodes by tag name

We can get all nodes with the specified tag name through the getElementsByTagName method, for example:

var nodes = document.getElementsByTagName("div");

3. Pass Class name acquisition node

We can obtain all nodes with the specified class name through the getElementsByClassName method, for example:

var nodes = document.getElementsByClassName("class_name");

where "class_name" is the class attribute value of the HTML element.

4. Getting nodes through CSS selectors

We can get all the first nodes that match the CSS selector through the querySelector method, for example:

var node = document.querySelector("#id_name .class_name");

Among them, "#id_name" is the ID attribute value of the HTML element, and ".class_name" is the class attribute value of the element.

2. Assign values ​​to nodes

After obtaining the nodes, you can assign values ​​to them. Common assignment methods include the following:

1. Modify the innerHTML of the node

We can change the content of the node by modifying the innerHTML attribute of the node, for example:

node.innerHTML = "新的节点内容";

It should be noted that modifying the innerHTML attribute will remove all child nodes in the original node and replace them with new HTML content. If you need to add content to the node instead of replacing it, you can use the appendChild method.

2. Modify the textContent of the node

We can change the text content of the node by modifying the textContent attribute of the node, for example:

node.textContent = "新的文本内容";

It should be noted that , modifying the textContent attribute will remove all child nodes in the original node and replace them with new text content.

3. Modify the value of the node

For form elements (such as input, textarea, etc.), we can change the value by modifying the value attribute of the node, for example:

node.value = "新的表单值";

It should be noted that modifying the value attribute is only effective for form elements and not for other nodes.

4. Modify the attribute value of the node

Since HTML elements can have custom attributes, we can modify its value by setting the attribute of the node, for example:

node.setAttribute("attr_name", "新的属性值");

Among them, "attr_name" is the name of the custom attribute, such as data-xxx. "New attribute value" is the new attribute value that needs to be set.

It should be noted that nodes have many attributes to set, such as style, class, etc. You can set different attributes as needed.

The above are common methods for assigning values ​​to nodes in JavaScript. In actual development, how to quickly and accurately obtain nodes and assign values ​​to them is also a very important skill.

The above is the detailed content of How to assign values ​​to nodes in JavaScript. For more information, please follow other related articles on the PHP Chinese website!