HTML网页文档和DOM结构介绍

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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/764901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[SAP ABAP] SE11查询数据库表中的数据

[SAP ABAP] SE11查询数据库表中的数据

我们可以通过事务码SE11查询对应数据库表中的详细数据 本次查询使用的数据库表名为MARA&#xff0c;具体操作如下所示: ① 输入事务码SE11进入ABAP字典操作界面&#xff0c;在数据库表搜索框中输入目标表名MARA&#xff0c;并点击【显示】按钮 ② 进入到显示表界面&#xff0…
阅读更多...
c++翁恺

c++翁恺

1、面向对象 Data&#xff1a;杯子的属性 Opera&#xff1a;杯子提供的服务 老师上课&#xff1a; C&#xff1a;按流程执行 C&#xff1a;定一个教室&#xff0c;有很多学生&#xff0c;投影仪&#xff0c;灯&#xff0c;每个学生反映不一样。 这个场景有什么东西&#xff0c…
阅读更多...
关于Rust的项目结构的笔记

关于Rust的项目结构的笔记

层级 PackageCrateModulePath Package cargo的特性, 构建、测试、共享Crate 组成: 一个 Cargo.toml 文件, 描述了如何构建这些 Crates至少包含一个 crate最多只能包含一个 library crate可以包含任意个 binary crate cargo new demo-pro 会产生一个名为 demo-pro 的 Packa…
阅读更多...
【自记录】VS2022编译OpenSSL1.0.2u

【自记录】VS2022编译OpenSSL1.0.2u

因为突然要编译一个老工程&#xff0c;老工程里面用到了OpenSSL 1.0.x。 于是官网下载了最后一个1.0.x版本1.0.2u。 1 下载安装Perl 去Perl官网下载即可。 使用vcpkg直接安装也可以&#xff0c;比前者更方便 vcpkg install perl #根据实际路径调整 set PATHD:\vcpkg\downloa…
阅读更多...
【C语言】linux内核pci_set_master

【C语言】linux内核pci_set_master

