什么是DOM 下载APP
章节索引 :

什么是 DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。(MDN)

DOM (Document Object Model,文档对象模型) 是 W3C 制定的访问、操作 HTML 和XML的标准。

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="//imooc.com">我是一个超链接</a>
<div>

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

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

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

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

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

  aEle.innerText = '前往慕课网';
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

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

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

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

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

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

3. 小结

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

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

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源