DOM基础及应用（一）

来源：互联网发布：志鸿优化系列编辑：程序博客网时间：2024/06/04 18:08

什么是DOM？

DOM既不是HTML的一部分，也不是JavaScript的一部分，而是一系列独立的规则，所有的主流浏览器都实现了这些规则。

DOM的作用是什么？

1、规定HTML的模型

2、访问和修改HTML页面

什么是DOM树？

当浏览器加载Web页面时，会在内存中创建页面的模型，DOM规定了浏览器应该使用DOM树方式创建这个模型，DOM树是由对象组成的，每个对象会作为页面的不同部分被加载到浏览器窗口中。

Demo

<span style="font-size:18px;"><strong><html> <body>     <div id="page">         <h1 id="header">List</h1>         <h2>Buy groceries</h2>         <ul>             <li id="one" class="hot"><em>fresh</em>figs</li>             <li id="two" class="hot">pine nuts</li>             <li id="three" class="hot">honey</li>             <li id="four">balsamic vinegar</li>         </ul>         <script src="js/list.js"></script>     </div> </body> </html></strong></span>

这段代码对应的DOM树如下：

节点

文档节点：树的顶端为文档节点，相当于document对象，当需要访问任何元素、属性、或文本节点时，都需要通过文档节点来进行导航。

元素节点：HTML元素描述了HTML页面的结构，<h1>至<h6>元素描述了标题部分，<p>定义了段落的文本从哪里开始，在哪里结束。

属性节点：属性节点不是所在元素的子节点，它们是这个元素的一部分，当访问一个元素时由特定的方法和属性来读取或修改这个元素的属性。

文本节点：文本节点没有子节点，如果一个元素包含文本和其他子元素，这些子元素并非文本节点的子节点，而是这个容器元素的子节点。

树种每个节点都是一个对象，拥有方法和属性，脚本可以访问和更新这个DOM树，并且针对DOM树的任何修改都会反映到浏览器中。

这篇文章简单的总结了一下DOM树基础知识，在后面的博客汇总我们将会探索具体如何使用DOM树。如果文章有不合理之处请，大牛多多斧正。

0 0