沉没

0%

学习笔记 2020 11 13

发表于 分类于
本文字数： 3.8k 阅读时长 ≈ 3 分钟

学习笔记 2020-11-13

JavaScript 高级程序设计(第4版) 阅读记录

DOM2 和 DOM3

DOM 的演进

其他变化

  1. Node 的变化

    DOM3 新增了两个用于比较节点的方法：

    • isSameNode()
    • isEqualNode()

    这两个方法都接收一个节点参数。如果这个节点与参考节点相同或相等，则返回 true。节点相同，意味着引用同一个对象。节点相等，意味着节点类型相同，拥有相等的属性。

    DOM3 也增加了给 DOM 节点附加额外数据的方法。

    • setUserData()，接收 3 个参数：键、值、处理函数，用于给节点追加数据。
    • getUserData()，获取追加的信息。

    setUserData() 的处理函数会在包含数据的节点被复制、删除、重命名或导入其他文档的时候执行。处理函数接收 5 个参数：表示操作类型的数值、数据的键、数据的值、源节点和目标节点。

  2. 内嵌窗格的变化

    DOM2 HTML 给 HTMLFrameElement 类型新增了一个属性，叫 contentDocument。这个属性包含代表子内嵌窗格中内容的 document 对象的指针。

    contentDocument 属性是 Document 的实例，拥有所有文档属性和方法。还有一个属性 contentWindow，返回相应窗格的 window 对象。

    跨域访问会抛出错误。

样式

存取元素样式

任何支持 style 属性的 HTML 元素在 JS 中都会有一个对应的 style 属性。这个 style 属性是 CSSStyleDeclaration 类型的实例，其中包含通过 HTML style 属性为元素设置的所有样式信息，但不包含通过层叠机制从文档样式和外部样式中继承来的样式。

float 属性是 js 中的保留字，不能用作属性名，应写作 cssFloat 。

通过 style 属性设置的值也可以通过 style 对象获取。

  1. DOM 样式属性和方法

    DOM2 Style 规范也在 style 对象上定义了一些属性和方法。

    • cssText，包含 style 属性中的 CSS 代码。
    • length，应用给元素的 CSS 属性数量。
    • parentRule，表示 CSS 信息的 CSSRule 对象。
    • getPropertyCSSValue(propertyName)，返回包含 CSS 属性 propertyName 值的 CSSValue 对象，已废弃。
    • getPropertyPriority(propertyName)，如果 CSS 属性 propertyName 使用了 !important，则返回”important”，否则返回空字符串。
    • getPropertyValue(propertyName)，返回属性 propertyName 的字符串值。
    • item(index)，返回索引为 index 的 CSS 属性名。
    • removeProperty(propertyName)，从样式中删除 CSS 属性 propertyName。
    • setProperty(propertyName, value, priority)，设置 CSS 属性 propertyName 的值为value，priority 是 “important” 或空字符串。

  2. 计算样式

    DOM2 Style 在 document.defaultView 上增加了 getComputedStyle() 方法。接收 2 个参数，要取得计算样式的元素和伪元素字符串。可以取得该元素的正确样式，包括样式表。在所有浏览器中计算样式都是只读的，还包含了浏览器内部样式表中的信息。

操作样式表

CSSStyleSheet 类型表示 CSS 样式表，包括使用 <link> 元素和通过 <style> 元素定义的样式表。这两个元素本身是 HTMLLinkElement 和 HTMLStyleElement 。

CSSStyleSheet 类型继承 StyleSheet ，后者可用作非 CSS 样式表的基类。以下是 CSSStyleSheet 从 StyleSheet 继承的属性。

  • disabled ，表示样式表是否被禁用。
  • href，如果是使用 <link> 包含的样式表，则返回样式表的 URL，否则返回 null。
  • media，样式表支持的媒体类型集合，这个集合有一个 length 属性和一个 item() 方法。
  • ownerNode，拥有指向当前样式表的节点。如果样式表是通过 @import 被包含在另一个样式表中，这个属性值是 null 。
  • parentStyleSheet，如果当前样式表是通过@import 被包含在另一个样式表中，则这个属性指向导入它的样式表。
  • title，ownerNode 的 title 属性。
  • type，字符串，表示样式表的类型。对 CSS 样式表来说，就是”text/css”。

