章节索引 :

DOM 和 JavaScript 的关系

DOM 与 JavaScript 是分离的。

DOM 有自己的一套标准,JavaScript 也有自己的一套标准。

JavaScript 是对标准的实现,为一种语言,而 DOM 标准定义了一系列的接口,由此可以看出,他们两者是可以毫不相干的。

但是在 Web 开发中,页面内容的展示全部通过浏览器解析展现,JavaScript 想动态的修改页面,就必须由浏览器提供一些方法,交给开发者来操作页面上的元素,因为 JavaScript 本身是没有操作这些元素的能力的。

浏览器承担了实现与暴露 DOM 接口的工作,根据标准实现一系列方法,随后暴露给开发者使用。

document 对象,表示当前的页面,也可以理解成根节点,JavaScript本身是没有这个全局对象的。

可以通过遍历 document 对象的属性,来观察一个 DOM 节点都有些什么属性和方法。

for (var i in document) {
  console.log(i, document[i])
}

一个节点的属性非常多,包括许多事件、子节点、操作节点的方法等。

浏览器通过暴露这些 DOM 相关的内容给开发者,开发者通过 JavaScript 进行操作。

对浏览器而言,document 实际上不是最顶层的节点,再向上还有 window ,这一点可以在事件相关的章节体现。

图片描述

小结

JavaScript 和 DOM 本身是可以没有关系的,但是开发者需要操作 DOM ,浏览器实现了对应的方法,暴露给开发者,开发者使用 JavaScript 来调用以达到操作 DOM 的目的。

前置知识
什么是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 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源