HTML网页文档和DOM结构介绍
HTML网页文档
HTML，全称为超文本标记语言（Hypertext Markup Language），是用来描述并定义内容结构的标记语言，它是构建任何网页和网络应用的最基础的组成部分。HTML文档由一系列的元素构成，这些元素通过标签（tags）的形式标记出不同类型的内容，比如段落、标题、列表、链接、图片等。
一个典型的HTML文档结构包括以下部分：
<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档；
<html>：根元素，包含整个HTML文档；
<head>：头部分，包含文档的元数据，如标题、字符编码、样式表链接和脚本文件等；
<title>：定义文档的标题，显示在浏览器的标题栏或页面的标签上；
<body>：主体部分，包含实际显示在网页上的内容，如文本、图片、视频等。
一个简单的HTML文档例子：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">访问我的链接</a>
</body>
</html>
DOM结构
DOM，全称为文档对象模型（Document Object Model），是一个跨平台和语言独立的接口，它将HTML文档结构化为一个树状结构。每个节点（Node）在这棵树中代表文档中的一个部分，比如元素、属性和文本内容。DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。
【W3C（World Wide Web Consortium：万维网联盟）提出的 DOM（文档对象模型）标准被分为三个不同的部分，每个部分针对不同类型的文档。
核心DOM：核心DOM定义了处理任何结构化文档的标准模型。它提供了用于创建、修改和操作文档的基本对象和方法，包括节点（node）、元素（element）、属性（attribute）等等。核心DOM适用于处理XML文档和HTML文档。
XML DOM：XML DOM是针对XML文档的标准模型。XML DOM继承和扩展了核心DOM，提供了处理XML文档的额外功能，提供了额外的功能来处理XML文档的特定特性，例如命名空间、CDATA节等。XML DOM提供了用于解析、遍历和操作XML文档的方法和属性。
HTML DOM：HTML DOM是针对HTML文档的标准模型。HTML DOM也是继承和扩展了核心DOM，提供了处理HTML文档的额外功能，添加了特定于HTML文档的功能。HTML DOM提供了访问和操作HTML文档的方法和属性，例如操作HTML元素、样式、表单、事件等等。
本文所说DOM是指HTML DOM。】
DOM使得开发人员能够使用JavaScript等脚本语言来访问和操作文档的内容、结构和样式。通过DOM API，可以动态地添加、删除或修改页面的元素和内容，实现丰富的交互效果。
HTML DOM (Document Object Model) 提供了一组 API，允许我们通过 JavaScript 对 HTML 文档进行操作。它将 HTML 文档表示为一个树形结构，每个元素、属性和文本都被视为一个节点（node）。
在HTML DOM中，节点（Node）类型包括以下几种：
元素节点（Element Node）：代表HTML元素，如<div>, <p>, <a>等。
文本节点（Text Node）：代表元素中的文本内容，通常是元素节点的子节点。
属性节点（Attribute Node）：代表元素的属性，如id、class等。
注释节点（Comment Node）：代表HTML文档中的注释，以<!-- -->包裹的内容。
文档节点（Document Node）：代表整个HTML文档。DOM 树结构的入口。
文档类型节点（Document Type Node）：代表文档类型声明（<!DOCTYPE>）。
文档片段节点（Document Fragment Node）：代表一个虚拟的DOM片段，通常用于临时存储一组节点。
【节点之间的关系
DOM 节点树结构中，节点之间可以具有以下关系：
☆父子（Parent-Child）关系：一个节点可以拥有子节点，这些子节点称为该节点的子元素。子节点与父节点之间的关系称为父子关系，父节点是子节点的直接上级节点，而子节点是父节点的直接下级节点。
☆兄弟(Sibling)关系：同一个父节点下的子节点之间称为兄弟节点，它们在节点树结构中处于同一层级。
☆祖先后代(Ancestor-descendant)关系：一个节点的所有父节点以及祖先节点称为该节点的祖先节点，相对应的，一个节点的所有子节点以及后代节点称为该节点的后代节点。
例如：
假设有以下 HTML 结构：
Copy<!DOCTYPE html>
<html>
<head>
<title>DOM节点关系示例</title>
</head>
<body>
<div id="parent">
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
在这个例子中，我们可以看到以下节点关系：
1."parent" 元素是整个文档的父级元素，它包含了所有其他元素。
2."h1"、"p"、"ul" 是 "parent" 元素的子元素，它们之间有父子关系。
3."li" 元素是 "ul" 元素的子元素，它们之间也有父子关系。
4."h1" 和 "p" 元素是兄弟节点，它们有相同的父节点 "parent"。
5."li" 元素也是兄弟节点，它们有相同的父节点 "ul"。】
以下是一个简化的对应上面的HTML例子的DOM树结构：
当浏览器加载并解析HTML页面时，会创建一个DOM（文档对象模型）树结构来表示页面的结构和内容。并且 DOM 树结构模型会被存储在浏览器的内存中。当DOM树结构发生变化（例如通过JavaScript添加或删除节点）时，浏览器会重新构建和更新DOM树，以反映最新的页面状态。
每个元素如<body>、<h1>和<a>都会成为DOM树中的一个节点，而文本内容如"欢迎来到我的网页"会成为文本节点。属性如href="https://www.example.com"则是元素节点的属性节点。
下面给出使用DOM操作上面HTML文档节点的例子，要求：
1、获取<h1>元素<h1>元素，并显示出来
2、将<a href="https://www.example.com">中的“href="https://www.example.com"”改为：“href="https://https://www.baidu.com/"”
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">访问我的链接</a>
<script>
// 1、获取<h1>元素
var h1Element = document.querySelector('h1');
// 显示<h1>元素的内容
console.log("<h1>元素内容：" + h1Element.textContent); //向控制台输出字符串消息
//alert("<h1>元素内容：" + h1Element.textContent); //弹窗输出框
// 2、获取<a>元素
var aElement = document.querySelector('a');
// 修改<a>元素的href属性值
aElement.setAttribute('href', 'https://www.baidu.com/');
</script>
</body>
</html>
请留意其中<script> </script>之间的部分。
这样能使得开发者可以编写脚本来实现网页的动态行为和内容更新。
DOM 对HTML 操作
通过 DOM，我们可以获取、修改、添加或删除 HTML 元素。换句话说，HTML DOM (Document Object Model) 提供了一组 API，允许我们通过 JavaScript 对 HTML 文档的节点进行操作。前面已涉及过，以下是关于这些操作更多介绍。
★获取 HTML 元素：
☆document.getElementById(id)：通过元素的 id 属性获取元素。
☆document.getElementsByClassName(className)：通过元素的 class 属性获取一组元素。
☆document.getElementsByTagName(tagName)：通过元素的标签名获取一组元素。
☆document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素。
☆document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素。
★修改 HTML 元素：
☆element.innerHTML：获取或设置元素的 HTML 内容。
☆element.textContent：获取或设置元素的文本内容。
☆element.getAttribute(attributeName)：获取元素的指定属性值。
☆element.setAttribute(attributeName, value)：设置元素的指定属性值。
☆element.removeAttribute(attributeName)：删除元素的指定属性。
☆element.style.property：获取或设置元素的样式属性。
☆element.classList.add(className)：为元素添加一个 CSS 类。
☆element.classList.remove(className)：从元素中删除一个 CSS 类。
☆element.classList.toggle(className)：切换元素的 CSS 类。
★添加 HTML 元素：
☆document.createElement(tagName)：创建一个新的元素节点。
☆parentElement.appendChild(newElement)：将新元素添加到父元素的子节点列表的末尾。
☆parentElement.insertBefore(newElement, referenceElement)：在参考元素之前插入新元素。
★删除 HTML 元素：
☆parentElement.removeChild(element)：从父元素中删除指定的子元素。
☆element.remove()：从 DOM 中删除元素自身。
★遍历 HTML 元素：
☆element.parentNode：获取元素的父节点。
☆element.childNodes：获取元素的所有子节点（包括文本节点）。
☆element.children：获取元素的所有子元素节点。
☆element.firstChild：获取元素的第一个子节点。
☆element.lastChild：获取元素的最后一个子节点。
☆element.nextSibling：获取元素的下一个兄弟节点。
☆element.previousSibling：获取元素的上一个兄弟节点。
★事件处理：
☆element.addEventListener(event, function)：为元素添加事件监听器。
☆element.removeEventListener(event, function)：从元素中移除事件监听器。
这些是 HTML DOM 操作的基本方法和属性。通过合适地使用它们，我们可以动态地获取、修改、添加或删除 HTML 元素，以及响应用户交互事件。
需要注意的是，在进行 DOM 操作时，要确保在文档加载完成后再进行操作，可以使用 window.onload 事件或将 JavaScript 代码放在 <body> 元素的末尾来确保这一点。
此外，还有一些其他的 DOM 方法和属性，如 cloneNode()、hasAttribute()、contains() 等，可以根据具体需求进一步探索和使用。
下面给出使用DOM操作HTML文档的示例。
★获取元素并修改其内容：
<div id="myDiv">Hello, World!</div>
<script>
// 获取元素
var myDiv = document.getElementById("myDiv");
// 修改元素的文本内容
myDiv.textContent = "Hello, DOM!";
// 修改元素的 HTML 内容
myDiv.innerHTML = "<strong>Hello, DOM!</strong>";
</script>
★获取元素并修改其样式：
<p id="myParagraph">This is a paragraph.</p>
<script>
// 获取元素
var myParagraph = document.getElementById("myParagraph");
// 修改元素的样式
myParagraph.style.color = "red";
myParagraph.style.fontSize = "20px";
myParagraph.style.fontWeight = "bold";
</script>
★获取多个元素并遍历修改：
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 获取元素
var myList = document.getElementById("myList");
var listItems = myList.getElementsByTagName("li");
// 遍历并修改元素
for (var i = 0; i < listItems.length; i++) {
listItems[i].textContent = "Modified Item " + (i + 1);
}
</script>
★创建新元素并添加到文档中：
<div id="myContainer"></div>
<script>
// 获取容器元素
var myContainer = document.getElementById("myContainer");
// 创建新元素
var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
// 将新元素添加到容器中
myContainer.appendChild(newParagraph);
</script>
★删除元素：
<ul id="myList">
<li>Item 1</li>
<li id="itemToRemove">Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 获取要删除的元素
var itemToRemove = document.getElementById("itemToRemove");
// 获取父元素
var myList = itemToRemove.parentNode;
// 从父元素中删除子元素
myList.removeChild(itemToRemove);
</script>
★事件处理：
<button id="myButton">Click me!</button>
<script>
// 获取按钮元素
var myButton = document.getElementById("myButton");
// 添加事件监听器
myButton.addEventListener("click", function() {
alert("Button clicked!");
});
</script>
这些简单示例展示了如何使用 DOM 操作获取元素、修改元素内容和样式、创建新元素、删除元素以及处理事件。你可以根据具体需求组合使用这些操作，以实现对 HTML 文档的动态修改和交互。
附录
DOM 概述 DOM 概述 - Web API 接口参考 | MDN
HTML DOM 参考手册W3schools - 参考手册
JavaScript简介与实验基础 JavaScript简介与实验基础_javascript实验-CSDN博客
BOM和DOM入门（修订）BOM和DOM入门（修订）_bom和dom的结构关系示意图-CSDN博客
