1. 理解 DOM
对于前端开发者,主要需要关心操作 HTML 的部分,即 HTML DOM 标准。
DOM 标准定义了如何去增加、删除、查询、修改HTML的元素。
实际上 HTML 只是一个带有格式的文本,经过浏览器解析后,会变成一颗树(因为 HTML 也是树形的),通常会叫他 DOM树
,根节点叫 文档节点(document)
,树上的每个节点就叫 DOM节点
。
DOM 标准提供了一系列方法对这些节点进行操作。
DOM 节点是契合HTML标准的,可以对其细分:
- 整个文档是一个文档节点
- HTML 元素内的文本是文本节点
- 每个 HTML 元素是元素节点
- 每个 HTML 属性是属性节点
- 注释为注释节点
如果没有 DOM ,JavaScript 也就在网页开发中就失去了活力。
2. 操作 DOM
通常前端开发者指的操作 DOM ,就是操作 DOM 节点。
如有以下结构的 HTML:
- 1
- 2
- 3
- 4
经过浏览器后,上面三个元素就都是 DOM 节点了。
这时候想修改 a 标签里的文案,就需要操作 DOM 节点来修改。
通过 getElementById
方法就可以根据 id 获取到一个 DOM 节点,所有 DOM 节点都具有这个方法。
在不知道某个元素的父级对象的时候,就可以使用 document.getElementById
来获取,意思是在 document
下根据 id 查找一个 DOM 节点。
通过修改dom节点的innerText
属性就可以改掉文案。
实际上这一段文案,就是一个文本节点。
3. 小结
DOM 是一套标准,其定义了怎么操作 HTML 元素,浏览器则根据 DOM 标准实现了一系列的接口提供给前端开发者用 JavaScript 调用。
DOM 提供了前端开发者与页面元素交互的能力,如果失去了 DOM 接口,JavaScirpt 就无法参与网页的编写了。