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

linong

前端最基础的就是 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 文档对象模型

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

DOM 接口测试地址

DOM 接口 Attr

用来表示一个 DOM元素的属性
大多数场景你可能会直接通过字符串的方式获取属性值(Element.getAttribute('name'))。
其实还有(Element.getAttributeNode())返回Attr类型。
目前 Attr接口 继承于 Node接口。DOM4 级别上会移出,所以尽量不要使用 Node接口上的属性
clipboard.png

DOM 接口 Element

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

DOM 接口 Comment

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

clipboard.png

DOM 接口 Event

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

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

其下还有很多子类
clipboard.png

  1. CustomEvent
    CustomEvent 事件是由程序创建的,可以有任意自定义功能的事件。
    比如说我们模拟 click 操作
    document.querySelector('button').dispatchEvent(new CustomEvent('click'))

DOM 接口 Range

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

  1. document.createRange 方法创建
  2. Selection对象的 getRangeAt 方法取得(document.getSelection().getRangeAt(0))。
    clipboard.png
  3. 用构造函数 Range() 创建

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

DOM 接口 Document

Document接口表示任何在浏览器中已经加载好的网页,并作为一个入口去操作网页内容(也就是DOM tree)。
DOM tree包括像 <body><head> 等元素。提供了全局操作 document 的功能。

  1. Document.scrollingElement 返回真实的滚动对象(用于 PC/M 兼容)
  2. Document.visibilityState 当前页面状态
  3. Document.hidden 当前页面是否隐藏
  4. Document.documentElement 获取根元素

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

HTML 元素接口

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

HTMLVideoElement

clipboard.png

DOM 元素继承

具体继承方式如下。根据规范,不同的类型继承了不同的属性。不过一般元素都会继承 EventTargetNodeElement
clipboard.png

微信公众号:前端linong

clipboard.png

初级阶段文章目录

  1. 前端培训-初级阶段(17) - 数据存储(cookie、session、stroage)
  2. 前端培训-初级阶段(13) - 正则表达式
  3. 前端培训-初级阶段(13) - 类、模块、继承
  4. 前端培训-初级阶段(13) - ECMAScript (内置对象、函数)
  5. 前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句)
  6. 前端培训-初级阶段(13、18)
  7. 前端培训-初级阶段(9 -12)
  8. 前端培训-初级阶段(5 - 8)
  9. 前端培训-初级阶段(1 - 4)

中级阶段文章目录

  1. 前端培训-中级阶段(2) - 事件(event) 事件冒泡、捕获 - (2019-06-20期)

资料

  1. 前端培训目录、前端培训规划、前端培训计划
阅读 1.8k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