📌  相关文章
📜  HTML | DOM 节对象(1)

📅  最后修改于: 2023-12-03 14:41:50.494000             🧑  作者: Mango

HTML | DOM 节点对象

HTML（超文本标记语言）是构建 Web 页面的标准语言之一，它的一个重要组成部分就是 DOM（文档对象模型）节点对象。DOM 节点对象表示 HTML 文档中的一个元素或节点，是对 HTML 文档的抽象表示。本文将详细介绍 HTML | DOM 节点对象的概念和用法。

什么是节点对象？

节点对象是 DOM中的基本概念，通常指富有意义的单个元素或属性。在 DOM 树中，节点对象构成了树形结构，包括以下几种类型：

  1. 标签节点：HTML 标签本身也是一个节点，如 <body>、<a>、<p> 等。
  2. 文本节点：HTML 文档中的文本内容也是一个节点，如 "Hello world"。
  3. 属性节点：HTML 元素的属性也是节点，如 id、style 等。

节点对象通常具有以下属性：

  • nodeName：节点的名称，对于文本节点，它的值是 "#text"。
  • nodeValue：节点的值，对于文本节点，它的值是节点所包含的文本内容。
  • nodeType：节点的类型，表示节点是文档、元素、文本、注释等不同类型的节点。
如何访问节点对象？

DOM 提供了多种方式来访问节点对象，以下是几种常见的方式：

  1. document.getElementById(id)：通过 ID 获取节点对象。
  2. document.getElementsByTagName(name)：通过标签名获取节点对象集合。
  3. document.getElementsByClassName(className)：通过类名获取节点对象集合。
  4. parentNode.firstChild：获取父节点的第一个子节点。
  5. parentNode.lastChild：获取父节点的最后一个子节点。
  6. previousSibling：获取当前节点的前一个同级节点。
  7. nextSibling：获取当前节点的后一个同级节点。

除了以上方法外，DOM 还提供了丰富的方法和属性来操作节点对象，如 appendChild()、removeChild()、setAttribute()、getAttribute() 等，具体可以参考 MDN 的文档。

示例代码

以下是一个简单的示例代码，演示了如何通过 JavaScript 访问节点对象：

<!DOCTYPE html>
<html>
<head>
<title>DOM 节点对象示例</title>
<script>
window.onload = function() {
  // 通过 ID 获取节点对象
  var heading = document.getElementById("myHeading");
  // 获取节点对象的值和类型
  console.log(heading.nodeName); // 输出 H1
  console.log(heading.nodeValue); // 输出 null
  console.log(heading.nodeType); // 输出 1
  // 修改节点对象的文本内容
  heading.innerHTML = "Hello World!";
};
</script>
</head>
<body>
<h1 id="myHeading">DOM 节点对象示例</h1>
<p id="myParagraph">这是一个段落。</p>
</body>
</html>

以上代码通过 getElementById() 方法获取了 myHeading 这个 ID 对应的节点对象，然后使用 innerHTML 修改了节点对象的文本内容。

总结

本文介绍了 HTML | DOM 节点对象的概念和用法，包括节点对象的类型、属性、访问方式和示例代码。理解节点对象的概念和用法对于开发 Web 应用程序和操作 HTML 元素非常重要，希望可以帮助大家更好地理解 DOM 编程。