javascriptdom树 | 易学教程

javascript dom树

什么是DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom</title>
</head>
<body>
	<div class = 'box1'>
		<p>
			<i>今天武汉下雨了</i>
		</p>
		<a>今天天气不太好</a>
	</div>
</body>
</html>

dom结构图
解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
上图可知，在HTML当中，一切都是节点：（非常重要）

元素节点：HMTL标签。

文本节点：标签中的文字（比如标签之间的空格、换行）

属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。
DOM可以做什么
找对象（元素节点）
所有的Node(元素、属性、文本)对象都是document的子代节点
节点又分为三大类
节点类型nodeType值都为number
节点名nodeName
节点值nodeValue
设置元素的属性值

       设置元素的样式

       动态创建和删除元素

       事件的触发响应：事件源、事件、事件的驱动程序
       
       节点之间的关系
       ![dom](https://img-blog.c元素节点sdnimg.cn/20200104163040538.jpg)

来源：CSDN

作者：Colorful? ?

链接：https://blog.csdn.net/HeartCSDN/article/details/103833884

标签

dom

dom对象