DOM认知

什么是DOM?

DOM 是 Document Object Model(文档对象模型)的缩写。DOM是一套对文档的内容进行抽象和概念化的方法。通过JavaScript,可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问。

W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

重点学习 HTML DOM

HTML DOM 是:

  * HTML 的标准对象模型
  * HTML 的标准编程接口
  * W3C 标准

HTML DOM 定义了所有 HTML 元素的对象属性,以及访问它们的方法

  换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

节点树
在数据结构中我们也使用过树,在这里我们仍然使用树,我们将它所有的节点形象化的展示出来,所有的节点均可通过 JavaScript 进行访问。

节点.jpg

源码

<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<a href = "#"> welcome to my blog</a>
<h1>DOM 第一课</h1>
</body>
</html>

从上面的 HTML 分析得出:
<html> 节点没有父节点;它是根节点,有且只有一个
<head><body> 的父节点<html> 节点
文本节点 "welcome to my blog" 的父节点是 <a>节点
并且:
* <html> 节点拥有两个子节点:<head> 和 <body>
* <head> 节点拥有一个子节点:<title> 节点
* <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
* <h1> 和 <a> 节点是同胞节点,也就是兄弟节点,同时也是 <body> 的子节点
并且:
* <head> 元素是 <html> 元素的首个子节点
* <body> 元素是 <html> 元素的最后一个子节点
* <a> 元素是 <body> 元素的首个子节点
* <h1> 元素是 <body> 元素的最后一个子节点

总结

通过节点树,我们能快速的将节点树翻译成我们的源码,同样,我们也可以通过源码构造一棵节点树,我们易可以进行对节点树信息修改,在任意位置增加我们想要的信息。

想要了解怎样对节点进行增删改善的遍历,敬请期待下一篇文章。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容