Js DOM2 和 DOM3

《JavaScript高级程序设计》读书笔记

DOM1级主要定义的是HTML和XML的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力。

Node.isEqualNode(otherNode)

接收一个节点参数。判断两个节点是否相等。节点相同，意味着引用同一对象；节点相等，意味着节点类型相同，拥有相等的属性，而且attributes 和 childNodes 相等。

let div1 = document.createElement("div");
div1.setAttribute("class", "box");

let div2 = document.createElement("div");
div2.setAttribute("class", "box");

console.log(div1.isEqualNode(div2));    // true

HTMLIFrameElement.contentDocument

这个属性包含代表内嵌窗口中内容的document 对象的指针。

var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;

iframeDocument.body.style.backgroundColor = "blue";

样式

3种定义方法：外部样式表、文档样式表和元素特定样式。

存取元素样式

HTMLElement.style

style 属性是CSSStyleDeclaration 类型的实例。这些属性在js 中以驼峰大小形式，除float是js 的保留字，用cssFloat。

let myDiv = document.getElementById("myDiv");
// 设置
myDiv.style.backgroundColor = "red";
// 获取
console.log(myDiv.style.backgroundColor);

1. DOM 样式属性和方法

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

2. 计算样式getComputedStyle

包含从其他样式表层叠继承的同样影响元素的样式信息。接收两个参数：要取得计算样式的元素和伪元素字符串。返回一个CSSStyleDeclaration 对象。

document.defaultView.getComputedStyle(myDiv, null);

操作样式表

document.styleSheets

只读属性，返回一个由 CSSStyleSheet（表示CSS样式表） 对象组成的数组。

CSSStyleSheet 属性和方法：

• StyleSheet.disabled，返回Boolean (en-US)表示当前样式表是否可用。
• StyleSheet.href，只读，返回 DOMString 表示样式表的位置。
• StyleSheet.media， 只读，支持的媒体类型集合
• StyleSheet.ownerNode (en-US) 只读，返回 Node 将此样式表与当前文档相关联。
• StyleSheet.parentStyleSheet (en-US) 只读，返回 StyleSheet 如果有的话; 返回 null 如果没有。
• StyleSheet.title 只读，返回ownerNode 的title 属性
• StyleSheet.type (en-US)只读，返回 DOMString 表示当前样式表的语言
• cssRules 当前样式表包含的样式规则集合
• ownerRule 如果样式表使用 @import 导入的，则指向导入规则；否则为null
• deleteRule(index) 在指定位置删除cssRules 中的规则
• insertRule(rule, index) 在指定位置项cssRule 中插入规则

元素尺寸

1. 偏移尺寸

元素在屏幕上占用的所有视觉空间

• offsetHeight
• offsetLeft
• offsetTop
• offsetWeight
• offsetParent 返回距离该子元素最近的进行过定位的父元素

 2. 客户端尺寸

元素内容及其内边距所占用的空间

• clientWidth
• clientHeight

3. 滚动尺寸 

元素内容滚动距离信息

• scrollHeight
• scrollLeft
• scrollTop
• scrollWidth

4. 确定元素尺寸

Element.getBoundingClientRect()：返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。

遍历

NodeIterator

表示一个遍历 DOM 子树中节点列表的成员的迭代器。节点将按照文档顺序返回。

let nodeIterator = document.createNodeIterator(root, whatToShow, filter);

• root，作为遍历根节点的节点
• whatToShow，数值代码，表示应该访问哪些节点
• filter，NodeFilter 对象会函数，表示是否接收或跳过特定节点

whatToShow参数是一个位掩码：

NodeFilter.SHOW_ALL	显示所有节点
NodeFilter.SHOW_ELEMENT	元素节点
NodeFilter.SHOW_ATTRIBUTE	属性节点
NodeFilter.SHOW_TEXT	文本节点
NodeFilter.SHOW_CDATA_SECTION	CData区块节点
NodeFilter.SHOW_DOCUMENT_FRAGMENT	实体引用节点
NodeFilter.SHOW_ENTITY	实体节点
NodeFilter.SHOW_PROCESSING_INSTRUCTION	处理指令节点
NodeFilter.SHOW_COMMENT	注释节点
NodeFilter.SHOW_DOCUMENT	文档节点
NodeFilter.SHOW_DOCUMENT_TYPE	文档类型节点
NodeFilter.SHOW_DOCUMENT_FRAGMENT	文档片段节点
NodeFilter.SHOW_NOTATION	记号节点

这些值除了NodeFilter.SHOW_ALL之外，都可以组合使用。比如：

let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

filter 参数可以用来定义一个NodeFilter对象或一个作为节点过滤器的函数。如下实现只接受<p>元素的过滤器：

// NodeFilter 对象
let filter = {
    // 只有这一个方法
    acceptNode(node) {
        return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
    }
};

// 函数形式
let filter2 = funciton(node) {
    return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
};

NodeIterator 方法

• nextNode() 在DOM 子树中以深度优先方式前进一步
• previousNode() 在遍历中后退一步

let div = document.getElementById("div1");
let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
let node = iterator.nextNode();
while(node !== null) {
    console.log(node.tagName);
    node = iterator.nextNode();
}

TreeWalker

是NodeIterator 的高级版。通过createTreeWalker() 方法创建，参数与上面一样。方法：

• parentNode()
• firstChild()
• lastChild()
• nextSibling()
• previousSibling()
• nextNode()
• previousNode()

节点过滤器（filter）另外在原来基础上新增了NodeFilter.FILTER_REJECT，表示跳过该节点以及该节点的整个子树。NodeFilter.FILTER_SKIP 表示跳过节点，访问子树中的下一个节点。

有一个名为currentNode 属性，表示遍历过程中上一次返回的节点。

范围

range = document.createRange();

这个新创建的范围对象是与创建它的文档关联，不能在其他文档追踪使用。可以使用这个范围在后台选择文档特定的部分。可以对范围的内容执行一条操作，从而实现对底层DOM树更精细的控制。