document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

2023年6月10日下午3:27 • JavaScript

document.all是过时的DOM属性，已被所有主流浏览器弃用。它返回当前文档中包含的所有HTML元素，以类似于数组（但不是真正的数组）的方式进行索引。由于兼容性问题，不建议使用它。

相反，getElementById是现代JS DOM API的一部分，它可以通过指定元素的ID属性来获取文档中的单个元素。它是非常常见和实用的DOM方法之一。

例如，如果想操作一个文档中的<div>元素，我们可以通过以下方式使用getElementById方法来获取该元素：

<!DOCTYPE html>
<html>
<body>
  <div id="myDiv">Hello World</div>

  <script>
    const myDivElement = document.getElementById("myDiv");
    console.log(myDivElement.innerText); // 输出：Hello World
  </script>
</body>
</html>

此代码将在控制台中输出"Hello World"，因为它是<div id="myDiv">元素的文本内容。

除了getElementById之外，还有getElementsByName和getElementsByTagName方法可用于通过标签名称或名称属性获取一组DOM元素。

getElementsByName 方法可以用于获取带有给定名称属性的所有元素。例如，如果您要获取一组<input>元素，它们都有“username”作为名称，可以通过以下方式使用getElementsByName进行选择：

<input type="text" name="username" value="john_smith">
<input type="text" name="username" value="jane_doe">
<input type="text" name="username" value="jimmy_garcia">
<script>
const usernameFields = document.getElementsByName("username");
console.log(usernameFields.length); // 输出: 3
</script>

此代码将在控制台中输出“3”，因为有3个<input>元素带有名称属性 “username”。

getElementsByTagName方法可用于获取文档中某一类型的所有元素。例如，我们可以使用此方法选择所有的<p>元素：

<!DOCTYPE html>
<html>
<body>
  <p>段落</p>
  <p>更多段落</p>
  <script>
    const paragraphs = document.getElementsByTagName("p");
    console.log(paragraphs.length); // 输出: 2
  </script>
</body>
</html>

此代码将在控制台中输出“2”，因为有两个<p>元素。

总结：
- document.all属性已被弃用，不要使用；
- getElementById是获取单个元素的最常用方法，通过元素的唯一ID进行选择；
- getElementsByName和getElementsByTagName可用于选择一组具有相同名称或类型的元素，但它们是未排序的元素列表，并且ID在其页面中必须是唯一的；
- 请注意：如果要获取单个元素的调用方法时，且此元素在文档中不存在，以上任何方法都会返回null。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById - Python技术站