HTML网页文档和DOM结构介绍

最新推荐文章于 2024-05-20 02:45:00 发布

学习&实践爱好者

最新推荐文章于 2024-05-20 02:45:00 发布

阅读量1.5k

点赞数 30

分类专栏： HTML5与CSS3 JavaScrip技术文章标签： html 前端

本文链接：https://blog.csdn.net/cnds123/article/details/136901800

版权

JavaScrip技术同时被 2 个专栏收录

109 篇文章 23 订阅

订阅专栏

HTML5与CSS3

77 篇文章 14 订阅

订阅专栏

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>

// 修改元素的文本内容
myDiv.textContent = "Hello, DOM!";

// 修改元素的 HTML 内容
myDiv.innerHTML = "<strong>Hello, DOM!</strong>";
</script>

★获取元素并修改其样式：
<p id="myParagraph">This is a paragraph.</p>

// 修改元素的样式
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>

// 遍历并修改元素
for (var i = 0; i < listItems.length; i++) {
listItems[i].textContent = "Modified Item " + (i + 1);
}
</script>

★创建新元素并添加到文档中：
<div id="myContainer"></div>

// 创建新元素
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>

// 获取父元素
var myList = itemToRemove.parentNode;

// 从父元素中删除子元素
myList.removeChild(itemToRemove);
</script>

★事件处理：
<button id="myButton">Click me!</button>

// 添加事件监听器
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博客

学习&实践爱好者

关注

30
点赞
踩
57

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML网页文档和DOM结构介绍

HTML网页文档和DOM结构介绍
复制链接

扫一扫

专栏目录

HTML网页文档和DOM结构介绍

HTML网页文档和DOM结构介绍

HTML网页文档

DOM结构

DOM 对HTML 操作

“相关推荐”对你有帮助么？