前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。我们已经基本掌握了常规的语法和语义，以及基本的使用方法。下面我们就深入了解一下里面的原理。你今天在说什么？什么是DOM？DOM文档对象模型HTML元素接口DOM元素继承什么是DOM？一般来说，DOM可以理解为一种用JS操作HTML的API，或者是JS和HTML之间的处理器适配器。文档对象模型(DOM)是HTML和XML文档的编程接口文档对象模型(DOM)将网页连接到脚本或编程语言。通常指的是JavaScript，但将HTML、SVG或XML文档建模为对象并不是JavaScript语言的一部分。DOM模型使用逻辑树来表示文档。树的每个分支的终点是一个节点，每个节点包含对象。DOM方法允许您以特定方式操作此树，使用这些方法您可以更改文档的结构、样式或内容。节点可以与事件处理程序相关联，一旦事件被触发，这些事件处理程序就会被执行。文档对象模型(DOM)-mdnDOM文档对象模型围绕着更常用的接口。DOM接口测试地址DOM接口Attr用于表示一个DOM元素的属性。在大多数场景下，您可能会直接通过字符串（Element.getAttribute('name')）获取属性值。其实还有返回Attr类型的(Element.getAttributeNode())。目前Attr接口继承自Node接口。它会在DOM4级别被移除，所以尽量不要使用Node接口上的属性DOM接口Element是一个很常见的基类，Document对象下的所有对象都继承了它。Element接口继承Node接口DOM接口CommentComment接口表示标签（标记）之间的文本符号。虽然平时不会出现，但是在查看源码的时候可以看到。在HTML和XML中，注释位于“”之间。在XML中，字符序列'--'不能出现在注释中。DOM接口EventEvent接口表示发生在DOM中的事件User-generated（例如鼠标点击或键盘按键事件）API生成的事件（例如表示动画已运行完毕、视频已暂停等的事件）它下面有很多子类CustomEventCustomEvent事件是由程序创建的，可以有任何自定义的功能。比如我们模拟点击操作document.querySelector('button').dispatchEvent(newCustomEvent('click'))DOM接口Range表示选择中包含的节点和文本节点的文档片段。使用document.createRange方法创建并使用Selection对象的getRangeAt方法获取(document.getSelection().getRangeAt(0))。使用构造函数Range()创建或做一个聊天框功能，用它来重置焦点DOM接口DocumentDocument接口代表浏览器中已经加载的任何网页，作为操作网页内容的入口（即，DOM树）。DOM树包括
、等元素，提供全局操作文档的功能。Document.scrollingElement返回真正的滚动对象（为了PC/M兼容）Document.visibilityState当前页面状态Document.hidden当前页面是否隐藏Document.documentElement获取根元素其实有很多函数。感兴趣的可以点击标题查看HTML元素接口，针对具体的HTML元素，都有相应的接口。比如input会有value、required等对应的属性。HTMLVideoElementDOM元素继承具体继承方式如下。根据规范，不同的类型继承不同的属性。不过一般元素会继承EventTarget、Node、Element微信公众号：前端linong初级阶段文章目录前端实训-初级阶段（17）-数据存储（cookie、session、stroage）前端实训-初级stage(13)-正则表达式Type前端训练-初级Stage(13)-Classes,Modules,Inheritanceoperator,statement)前端训练-初级阶段(13,18)前端训练-初级阶段(9-12)前端训练-初级阶段(5-8)前端训练-初级阶段(1-4)中级文章目录前端训练-中级阶段(2)-事件(event)事件冒泡、捕获-(2019-06-20期)数据前端训练目录,前端训练规划,前端训练计划