掌握HTML DOM核心概念与实战技巧（一）

admin
前端开发
2天前
6热度
0评论

HTML DOM（文档对象模型）是HTML和XML文档的编程接口，它定义了访问和操作HTML文档的标准方法。DOM以树状结构表示HTML文档，使得开发者可以通过编程语言（如JavaScript）轻松地访问和修改文档中的各个元素。本文将详细介绍HTML DOM的核心概念、常用方法和属性，并通过实例帮助你快速掌握其应用技巧。

HTML DOM的基本概念

什么是DOM？

DOM是W3C（万维网联盟）制定的标准，它提供了一种中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM标准分为三个部分：

核心DOM：适用于任何结构化文档的标准模型。
XML DOM：针对XML文档的标准模型。
HTML DOM：针对HTML文档的标准模型。

什么是HTML DOM？

HTML DOM是HTML的标准对象模型和编程接口，它定义了所有HTML元素的对象、属性和方法。通过HTML DOM，你可以获取、修改、添加或删除HTML元素。HTML DOM将整个HTML文档视为一个节点树，其中每个节点代表文档中的一个部分。

HTML DOM的树形结构

HTML DOM以树形结构表示HTML文档，这种结构称为节点树。节点树中的每个节点都有特定的关系，例如父节点、子节点和同胞节点。

节点类型

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

文档节点：整个HTML文档。
元素节点：每个HTML元素。
文本节点：HTML元素内的文本。
属性节点：HTML元素的属性。
注释节点：HTML文档中的注释。

节点关系

节点树中的节点彼此之间有层级关系，常用的关系术语包括：

父节点：拥有子节点的节点。
子节点：被其他节点拥有的节点。
同胞节点：拥有相同父节点的节点。
根节点：节点树的顶端节点，没有父节点。

示例

考虑以下HTML片段：


<html>

<head>
    <meta charset="utf-8">

<title>DOM 教程</title>
  </head>

<body>

<h1>DOM 课程1</h1>

<p>Hello world!</p>
  </body>
</html>

在这个例子中：

<html> 节点是根节点，没有父节点。
<head> 和 <body> 的父节点是 <html>。
文本节点 "Hello world!" 的父节点是 <p>。
<html> 节点有两个子节点：<head> 和 <body>。
<head> 节点有两个子节点：<meta> 和 <title>。
<title> 节点有一个子节点：文本节点 "DOM 教程"。
<h1> 和 <p> 是同胞节点，同时是 <body> 的子节点。

HTML DOM的方法和属性

HTML DOM提供了丰富的方法和属性，用于访问和操作文档中的节点。以下是一些常用的HTML DOM方法和属性：

常用方法

getElementById(id)：返回带有指定ID的元素。
getElementsByTagName(tagName)：返回带有指定标签名的所有元素的节点列表。
getElementsByClassName(className)：返回带有指定类名的所有元素的节点列表。
appendChild(node)：将新的子节点添加到指定节点。
removeChild(node)：删除子节点。
replaceChild(newNode, oldNode)：替换子节点。
insertBefore(newNode, referenceNode)：在指定的子节点前面插入新的子节点。
createAttribute(name)：创建属性节点。
createElement(tagName)：创建元素节点。
createTextNode(text)：创建文本节点。
getAttribute(name)：返回指定的属性值。
setAttribute(name, value)：设置或修改指定属性的值。

常用属性

innerHTML：节点的文本值。
parentNode：节点的父节点。
childNodes：节点的子节点。
attributes：节点的属性节点。

实例：使用getElementById方法

以下示例展示了如何使用getElementById方法获取并修改一个元素的内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p id="intro">Hello World!</p>
  <script>
    var element = document.getElementById("intro");
    element.innerHTML = "新文本!";
  </script>
</body>
</html>

实例：使用innerHTML属性

以下示例展示了如何使用innerHTML属性获取元素的内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p id="intro">Hello World!</p>
  <script>
    var txt = document.getElementById("intro").innerHTML;
    document.write(txt);
  </script>
</body>
</html>

访问和修改HTML元素

访问HTML元素

访问HTML元素等同于访问节点。你可以通过以下方法访问HTML元素：

getElementById(id)：通过ID访问元素。
getElementsByTagName(tagName)：通过标签名访问元素。
getElementsByClassName(className)：通过类名访问元素。

修改HTML元素

修改HTML元素涉及多个方面，包括改变内容、样式、属性、创建新元素和删除现有元素。以下是一些常见的操作：

改变HTML内容

最简单的方法是使用innerHTML属性。以下示例展示了如何改变一个段落的内容：

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
</head>
<body>
  <p id="p1">Hello World!</p>
  <script>
    document.getElementById("p1").innerHTML = "新文本!";
  </script>

<p>段落通过脚本来修改内容。</p>
</body>
</html>

改变HTML样式

通过HTML DOM，你可以访问元素的样式对象并修改其属性。以下示例展示了如何改变一个段落的样式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p id="p1">Hello world!</p>
  <p id="p2">Hello world!</p>
  <script>
    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "larger";
  </script>
</body>
</html>

创建新的HTML元素

要向HTML文档中添加新元素，你需要先创建该元素，然后将其追加到现有的元素中。以下示例展示了如何创建一个新的段落并将其添加到一个div中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
  </div>
  <script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
  </script>
</body>
</html>

删除HTML元素

要删除HTML文档中的元素，可以使用removeChild方法。以下示例展示了如何删除一个段落：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
  </div>
  <script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
  </script>
</body>
</html>

总结

HTML DOM是Web开发中不可或缺的一部分，它提供了强大的工具来访问和操作HTML文档。通过本文的学习，你应该已经掌握了HTML DOM的基本概念、常用方法和属性，并能够通过实例进行实际操作。希望这些知识能帮助你在Web开发中更加得心应手。如果你有任何疑问或需要进一步的帮助，请随时留言交流。