获取元素值的几种方式

在前端开发中，获取元素值是一个非常基础的操作。本文将介绍一些常用的获取元素值的方法。

1. 使用 id 获取元素值

使用 document.getElementById() 方法可以根据元素的 id 属性获取元素的值。例如，下面的 HTML 代码：

<div id="myDiv">Hello, world!</div>

可以使用 JavaScript 代码获取其值：

var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML); // 输出 "Hello, world!"

2. 使用标签名获取元素值

使用 document.getElementsByTagName() 方法可以根据元素的标签名获取元素的值。例如，下面的 HTML 代码：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

可以使用 JavaScript 代码获取其中某个元素的值：

var listItems = document.getElementsByTagName("li");
console.log(listItems[1].innerHTML); // 输出 "Banana"

3. 使用类名获取元素值

使用 document.getElementsByClassName() 方法可以根据元素的类名获取元素的值。例如，下面的 HTML 代码：

<div class="myClass">Hello, world!</div>

可以使用 JavaScript 代码获取其值：

var myClass = document.getElementsByClassName("myClass")[0];
console.log(myClass.innerHTML); // 输出 "Hello, world!"

4. 使用选择器获取元素值

使用 document.querySelector() 或 document.querySelectorAll() 方法可以根据 CSS 选择器获取元素的值。例如，下面的 HTML 代码：

<ul>
  <li class="fruits">Apple</li>
  <li class="fruits">Banana</li>
  <li class="vegetable">Carrot</li>
  <li class="vegetable">Potato</li>
</ul>

可以使用 JavaScript 代码获取其中某个元素的值：

var fruit = document.querySelector(".fruits");
console.log(fruit.innerHTML); // 输出 "Apple"

var vegetables = document.querySelectorAll(".vegetable");
console.log(vegetables[1].innerHTML); // 输出 "Potato"

总结

以上是常用的获取元素值的方法，开发者可以根据实际情况选择合适的方法来获取元素的值。使用这些方法可以让开发者更加高效地操作 DOM，提高开发效率。

示例代码：https://codepen.io/chatgpt/pen/PoPWKjR

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15709