内容简介:前端最基础的就是前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。
前端最基础的就是 HTML+CSS+Javascript
。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂( HTML/CSS/JS
),本着提升技术水平,打牢基础知识的中心思想,我们开课啦( 每周四 )。
前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。
今天讲什么?
- 什么是 DOM ?
- DOM 文档对象模型
- HTML 元素接口
- DOM 元素继承
什么是 DOM ?
DOM
通常上来讲,我们可以理解为 用 JS 操作 HTML 的 API 或者说 JS 和 HTML 中间的处理器适配器 。
文档对象模型 (DOM)是 HTML 和 XML 文档的编程接口
文档对象模型 (DOM)将 web 页面与到脚本或编程语言连接起来。
通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。
DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。
DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。
文档对象模型 (DOM) - mdnDOM 文档对象模型
圈起来的是比较常用的接口。
DOM 接口 Attr
用来表示一个 DOM元素的 属性 。
大多数场景你可能会直接通过字符串的方式获取属性值( Element.getAttribute('name')
)。
其实还有( Element.getAttributeNode()
)返回Attr类型。
目前 Attr接口 继承于 Node接口。DOM4 级别上会移出,所以尽量不要使用 Node接口上的属性
DOM 接口 Element
非常通用的基类,所有 Document
对象下的对象都继承它 。
Element
接口继承 Node
接口
DOM 接口 Comment
Comment
接口代表标签(markup)之间的文本符号(textual notations)。尽管它通常不会显示出来,但是在查看源码时可以看到它们。在 HTML 和 XML 里,注释(Comments)为 '<!--' 和 '-->' 之间的内容。在 XML 里,注释中不能出现字符序列 '--'。
DOM 接口 Event
Event 接口表示在 DOM 中发生的事件
- 用户生成的(例如鼠标
click
或键盘keydown
事件) - 由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)
-
CustomEvent
事件是由程序创建的,可以有任意自定义功能的事件。比如说我们模拟
click
操作document.querySelector('button').dispatchEvent(new CustomEvent('click'))
DOM 接口 Range
表示选区中包含的 节点 和 文本节点的文档片段 。
- 用
document.createRange
方法创建 - 用
Selection
对象的getRangeAt
方法取得(document.getSelection().getRangeAt(0)
)。
- 用构造函数
Range()
创建
还是在做一个聊天框功能的时候,使用这个去重置焦点
DOM 接口 Document
Document接口表示任何在浏览器中已经加载好的网页,并作为一个入口去操作网页内容(也就是DOM tree)。
DOM tree包括像 <body>
、 <head>
等元素。提供了全局操作 document
的功能。
Document.scrollingElement Document.visibilityState Document.hidden Document.documentElement
其实功能还有很多,感兴趣的可以点标题看看
HTML 元素接口
针对具体的 HTML 元素,还有对应的接口,比如 input
会有对应的 value
, required
等属性
HTMLVideoElement
DOM 元素继承
具体继承方式如下。根据规范,不同的类型继承了不同的属性。不过一般来说 EventTarget
、 Node
、 Element
都继承了
微信公众号:前端linong
以上所述就是小编给大家介绍的《前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端面试之盒模型
- 美菜无线前端架构模型2018
- 前端快速创建数据模型方法实现
- 055.Python前端Django模型ORM
- 前端每周清单:大前端技术生命周期模型;WWDC 发布 Safari 11;面向生产环境的前端性能优化
- 057.Python前端Django模型ORM多表查询
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Never Lost Again
[美] Bill Kilday / HarperBusiness / 2018-5-29 / USD 8.00
As enlightening as The Facebook Effect, Elon Musk, and Chaos Monkeys—the compelling, behind-the-scenes story of the creation of one of the most essential applications ever devised, and the rag-tag tea......一起来看看 《Never Lost Again》 这本书的介绍吧!