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

时间  2019-11-05
标签 前端 培训 中级 阶段 dom 文档 对象 模型 栏目 HTML 繁體版
原文   原文链接

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。html

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

今天讲什么？

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

什么是 DOM ？

DOM 一般上来说，咱们能够理解为用 JS 操做 HTML 的 API或者说 JS 和 HTML 中间的处理器适配器。node

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言链接起来。
一般是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并非 JavaScript 语言的一部分。
DOM模型用一个逻辑树来表示一个文档，树的每一个分支的终点都是一个节点(node)，每一个节点都包含着对象(objects)。
DOM的方法(methods)让你能够用特定方式操做这个树，用这些方法你能够改变文档的结构、样式或者内容。节点能够关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
文档对象模型 (DOM) - mdn

DOM 文档对象模型

圈起来的是比较经常使用的接口。
clipboard.pngweb

DOM 接口测试地址正则表达式

DOM 接口 Attr

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

DOM 接口 Element

很是通用的基类，全部 Document对象下的对象都继承它。
Element接口继承 Node接口segmentfault

DOM 接口 Comment

Comment 接口表明标签（markup）之间的文本符号（textual notations）。尽管它一般不会显示出来，可是在查看源码时能够看到它们。在 HTML 和 XML 里，注释（Comments）为 '<!--' 和 '-->' 之间的内容。在 XML 里，注释中不能出现字符序列 '--'。浏览器

clipboard.png

DOM 接口 Event

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

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

其下还有不少子类
clipboard.pngcookie

  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 会有对应的 value，required 等属性
clipboard.png

HTMLVideoElement

clipboard.png

DOM 元素继承

具体继承方式以下。根据规范，不一样的类型继承了不一样的属性。不过通常元素都会继承 EventTarget、Node、Element
clipboard.png

微信公众号：前端linong

clipboard.png

初级阶段文章目录

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

中级阶段文章目录

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

资料

  1. 前端培训目录、前端培训规划、前端培训计划
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程