11.1.2 DOM

DOM 概念

所谓DOM,全称 Docuemnt Object Model 文档对象模型,毫无疑问,此时要操作对象,什么对象?

在文档中一切皆对象,比如html,body,div,p等等都看做对象,那么我们如何来点击某个盒子让它变色呢?

DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

解析过程

HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树(一切皆是节点)

在这里插入图片描述
在HTML当中,一切都是节点:(非常重要)

元素节点:HMTL标签。
文本节点:标签中的文字(比如标签之间的空格、换行)
属性节点::标签的属性

DOM可以做什么

找对象(元素节点)
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应:事件源、事件、事件的驱动程序

清楚DOM的结构

获取文档对象:document
获取html:document.documentElement
获取body: document.body

获取其它DOM(事件源)的三种方式

 

猜你喜欢

转载自blog.csdn.net/weixin_43336281/article/details/104660039
DOM