摘要：文档对象模型是和文档的编程接口文档对象模型将页面与到脚本或编程语言连接起来。通常是指，但将或文档建模为对象并不是语言的一部分。文档对象模型文档对象模型圈起来的是比较常用的接口。目前接口继承于接口。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前面我们已经基本掌握常规的语法语义，以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。
今天讲什么？什么是 DOM ？
DOM 文档对象模型
HTML 元素接口
DOM 元素继承
什么是 DOM ？DOM 通常上来讲，我们可以理解为用 JS 操作 HTML 的 API或者说 JS 和 HTML 中间的处理器适配器。
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口DOM 文档对象模型
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。
通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。
DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。
DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
文档对象模型 (DOM) - mdn
圈起来的是比较常用的接口。
DOM 接口测试地址
DOM 接口 Attr用来表示一个 DOM元素的属性。
大多数场景你可能会直接通过字符串的方式获取属性值（Element.getAttribute("name")）。
其实还有（Element.getAttributeNode()）返回Attr类型。
目前 Attr接口 继承于 Node接口。DOM4 级别上会移出，所以尽量不要使用 Node接口上的属性
非常通用的基类，所有 Document对象下的对象都继承它。
Element接口继承 Node接口
Comment 接口代表标签（markup）之间的文本符号（textual notations）。尽管它通常不会显示出来，但是在查看源码时可以看到它们。在 HTML 和 XML 里，注释（Comments）为 "" 之间的内容。在 XML 里，注释中不能出现字符序列 "--"。
DOM 接口 EventEvent 接口表示在 DOM 中发生的事件
用户生成的（例如鼠标 click 或键盘 keydown 事件）
由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等）
其下还有很多子类
CustomEvent
CustomEvent 事件是由程序创建的，可以有任意自定义功能的事件。
比如说我们模拟 click 操作
document.querySelector("button").dispatchEvent(new CustomEvent("click"))
表示选区中包含的节点和文本节点的文档片段。
用 document.createRange 方法创建
用 Selection对象的 getRangeAt 方法取得(document.getSelection().getRangeAt(0))。
用构造函数 Range() 创建
还是在做一个聊天框功能的时候，使用这个去重置焦点
DOM 接口 DocumentDocument接口表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）。
DOM tree包括像 、 等元素。提供了全局操作 document 的功能。
Document.scrollingElement 返回真实的滚动对象（用于 PC/M 兼容）
Document.visibilityState 当前页面状态
Document.hidden 当前页面是否隐藏
Document.documentElement 获取根元素
其实功能还有很多，感兴趣的可以点标题看看
HTML 元素接口针对具体的 HTML 元素，还有对应的接口，比如 input 会有对应的 value，required 等属性
具体继承方式如下。根据规范，不同的类型继承了不同的属性。不过一般来说 EventTarget、Node、Element 都继承了
前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）
前端培训-初级阶段（13） - 正则表达式
前端培训-初级阶段（13） - 类、模块、继承
前端培训-初级阶段（13） - ECMAScript （内置对象、函数）
前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
前端培训-初级阶段（13、18）
前端培训-初级阶段（9 -12）
前端培训-初级阶段（5 - 8）
前端培训-初级阶段（1 - 4）
中级阶段文章目录前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
资料前端培训目录、前端培训规划、前端培训计划
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104867.html
摘要：文档对象模型是和文档的编程接口文档对象模型将页面与到脚本或编程语言连接起来。通常是指，但将或文档建模为对象并不是语言的一部分。文档对象模型文档对象模型圈起来的是比较常用的接口。目前接口继承于接口。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平...
摘要：文档对象模型是和文档的编程接口文档对象模型将页面与到脚本或编程语言连接起来。通常是指，但将或文档建模为对象并不是语言的一部分。文档对象模型文档对象模型圈起来的是比较常用的接口。目前接口继承于接口。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平...
摘要：提供了与浏览器窗口进行交互的对象标签之间不会共享。用于描述当前浏览器的历史记录。表示窗口是否以全屏显示。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 前面我们已经基本掌握常规的语法语义，以及基...
摘要：提供了与浏览器窗口进行交互的对象标签之间不会共享。用于描述当前浏览器的历史记录。表示窗口是否以全屏显示。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 前面我们已经基本掌握常规的语法语义，以及基...
摘要：同源策略是什么同源策略是浏览器的一个安全功能，不同源的数据禁止访问。或许你可以说验证，在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的，防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思...
阅读 2631·2021-10-26 09:48
阅读 1475·2021-09-26 09:55
阅读 1380·2021-09-22 15:22
阅读 3691·2021-09-22 15:05
阅读 458·2021-09-06 15:02
阅读 2446·2019-08-30 15:52
阅读 1990·2019-08-29 18:38
阅读 2616·2019-08-28 18:05
