正文

JavaScript中获取节点值的方法多样，以下是一些常见场景下的获取方式：

/0 浏览量
0716

在Web开发中，JavaScript是操作网页内容的重要工具。其中，获取DOM（文档对象模型）节点的值是一个基本且频繁的操作。以下是一些常见场景下获取节点值的方法。

1. 使用.value属性

对于表单元素（如<input>、<textarea>、<select>），可以直接使用.value属性来获取其值。

// 获取input元素的值
var inputVal = document.getElementById('myInput').value;

// 获取textarea元素的值
var textareaVal = document.getElementById('myTextarea').value;

// 获取select元素的值
var selectVal = document.getElementById('mySelect').value;

2. 使用.innerText属性

.innerText属性可以获取元素内部的文本内容，包括子元素的内容。

// 获取div元素的文本内容
var divText = document.getElementById('myDiv').innerText;

注意：.innerText会移除所有HTML标签，只保留文本内容。

3. 使用.textContent属性

.textContent属性与.innerText类似，但.textContent不会移除HTML标签。

// 获取div元素的文本内容，包括HTML标签
var divText = document.getElementById('myDiv').textContent;

4. 使用.innerHTML属性

.innerHTML属性可以获取元素内部的HTML内容。

// 获取div元素的HTML内容
var divHtml = document.getElementById('myDiv').innerHTML;

5. 使用.getAttribute()方法

对于任何元素，都可以使用.getAttribute()方法来获取属性值。

// 获取input元素的type属性值
var typeVal = document.getElementById('myInput').getAttribute('type');

6. 使用querySelector()和querySelectorAll()方法

这两个方法可以用来选择多个元素，并获取它们的值。

// 获取第一个input元素的值
var inputVal = document.querySelector('input').value;

// 获取所有input元素的值
var inputVals = document.querySelectorAll('input').map(function(input) {
  return input.value;
});

7. 使用FormData对象

当需要获取表单数据时，可以使用FormData对象。

// 创建FormData对象
var formData = new FormData(document.getElementById('myForm'));

// 获取表单中的所有值
var values = Array.from(formData.entries());

// 获取指定字段的值
var username = formData.get('username');

总结

在JavaScript中，有多种方法可以获取节点值。选择合适的方法取决于具体的需求和场景。希望本文能帮助你更好地理解和应用这些方法。

-- 展开阅读全文 --