深入理解DOM编程

bugnotfound

已于 2024-04-17 22:44:13 修改

阅读量214

点赞数 10

分类专栏：大道至简，重学编程文章标签： javascript html5

于 2024-04-17 22:15:50 首次发布

本文链接：https://blog.csdn.net/bugnotfound/article/details/137891661

版权

大道至简，重学编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

深入理解DOM编程

一些相关的基础概念

DOM（文档对象模型）是用于表示网页文档结构的编程接口。
浏览器渲染引擎：浏览器中的渲染引擎负责解析HTML、CSS和JavaScript，并将它们转换为可视化的网页。DOM是渲染引擎内部的一个数据结构，用于表示和组织文档的结构。
DOM树：DOM树是由节点（Node）构成的层次结构，表示HTML文档的结构。
DOM节点：DOM节点可以分为元素节点、文本节点、属性节点、注释节点等不同类型。每种节点类型都有相应的属性和方法，用于操作和访问节点的内容和属性。

DOM的一般工作流程

解析HTML文档：
- 当浏览器加载一个网页时，首先会下载HTML文档。浏览器的渲染引擎开始解析HTML文档，构建DOM树的基本结构。
构建DOM树：
- 在解析HTML文档的过程中，浏览器将HTML标记转换为DOM节点，并构建出一棵DOM树。每个HTML元素对应一个DOM节点，形成了一个层次结构的树状关系。
解析CSS和构建CSSOM：
- 同时，浏览器还会解析CSS样式表，构建CSSOM树。CSSOM树和DOM树结合后形成了Render树，这个树结构包含了所有需要渲染的元素及其样式信息。
渲染页面：
- 根据Render树，浏览器开始布局（Layout）和绘制（Paint）页面内容，将页面呈现在用户的屏幕上。

整理和理解

DOM树是用来描绘一个网页的结构，而DOM节点是一个一个的HTML标记。
那么当我们需要对页面的某些元素进行修改时，可以通过document(DOM树的根)来获取目标节点(DOM节点)。这里我们联想到java的类，每一个DOM节点都可以看作是一个java的对象，通过对节点.属性或者是节点.方法的调用，我们可以非常轻松的对该节点进行操作，以达到对DOM树的修改。
最后DOM树的修改使得浏览器会根据所修改的内容进行重新计算布局和绘制，以确保页面内容的正确显示，以达到我们的预期需求。

DOM节点举例

<button type="button" id="myButton" value="这是一个按钮">点击我</button>
<!--

-元素节点(Element Node): button
  -属性节点(Attribute Nodes):
    -type="button"
    -id="myButton"
    -value="这是一个按钮"
  -文本节点(Text Node): 点击我

-->

DOM编程举例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作示例</title>
</head>
<body>
<input type="text" id="myInput" value="Hello, World!">
<button οnclick="getAndModify()">获取并修改内容</button>

<script>
function getAndModify() {
    // 通过DOM树根节点的getElementById方法通过遍历id来获取到对应id的节点
    var inputElement = document.getElementById('myInput');

    // 使用节点.属性来获取inputElement节点中的值
    var inputValue = inputElement.value;
    console.log('当前输入框的内容为：' + inputValue);

    // 利用节点.属性来设置节点中的值
    var newValue = 'New Content';
    inputElement.value = newValue;
    console.log('修改后输入框的内容为：' + inputElement.value);
}
</script>
</body>
</html>