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、层次关系