以上除了 disabled 其余为只读属性。除了以上继承的属性，CSSStyleSheet 类型还支持以下属性和方法。

  • cssRules，当前样式表包含的样式规则的集合。
  • ownerRule，如果样式表是使用@import 导入的，则指向导入规则；否则为 null。
  • deleteRule(index)，在指定位置删除 cssRules 中的规则。
  • insertRule(rule, index)，在指定位置向 cssRules 中插入规则。

document.styleSheets 表示文档中可用的样式表哦集合。这个集合的 length 属性保存着文档中样式表的数量。

通过 <link> 或 <style> 元素也可以直接获取 CSSStyleSheet 对象。DOM 在这两个元素上暴露了 sheet 属性，其中包含对应的 CSSStyleSheet 对象。

  1. CSS 规则

    CSSRule 类型表示样式表中的一条规则。它也是一个通用基类，很多类型都继承它。最常用的是表示样式信息的 CSSStyleRule ，以下是 CSSStyleRule 对象上可用的属性。

    • cssText，返回整条规则的文本。这里的文本可能与样式表中实际的文本不一样，因为浏览器内部处理样式表的方式也不一样。Safari 始终会把所有字母都转换为小写。
    • parentRule，如果这条规则被其他规则（如@media）包含，则指向包含规则，否则就是 null。
    • parentStyleSheet，包含当前规则的样式表。
    • selectorText，返回规则的选择符文本。这里的文本可能与样式表中实际的文本不一样，因为浏览器内部处理样式表的方式也不一样。这个属性在 Firefox、Safari、Chrome 和 IE 中是只读的，在 Opera 中是可以修改的。
    • style，返回 CSSStyleDeclaration 对象，可以设置和获取当前规则中的样式。
    • type，数值常量，表示规则类型。对于样式规则，它始终为 1。

  2. 创建规则

    可以使用 insertRule() 方法向样式表中添加新规则。接收两个参数，规则的文本和表示插入位置的索引值。

  3. 删除规则

    可以使用 deleteRule() 方法删除规则，接收一个参数，要删除规则的索引。

元素尺寸

以下介绍的属性和方法不是 DOM2 style 规范中定义的。

  1. 偏移尺寸

    元素在页面上的视觉空间由其高度和宽度决定，包括所有内边距、滚动条和边框。以下 4 个属性用于取得元素的偏移尺寸：

    • offsetHeight，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度和上、下边框的高度。
    • offsetLeft，元素左边框外侧距离包含元素左边框内测的像素数。
    • offsetTop，元素上边框外侧距离包括元素上边框内测的像素数。
    • offsetWidth，元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度和左、右边框的宽度。

    offsetLeft 和 offsetTop 是相对于包含元素的，包含元素保存在 offsetParent 属性中。

    image-20201113171012849

    要确定一个元素在页面中的偏移量，可以把它的 offsetLeft 和 offsetTop 属性分别与 offsetParent 的相同属性相加，一直加到根元素。

    function getElementLeft(element) {
  let actualLeft = element.offsetLeft;
  let current = element.offsetParent;
  while (current !== null) {
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
  }
  return actualLeft;
}
function getElementTop(element) {
  let actualTop = element.offsetTop;
  let current = element.offsetParent;
  while (current !== null) {
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }
  return actualTop;
}

    所有偏移尺寸属性都是只读的，每次访问都会重新计算。

  2. 客户端尺寸

    元素的客户端尺寸包含元素内容及其内边距所占用的空间。客户端尺寸只有两个相关属性： clientWidth 和 clientHeight 。clientWdith 是内容区宽度加左、右内边距宽度。clientHeight 是内容区高度加上、下内边距高度。

    image-20201113171423440

    客户端尺寸实际上就是元素内部的空间，因此不包含滚动条占用的空间。这两个属性也是只读的，每次访问都会重新计算。