写点什么

与前端训练营的日子 --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
复制代码


其中parentNodeparentElement是相同的。


节点里的修改操作


• 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 中,提供了 NodeIteratorTreeWalker 用来遍历 DOM 树。相比直接用属性来遍历,NodeIteratorTreeWalker 提供了过滤功能,而且还可以把属性节点也包含在遍历之内。

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()
复制代码


本周学习内容


  • 重学 HTML

  • HTML 的定义:XML 与 SGML

  • HTML 标签语法

  • HTML 语法

  • 浏览器 API

  • DOM API

  • 事件 API

  • Range API

  • CSSOM 与 CSSOM View

  • 其他 API


参考资料


HTML 语义:div 和 span 不是够用了吗?

HTML 语义:如何运用语义类标签来呈现 Wiki 网页?

HTML 元信息类标签:你知道 head 里一共能写哪几种标签吗?

HTML 链接:除了 a 标签,还有哪些标签叫链接?

HTML 替换型元素:为什么 link 一个 CSS 要用 href,而引入 js 要用 src 呢?

HTML 语言:DTD 到底是什么?

HTML·ARIA:可访问性是只给盲人用的特性么?

浏览器 DOM:你知道 HTML 的节点有哪几种吗?

浏览器 CSSOM:如何获取一个元素的准确位置

浏览器事件:为什么会有捕获过程和冒泡过程?


用户头像

SamGo

关注

还未添加个人签名 2018.12.16 加入

iOS渣渣,Flutter练习生,极客大学在学🤣🤣

评论 (2 条评论)

发布
用户头像
厉害厉害👍
2021 年 01 月 25 日 07:42
回复
悄悄地写东西,被发现了🤣
2021 年 02 月 01 日 08:11
回复
没有更多了
与前端训练营的日子 --Week13