JS学习13:DOM文档对象模型

1、 定义

(1) DOM是文档对象模型的缩写,是W3C(万维网联盟)的标准

(2) W3C文档对象模型(DOM)是一个平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式

(3)在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素,这种添加元素、删除元素的操作就是通过DOM来实现的。

(4)说白了,DOM就是一个接口,我们可以通过DOM来操作页面中各种元素,例如添加元素、删除元素、替换元素等。

二、DOM节点树型结构

1、

2、html标签结构与DOM

三、DOM节点类型

1、节点类型

(1)整个文档是一个文档节点

(2)每个 HTML 元素是元素节点

(3)HTML 元素内的文本是文本节点

(4)每个 HTML 属性是属性节点   //注:在旧 DOM 规范中,属性继承自 Node,是一种特殊的节点。新的DOM规范中,属性不是节点

(5)注释是注释节点

2、节点关系

(1)根节点:在HTML文档中,html就是根节点。

(2)父节点:一个节点之上的节点就是该节点的父节点,例如h1的父节点就是body,body的父节点就是html。

(3)子节点:一个节点之下的节点就是该节点的子节点,例如h1就是body的子节点。

(4)兄弟节点:如果多个节点在同一层次,并拥有相同的父节点,那么这几个节点就是兄弟节点。例如h1和p就是兄弟节点,因为他们拥有相同的父节点body。

3、DOM节点信息

四、访问节点方式

1、getElementby系列

(1)getElementById(‘id属性值’)

(2)getElementsByTagName(‘标签名’)

(3)getElementsByClassName(‘class属性’)

(4)getElementsByName(‘name属性’)

2、querySelector 和 querySelectorAll 

假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:

3、层次关系

资源下载: