全国协议5人面授小班,企业级独立开发考核,转业者的IT软件工程师基地 登录/注册 | 如何报名
当前位置: 前端开发   >  什么是 DOM
admin · 更新于 2021-08-06

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:

<div>
  <p>我是一段文本</p>
  <a id="link" href="//hanma.com">我是一个超链接</a><div>
代码块
  • 1
  • 2
  • 3
  • 4

经过浏览器后,上面三个元素就都是 DOM 节点了。

这时候想修改 a 标签里的文案,就需要操作 DOM 节点来修改。

通过 getElementById 方法就可以根据 id 获取到一个 DOM 节点,所有 DOM 节点都具有这个方法。

在不知道某个元素的父级对象的时候,就可以使用 document.getElementById 来获取,意思是在 document 下根据 id 查找一个 DOM 节点。

实例演示
<div>
  <p>我是一段文本</p>
  <a id="link" href="//hanma.com">我是一个超链接</a><div><script>
  var aEle = document.getElementById('link');

  aEle.innerText = '前往汉码未来';</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
运行案例点击 "运行案例" 可查看在线运行效果

通过修改dom节点的innerText属性就可以改掉文案。

实际上这一段文案,就是一个文本节点。

其实具有id属性的dom节点不需要获取,也可以直接通过JavaScript访问,如id为container的元素,就可以直接在JavaScript中使用container访问。

因为具有id的节点会以id为属性名,作为window的属性存在,值就是这个DOM节点。

但通常不建议这么做,因为他人阅读代码的时候可能会找不到声明的地方,二是名字被固定了。

3. 小结

DOM 是一套标准,其定义了怎么操作 HTML 元素,浏览器则根据 DOM 标准实现了一系列的接口提供给前端开发者用 JavaScript 调用。

DOM 提供了前端开发者与页面元素交互的能力,如果失去了 DOM 接口,JavaScirpt 就无法参与网页的编写了。


为什么选择汉码未来