一、__pci_set_master static void __pci_set_master(struct pci_dev *dev, bool enable) {u16 old_cmd, cmd;pci_read_config_word(dev, PCI_COMMAND, &old_cmd); // 读取设备的PCI命令寄存器的当前值if (enable)cmd old_cmd | PCI_COMMAND_MASTER; // 如果要启用总线…
阅读更多...
力扣● 503.下一个更大元素II ● 42. 接雨水

力扣● 503.下一个更大元素II ● 42. 接雨水

503.下一个更大元素II 与496.下一个更大元素 I的不同是要循环地搜索元素的下一个更大的数。那么主要是对于遍历结束后&#xff0c;单调栈里面剩下的那些元素。 如果直接把两个数组拼接在一起&#xff0c;然后使用单调栈求下一个最大值就可以。 代码实现的话&#xff0c;不用直…
阅读更多...
蓝桥杯练习——神秘咒语——axios

蓝桥杯练习——神秘咒语——axios

目标 完善 index.js 中的 TODO 部分&#xff0c;通过新增或者修改代码&#xff0c;完成以下目标&#xff1a; 点击钥匙 1 和钥匙 2 按钮时会通过 axios 发送请求&#xff0c;在发送请求时需要在请求头中添加 Authorization 字段携带 token&#xff0c;token 的值为 2b58f9a8-…
阅读更多...
瑞_23种设计模式_状态模式

瑞_23种设计模式_状态模式

文章目录 1 状态模式&#xff08;State Pattern&#xff09;1.1 介绍1.2 概述1.3 状态模式的结构1.4 状态模式的优缺点1.5 状态模式的使用场景 2 案例一2.1 需求2.2 代码实现&#xff08;未使用状态模式&#xff09;2.3 代码实现&#xff08;状态模式&#xff09; 3 案例二3.1 …
阅读更多...
[BT]BUUCTF刷题第4天（3.22）

[BT]BUUCTF刷题第4天（3.22）

第4天&#xff08;共两题&#xff09; Web [极客大挑战 2019]Upload 这是文件上传的题目&#xff0c;有一篇比较详细的有关文件上传的绕过方法文件上传漏洞详解&#xff08;CTF篇&#xff09; 首先直接上传带一句话木马的php文件&#xff0c;发现被拦截&#xff0c;提示不是图…
阅读更多...
vue3 使用element-plus 如何再次封装table组件

vue3 使用element-plus 如何再次封装table组件

• vue3 使用element-plus 如何再次封装table组件 • 基本步骤 • 创建子组件&#xff1a; • 默认数据配置 • 在需要使用自定义 Table 组件的地方引入并使用&#xff1a; 创建子组件&#xff1a; 创建一个新的 .vue 文件&#xff0c;例如子组件 baseTable.vue&#xff0c…
阅读更多...
Linux安装Nacos

Linux安装Nacos

安装前必要准备 准备Java环境 &#xff0c;8以上的版本&#xff0c;mysql&#xff08;集群相关信息&#xff09;&#xff0c;nginx&#xff08;进行代理&#xff09; 安装Nacos 首先我们要有一个nacos的包&#xff0c;我们可以在线下载&#xff0c;也可以提前下载好&#xf…
阅读更多...
从HTTP到QUIC：网络协议的演进与优化

从HTTP到QUIC：网络协议的演进与优化

文章目录 1. HTTP&#xff08;超文本传输协议&#xff09;2. HTTP/1.1&#xff1a;性能优化与持久连接3. HTTP/2&#xff1a;多路复用与性能进一步提升4. QUIC&#xff1a;基于UDP的低延迟传输协议5. HTTP/3&#xff1a;基于QUIC的下一代HTTP协议6. QUIC的IETF标准化进程7. 新兴…
阅读更多...
Nginx 全局块配置 worker 进程的两个指令

Nginx 全局块配置 worker 进程的两个指令

1. 前言 熟悉 nginx 运行原理的都知道&#xff0c;nginx 服务启动后&#xff0c;会有一个 master 进程和多个 worker 进程&#xff0c;master 进程负责管理所有的 worker 进程&#xff0c;worker 进程负责处理和接收用户请求 在这里我们所要研究的是 master 进程一定要创建 wo…
阅读更多...
c语言管理课程信息系统

c语言管理课程信息系统

定制魏：QTWZPW，获取更多源码等 目录 题目要求 数据结构 函数设计 结构设计 管理员功能： 学生功能： 效果展示 总结 主函数代码 题目要求 管理课程信息系统，允许管理员和学生执行不同的操作。管理员可以添加、浏览、查询、删除、修改和排序课程信息。学生可以…
阅读更多...
如何进行设备的非对称性能测试

如何进行设备的非对称性能测试

非对称性能测试介绍 RFC2544是RFC组织提出的用于评测网络互联设备&#xff08;防火墙、IDS、Switch等&#xff09;的国际标准。主要是对RFC1242中定义的性能评测参数的具体测试方法、结果的提交形式作了较详细的规定。标准中定义了4个重要的参数&#xff1a;吞吐量&#xff08…
阅读更多...
HashMap是Java中常用的键值对存储容器，以下是HashMap类的一些常用方法：

HashMap是Java中常用的键值对存储容器，以下是HashMap类的一些常用方法：

put(key, value)&#xff1a;将指定的键值对存储到HashMap中&#xff0c;如果该键已经存在&#xff0c;则会更新对应的值。 HashMap<String, Integer> map new HashMap<>(); map.put("apple", 10); map.put("banana", 5);get(key)&#xff1a…
阅读更多...
Uni-app/Vue/Js本地模糊查询，匹配所有字段includes和some方法结合使用e

Uni-app/Vue/Js本地模糊查询，匹配所有字段includes和some方法结合使用e

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1.第一步 需要一个数组数据 {"week": "全部","hOutName": null,"weekendPrice": null,"channel": "门市价","hOutId": 98,"cTime": "…
阅读更多...
度小满校招后端研发第2批编程题Java题解

度小满校招后端研发第2批编程题Java题解

1、坚强的小昆虫 由于新冠肺炎疫情的爆发&#xff0c;小明养在宿舍的小昆虫已经很久很久都没有人管了。小昆虫已经饿的不行了&#xff0c;必须出来找东西吃&#xff0c;可是出来之后需 要走出一个迷宫。小昆虫每次可以朝上、下、左、右四个方向之一走一步&#xff0c;且只要走…
阅读更多...
打造新质生产力，亚信科技2024年如何行稳致远？

打造新质生产力，亚信科技2024年如何行稳致远？

引言&#xff1a;不冒进、不激进&#xff0c;稳扎稳打&#xff0c; 一个行业一个行业地深度拓展。 【全球云观察 &#xff5c; 科技热点关注】 基于以往“一巩固、三发展”的多年业务战略&#xff0c;亚信科技正在落实向非通信行业、标准产品、软硬一体产品和国际市场的“四…
阅读更多...
无人机群全局一致性后端优化

无人机群全局一致性后端优化

视觉全局一致性 目的&#xff1a;不同无人机看到同一个路标点时&#xff0c;可以构建重投影误差来优化位姿 重点学习参考vins前端图像跟踪 双目模式vins VIO 入口为rosNodeTest.cpp&#xff0c;首先利用sync_process()中先读取配置文件&#xff0c;再调用estimator.inputIma…
阅读更多...
最新文章

Copyright @ 2022~2023