《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树更精细的控制。