持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情
接上篇:
前两篇展开介绍了BOM和DOM的知识,相信大家有了一个基本的认识
今天我们总结一下DOM和BOM,帮助大家建立一个基本的知识体系
JavaScript运行在浏览器
BOM就是连接JavaScript代码和浏览器的桥梁,而DOM就是用来操作各种标签元素的。
BOM包括 window、history、location、document ...
DOM包括 Document(整个文档)、Element(标签元素)、CharacterData(字符数据)、Attr(属性),这些元素又可以继续往下划分。
Document 又可以分为HTMLDocument(就是我们定义的html文件)和XMLDocument(XML文件,安卓会用,前端用不到)
Element 可以划分为 HTMLElement(表示 HTML 中的一个元素,比如div),HTMLElement又可以划分为HTMLDIvElement 和 HTMLImageElement 故名思义
CharacterData 可以划分为text(text标签)和Comment(注释)
Attr 可以理解我们元素的class属性id属性以及值
从上图可以看出
其中window 对象继承自EventTarget接口,所以window上是可以绑定事件,监听事件,分发事件的
其中DOM 中的所有元素节点都继承自EventTarget接口,所以DOM中任意节点可以绑定事件,监听事件,分发事件
如何验证这一继承结构呢,我们可以在浏览器中打印它的原型属性
通过下图我们可以看出,window继承Window,Window继承自EventTarget
通过下图我们可以看出,document继承HtmlDocument,HtmlDocument继承自Document,Document继承自Node节点,Node节点继承自EventTarget
顺便说一句:EventTarget继承自Object,Object继承自null
为了大家更好地理解,下面演示-段HTML代码以及其对应的DOM树形结构图,如下所示。
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h1>标题</h1>
<ul>
<1i>
<a href="#">链接</a>
</1i>
</ul>
</body>
</html>
上述代码中,层层嵌套的HTML标签就是一个类似树形的DOM文档。
其中,最外面的一层是标签,标签中嵌套着标签和标签,而这两个标签中也会嵌套其他标签.
对应上述HTML代码的DOM树形结构如下图所示。
上图中就包括DOM的主要节点
Document文档节点
表示整个 HTML 页面(相当于 document 对象)
当需要访问任何标签、属性或文本时,都可以通过文档节点进行导航
Element元素节点 ul h1 li
表示 HTML 页面中的标签(即 HTML 页面的结构)
当访问 DOM 树时,需要从查找元素节点开始
Attr 属性节点 href
表示 HTML 页面中的开始标签包含的属性
Text 文本节点 比如title的内容
这篇是对前两篇的一个汇总,对于dom和bom的学习,我所秉持的观点依然是,抓大放小,建立知识体系,常用的api可以了解,不常用的api知道去哪里查就好,因为比较我们也接触不到太底层的代码。
之后,我会继续努力,把三篇内容汇总成一篇,方便大家更好的去学习理解。
附上放上三篇内容链接:
最后,这是我第一次参加更文活动,茫茫人海中,如果有幸遇到你,读到我这篇文章,那真是太好了。我深知还有很多不足,希望大家能多提建议,还是想舔着脸皮,向屏幕前的大帅比们,大漂亮们,恳请一个小小的点赞,这会是对我莫大鼓励。也祝愿点赞的大帅比们,大漂亮们升职加薪走向人生巅峰!