javascript 获取元素值-CFANZ编程社区

JavaScript 获取元素值

在 JavaScript 中，获取元素值是一项常见的操作。无论是从表单中获取用户输入的值，还是从 DOM 中获取特定元素的内容，都需要使用到 JavaScript 来实现。

获取表单元素的值

要获取表单元素的值，可以使用以下几种方式。

使用 `getElementById` 方法

getElementById 方法可以通过元素的 id 属性来获取元素对象。

// HTML 代码
<input type="text" id="name" />

// JavaScript 代码
var nameInput = document.getElementById("name");
var nameValue = nameInput.value;

在上述代码中，首先通过 getElementById 方法获取到 id 为 name 的输入框元素对象 nameInput，然后通过 value 属性获取到输入框的值 nameValue。

使用 `querySelector` 方法

querySelector 方法可以通过 CSS 选择器来获取元素对象。

// HTML 代码
<input type="text" id="name" />

// JavaScript 代码
var nameInput = document.querySelector("#name");
var nameValue = nameInput.value;

在上述代码中，通过 querySelector 方法选择 id 为 name 的输入框元素对象，并且通过 value 属性获取到输入框的值。

使用 `getElementsByName` 方法

getElementsByName 方法可以通过元素的 name 属性来获取元素对象。注意，该方法返回的是一个元素对象的集合。

// HTML 代码
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

// JavaScript 代码
var genderInputs = document.getElementsByName("gender");
var selectedGenderValue;
for (var i = 0; i < genderInputs.length; i++) {
  if (genderInputs[i].checked) {
    selectedGenderValue = genderInputs[i].value;
  }
}

在上述代码中，通过 getElementsByName 方法选择 name 为 gender 的输入框元素对象集合 genderInputs，然后通过循环遍历集合，找到被选中的输入框，并获取到其值。

获取 DOM 元素的内容

要获取 DOM 元素的内容，可以使用以下几种方式。

使用 `innerHTML` 属性

innerHTML 属性可以用于获取或设置元素的内部 HTML 内容。

// HTML 代码
<div id="content">Hello World!</div>

// JavaScript 代码
var contentDiv = document.getElementById("content");
var content = contentDiv.innerHTML;

在上述代码中，通过 getElementById 方法获取到 id 为 content 的 div 元素对象 contentDiv，然后通过 innerHTML 属性获取到 div 的内容 content。

使用 `textContent` 属性

textContent 属性可以用于获取或设置元素的纯文本内容。

// HTML 代码
<div id="content">Hello <strong>World</strong>!</div>

// JavaScript 代码
var contentDiv = document.getElementById("content");
var content = contentDiv.textContent;

在上述代码中，通过 getElementById 方法获取到 id 为 content 的 div 元素对象 contentDiv，然后通过 textContent 属性获取到 div 的纯文本内容 content。

使用 `innerText` 属性

innerText 属性可以用于获取或设置元素的可见文本内容。

// HTML 代码
<div id="content">Hello <strong>World</strong>!</div>

// JavaScript 代码
var contentDiv = document.getElementById("content");
var content = contentDiv.innerText;

在上述代码中，通过 getElementById 方法获取到 id 为 content 的 div 元素对象 contentDiv，然后通过 innerText 属性获取到 div 的可见文本内容 content。