HTML DOM 访问

HTML DOM（文档对象模型）是一种用于访问和操作 HTML 文档的标准编程接口。通过使用 HTML DOM，您可以轻松地访问文档的元素、属性和内容，并对其进行操作。

访问元素

要访问文档中的元素，您可以使用 document.getElementById() 方法。该方法接受一个参数，即要访问的元素的 id 属性的值，并返回对应的元素对象。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>访问元素示例</title>
</head>
<body>
  <div id="myDiv">这是一个 div 元素</div>
  <script>
    var element = document.getElementById("myDiv");
    console.log(element.innerHTML);
  </script>
</body>
</html>

在上面的示例中，我们通过 id 属性值为 myDiv 的元素，并使用 innerHTML 属性访问其内容。

访问属性

除了访问元素本身，您还可以访问元素的属性。要访问元素的属性，您可以使用元素对象的属性访问方式，例如 element.attribute。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>访问属性示例</title>
</head>
<body>
  <img id="myImg" src="image.jpg" alt="图片">
  <script>
    var img = document.getElementById("myImg");
    console.log(img.src);
    console.log(img.alt);
  </script>
</body>
</html>

在上面的示例中，我们通过 id 属性值为 myImg 的图片元素，并使用 src 和 alt 属性访问其属性值。

遍历元素

如果您想要遍历文档中的多个元素，可以使用 document.getElementsByTagName() 方法。该方法接受一个参数，即要获取的元素的标签名，并返回一个包含所有符合条件的元素对象的数组。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>遍历元素示例</title>
</head>
<body>
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
  </ul>
  <script>
    var items = document.getElementsByTagName("li");
    for (var i = 0; i < items.length; i++) {
      console.log(items[i].innerHTML);
    }
  </script>
</body>
</html>

在上面的示例中，我们通过标签名为 li 的元素，获取所有 li 元素，并遍历输出它们的内容。

通过以上示例，您可以了解如何使用 HTML DOM 来访问文档中的元素、属性和内容。在接下来的章节中，我们将深入探讨如何操作文档中的元素和内容。