HTML | DOM 选择值属性

HTML文档是由标签和属性构成的，在JavaScript中可以通过DOM（文档对象模型）来操作HTML文档的节点，其中包括获取、设置节点的值属性（value attribute）。值属性是用来存储节点的值，比如input标签的value属性存储了用户输入的值。本文将介绍如何使用DOM来选择、获取和设置值属性。

选择节点

要选择节点，需要使用DOM的选择器（selector）。DOM提供了多种选择器，包括：

• getElementById：通过id属性选择一个节点
• getElementsByTagName：通过标签名选择一组节点
• getElementsByClassName：通过类名选择一组节点
• querySelector：通过CSS选择器选择一个节点
• querySelectorAll：通过CSS选择器选择一组节点

以获取一个input标签节点为例，可以使用以下代码：

var inputNode = document.getElementById("inputId");
var inputNodeList = document.getElementsByTagName("input");
var inputNodeList2 = document.querySelectorAll("input");

以上代码分别使用了getElementById、getElementsByTagName和querySelectorAll三种选择器来选择input节点。其中getElementById只会返回一个节点，而getElementsByTagName和querySelectorAll会返回一组节点。

获取和设置值属性

获取和设置值属性都是通过节点的value属性来实现的。需要注意的是，只有表单元素（如input、textarea等）才有value属性。

获取一个节点的value属性可以使用以下代码：

var inputValue = inputNode.value;

以上代码获取了inputNode节点的value属性值，并将其赋值给了inputValue变量。

设置一个节点的value属性也很简单，只需要将其赋值即可：

inputNode.value = "new value";

以上代码将inputNode节点的value属性值设置为了"new value"。

总结

本文介绍了DOM选择器的使用方法，以及如何获取和设置节点的值属性。当我们需要操作表单元素的值时，就可以选择器选择节点，然后通过节点的value属性来获取或设置其值。希望本文对各位程序员有所帮助。