目录
一,什么是DOM?
英文名:Document Object Model,中文名:文档对象模型。我们知道前端三大件:html,css,JavaScript,JavaScript的作用是让网页动起来,也就是让html元素和css属性发生变化。那么现在的问题就是如何去操作html文本文件和css文本文件?第一步就是:先把他们加载到内存里。
当把html文档和css文档加载到内存里面,那么他们在内存里是如何储存的呢?这个我们不需要管,因为有大佬已经帮我们解决这个问题了,并且放出一些接口,我们只要使用这些接口就能去操作html文档中的各种标签和css文件中的各种属性。
最常用的是:使用JavaScript去实现这些接口。JavaScript能够操作内存数据,也能够操作储存在内存里面的html文档和css文本文件。html文档和css属性文档存在内存里,从广义上来说,他们就是一个对象,即文档对象,Document Object。JavaScript通过DOM作为媒介,利用其提供的接口,通过JavaScript代码去控制这个DO,文档对象。
实际上,html文档以类似树的数据结构储存在内存里,它叫做节点树对象DOM TREE。严格地说,DOM并不属于JavaScript的一部分,DOM只是提供了接口规范,只不过使用JavaScript去实现DOM接口而已。
我们将这个利用JavaScript代码去操作内存里的html文档的过程进行抽象,则得到DOM模型。
二,节点与节点树
浏览器得到html文档之后,就开始解析(parse)文档,将html文档首先分成各个节点,再由这些节点node组成dom树。
1,节点
DOM组成的最小单位是节点node。下图就是DOM树。
可以看出:节点就是html文档各种内容的指代。节点的类型如下:
2,节点树
类似于html中各种标签一层层的嵌套,用树来表现的话像一个二叉树,树的每一个节点就是各种标签。
Document Object由谁进行生成呢?答案是:浏览器。浏览器获取得到html文档后,然后生成一个DO对象,即文档对象document,document变量名与这个DO对象始终进行绑定。也就是document指代的是html文档。
<body>
<script>
console.log(document);
</script>
</body>
打开浏览器显示如下图:
节点层次图如下:
三,nodeType属性
利用这个属性可以获得dom树中各种节点的属性。每个节点都有一个nodeType属性,用于表明节点的类型。nodeType 属性返回节点类型的常数值。