与前端训练营的日子 --Week13

SamGo

关注

发布于: 2021 年 01 月 25 日

这一周终于把前端从 JavaScript->CSS->HTML 学了一遍，别人是重学，我是认真学第一遍🤣，其中还做了一个 toy-browser，了解了浏览器的工作流程。下周开始组件化的学习，转眼间，课程剩下不多了。

HTML 语法

SGML 是一种古老的标记语言，而 HTML 是 SGML 的子集，所以 HTML 遵循 SGML 的基本语法。

标签语法

开始标签：<tagname>
带属性的开始标签： <tagname attributename="attributevalue">
结束标签：</tagname>
自闭合标签：<tagname />

HTML 还有很多语义化的标签，可以参考HTML 语义：如何运用语义类标签来呈现 Wiki 网页？

文本语法

普通文本
CDATA 文件节点
在 CDATA 节点内，不需要考虑多数的转义情况

DTD（Document Type Definition）

DTD，全称Document Type Defination(文档类型定义)，SGML 通过 DTD 来定义每一种文档类型。在 HTML4.01 时代，有三种 DTD，分别是严格模式、过渡模式、frameset 模式。而到了 HTML5 时代，就放弃了这些复杂有没有多大实际作用的 DTD，采用一个简单的 DTD，<!DOCTYPE html>

Extensible HTML version 1.0 Strict DTD

这是与 HTML4 相同，符合 SGML 规范的 DTDxi

浏览器 API

DOM API

DOM 是对 HTML 所描述的文档的一个抽象

DOM API 大致分为四部分:

节点：DOM 树形结构中的节点相关 API
事件：触发和监听事件相关 API
Range：操作文字范围相关 API
遍历：遍历 DOM 需要的 API

节点

Node 是 DOM 树继承关系的根节点，它定义了 DOM 节点在 DOM 树上的操作。上图展示了各种子节点，Element分成HTMLElement和其他(SVGElement、MathMLElement 等)，所以平时常用的元素其实是HTMLElement是一部分Element。

节点里的导航类操作

<!-- Node -->• parentNode • childNodes • firstChild• lastChild• nextSibling• previousSibling<!-- Element -->• parentElement• children• firstElementChild• lastElementChild• nextElementSibling• previousElementSibling

复制代码

其中parentNode与parentElement是相同的。

节点里的修改操作

• appendChild • insertBefore • removeChild • replaceChild

复制代码

节点里的高级操作

• compareDocumentPosition: 是一个用于比较两个节点中关系的函数。• contains: 检查一个节点是否包含另一个节点的函数• isEqualNode: 检查两个节点是否完全相同。• isSameNode: 检查两个节点是否是同一个节点，实际上在JavaScript中可以用“===”代替，有可能用于处理不同语言的对象比较。• cloneNode: 复制一个节点，如果传入参数 true，则会连同子元素 做深拷贝。

复制代码

事件

这个 API 相对简单，可以参考EventTarget.addEventListener(MDN)

RangeAPI

这 API 可以对元素进行更细致的操作，而且性能高效。可以说是对 DOM 树操作的万能 API、

• range.setStartBefore • range.setEndBefore • range.setStartAfter• range.setEndAfter• range.selectNode• range.selectNodeContents

复制代码

遍历 API

在 DOM API 中，提供了 NodeIterator 和 TreeWalker 用来遍历 DOM 树。相比直接用属性来遍历，NodeIterator 和 TreeWalker 提供了过滤功能，而且还可以把属性节点也包含在遍历之内。

CSSOM

对 CSS 文档的一个抽象就是 CSSOM，CSS 的一切 API 也是需要通过document.styleSheets去访问的。window.getComputedStyle(element, pseudoElement);是一个重要的的 API，既可以获取计算后的元素属性，还可以获取伪元素的一些属性

CSSOM View 部分的 API

<!-- Window -->• window.innerHeight, window.innerWidth• window.devicePixelRatio• window.screen• scrollX • scrollY• scroll(x, y)• scrollBy(x, y)
<!-- Scroll -->• scrollTop• scrollLeft• scrollWidth• scrollHeight• scroll(x, y)• scrollBy(x, y)• scrollIntoView()
<!-- Layout -->• getClientRects()• getBoundingClientRect()