前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

栏目: 编程语言 · XML · 发布时间: 5年前

内容简介:前端最基础的就是前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

前端最基础的就是 HTML+CSS+Javascript 。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂( HTML/CSS/JS ),本着提升技术水平,打牢基础知识的中心思想,我们开课啦( 每周四 )。

前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

今天讲什么?

  1. 什么是 DOM ?
  2. DOM 文档对象模型
  3. HTML 元素接口
  4. DOM 元素继承

什么是 DOM ?

DOM 通常上来讲,我们可以理解为 用 JS 操作 HTML 的 API 或者说 JS 和 HTML 中间的处理器适配器

文档对象模型 (DOM)是 HTML 和 XML 文档的编程接口

文档对象模型 (DOM)将 web 页面与到脚本或编程语言连接起来。

通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。

DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。

DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。

文档对象模型 (DOM) - mdn

DOM 文档对象模型

圈起来的是比较常用的接口。

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

DOM 接口测试地址

DOM 接口 Attr

用来表示一个 DOM元素的 属性

大多数场景你可能会直接通过字符串的方式获取属性值( Element.getAttribute('name') )。

其实还有( Element.getAttributeNode() )返回Attr类型。

目前 Attr接口 继承于 Node接口。DOM4 级别上会移出,所以尽量不要使用 Node接口上的属性

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

DOM 接口 Element

非常通用的基类,所有 Document 对象下的对象都继承它

Element 接口继承 Node 接口

DOM 接口 Comment

Comment 接口代表标签(markup)之间的文本符号(textual notations)。尽管它通常不会显示出来,但是在查看源码时可以看到它们。在 HTML 和 XML 里,注释(Comments)为 '<!--' 和 '-->' 之间的内容。在 XML 里,注释中不能出现字符序列 '--'。

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

DOM 接口 Event

Event 接口表示在 DOM 中发生的事件

  1. 用户生成的(例如鼠标 click 或键盘 keydown 事件)
  2. 由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)

其下还有很多子类

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

  1. CustomEvent

    CustomEvent 事件是由程序创建的,可以有任意自定义功能的事件。

    比如说我们模拟 click 操作

    document.querySelector('button').dispatchEvent(new CustomEvent('click'))

DOM 接口 Range

表示选区中包含的 节点文本节点的文档片段

  1. document.createRange 方法创建
  2. Selection 对象的 getRangeAt 方法取得( document.getSelection().getRangeAt(0) )。
    前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)
  3. 用构造函数 Range() 创建

还是在做一个聊天框功能的时候,使用这个去重置焦点

DOM 接口 Document

Document接口表示任何在浏览器中已经加载好的网页,并作为一个入口去操作网页内容(也就是DOM tree)。

DOM tree包括像 <body><head> 等元素。提供了全局操作 document 的功能。

Document.scrollingElement
Document.visibilityState
Document.hidden
Document.documentElement

其实功能还有很多,感兴趣的可以点标题看看

HTML 元素接口

针对具体的 HTML 元素,还有对应的接口,比如 input 会有对应的 valuerequired 等属性

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

HTMLVideoElement

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

DOM 元素继承

具体继承方式如下。根据规范,不同的类型继承了不同的属性。不过一般来说 EventTargetNodeElement 都继承了

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

微信公众号:前端linong

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)


以上所述就是小编给大家介绍的《前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Never Lost Again

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》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具