《JavaScript高级语言设计》(第三版)学习笔记(6)

DOM扩展

方法	含义
querySelector()	接受一个CSS选择符返回与该模式匹配的第一个元素，如果没有返回null
querySelectorAll()	接受CSS选择符返回一个NodeList的实例
matchesSelector()	接受CSS选择符，如果与调用该方法的元素相匹配返回true，否则返回false
childElementCount属性	返回子元素的个数
firstElementChild	返回第一个子元素
lastElementChild	指向最后一个子元素
previousElementSibling	指向前一个同辈元素
nextElementSibling	指向后一个后辈元素
document.getElementsByClassName()	传入class特性值返回包含的NodeList
classList	add(val)为元素的class特性添加val，cintains(val)判断元素的class中师傅包含val，remove(val)移除元素的class中的val，toggle(val)如果列表中已存在给定值，删除，如果不存在添加
document.activeElement	指向会引用DOM中当前获得了焦点的元素

HTMLDocument

属性和方法	含义
readyState	“loading”正在加载文档，”complete”已经加载完文档
document.compatMode	“CSS1Compat”标准模式，”BackCompat”混杂模式
document.head	引用文档元素
charset	字符集属性
innerHTML	返回与调用元素的所有子节点对应的HTML标记，赋值会根据指定值创建DOM树然后替换元素的原有子节点
outerHTML	与innerHTML基本相同
insertAdjacentHTML()	接受两个参数：插入位置和要插入的HTML文本，第一个参数必须为：1.”beforebegin”,在当前元素之前插入一个紧邻的同辈元素2”afterbegin”在当前元素之下插入一个新的子元素或在第一个子元素之前插入新的子元素3。”beforeend”在当前元素之下插入一个新的子元素或在最后一个子元素之后插入新的子元素4.”afterend”在当前元素之后插入一个紧邻的同辈元素
scrollIntoView()	传入true，调用该方法的元素在滚动浏览器时元素顶部与视口平行，传入false调用元素尽可能全部出现在视口中
contains()	测试某个元素是否为调用元素的后代，返回1表示无关，2之前，4之后，8包含，16被包含
innerText	读取值为子元素的文本拼接，赋值删除所有子节点插入文本
outerText	与innerText基本没区别
scrollIntoViewIfNeeded(flag)	当元素不可见时,传入true表示元素出现在视口中部
scrollBylines(lineCount)	将内容滚动指定行高
scrollByPages(pageCount)	将元素内容滚动指定页面高度

DOM2和DOM3

扩展DOM API满足操作XML的需求，提供更好的错误处理及特性检测

//是否支持
var supportsDOM2Core = document.implementation.hasFeature("Core", "2.0");
var supportsDOM3Core = document.implementation.hasFeature("Core", "3.0");
var supportsDOM2HTML = document.implementation.hasFeature("HTML", "2.0");
var supportsDOM2Views = document.implementation.hasFeature("Views", "2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML", "2.0");

DocumentType

属性	含义
publicId	文档声明中信息
systemId	文档声明中的信息
internalSubset	文档声明的额外定义

Document

属性或方法	含义
importNode()	与cloneNode()类似
defaultView	指向拥有给定文档的窗口

Node

属性和方法	含义
isSupporded()	确定当前节点具有什么能力

框架变化

属性和方法	含义
contentDocument	指向包含框架的文档对象

样式

//是否支持DOM2的css能力
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
//是否支持操作样式表
var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");

元素对应style属性，这个属性是CSSStyleDeclaration的实例包含HTML特性指定的所有样式的信息，不包含与外部样式表或嵌入样式表经层叠而来的样式，也就是说只包含自身的style属性，css的含-的样式名要转换为驼峰式才能访问，其中float为cssFloat(IE只支持styleFloat)，赋值改变样式
style的属性和方法

属性或方法	含义
cssText	css代码,通过该属性批量插入样式，重写整个style，以前的style会丢失
length	css属性数量
parentRule	css信息的cssRule对象
getPropertyCssValue(propertyName)	返回给定属性值的CSSValue对象,返回对象包含两个对象cssText指定属性字符串和cssValueType一个数值常量，表示类型P315第二行
getPropertyPriority(propertyName)	如果给定属性使用!important(给定属性优先)返回import，否则返回”“
getPropertyValue(propertyName)	返回给定属性的字符串值
item(index)	返回给定位置的CSS属性的名称
removeProperty(propertyname)	从样式表中删除给定样式
setProperty(propertyName,value,priority)	将给定属性设置为相应值，最后一个为优先标志

document.defaultView.getComputedStyle(元素对象，null)返回渲染后的CSS样式，也就是浏览器呈现的样式
IE中具有style的元素还有currentStyle属性这个属性是CSSStyleDeclaration的实例，是计算后的样式

操作样式表 CSSStyleSheet

表示和

function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);

cssRule
表时样式表中的每一条样式

属性和方法	含义
cssText	返回整条规则对应的文本
parentRule	如果当前规则是导入的规则，这个属性引用的就是导入规则
parentStyleSheet	当前规则所属的样式表
selectorText	房钱规则选择符文本
style	一个CSSStyleDeclaration,可通过设置和取得特定的样式表
type	值为1

div.box {
background-color: blue;
width: 100px;
height: 200px;
}

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
alert(rule.selectorText); //"div.box"
alert(rule.style.cssText); //完整的CSS 代码
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"

sheet.insertRule(“body { background-color: silver }”, 0); //DOM 方法

元素大小

属性	含义
offsetHeight	元素在垂直上方的控件大小
offsetWidth	元素水平方向大小
offsetLeft	元素的左外边框至包含元素的左边框之间的像素距离
offsetTop	元素的上外边框至包含元素的上内边框之间的像素距离
clientWidth	元素内容区宽度
clientHeight	元素内容区高度
scrollHeight	在没有滚动条的情况下,元素内容的总高度
scrollWidth	在没有滚动条的情况下,元素内容的总宽度
scrollLeft	被隐藏在内容区域左侧的像素数,用来设置改变元素滚动位置
scrollTop	被隐藏在内容区域上方的像素数,用来设置改变元素滚动位置

getBoundingClientRect()返回矩形对象有left，top，right和bottom，给出元素相对于视口位置

//跨浏览器
function getBoundingClientRect(element){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if (element.getBoundingClientRect){
if (typeof arguments.callee.offset != "number"){
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}

遍历

NodeIterator和TreeWalker
基于给定起点对DOM结构执行深度优先的遍历操作

//支持情况
var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

document.createNodeIterator()
接受4个参数
root，搜索起点的树的节点
whatToShow，要访问那些节点的数字代码，p328
filter，NodeFilter对象或者表示接受还是拒绝某种特性节点的函数，
entityReferenceExpansion，布尔值，表示是否扩展实体引用
whatToShow

TreeWalker是NodeIterator的一个更高级的版本

方法	含义
parentNode()	遍历到当前节点的父节点
firstChildren()	遍历到当前节点的第一个子节点
lastChildren()	遍历到当前节点的最后一个子节点
nextSibling()	遍历到当前节点的下一个同辈节点
previousSibling()	遍历到当前节点的上一个同辈节点

document.createTreeWalker()
与document.createNodeIterator()相同

范围

document.createRange();通过范围可以选择文档的一个区域，设置位置确定范围，对范围内容执行操作，每个范围都是Rang类型的实例

属性	含义
startContainer	范围起点节点包含
startOffset	范围在startComtainer中的起点偏移量，如果startContainer为文本节点注释或CDATA节点则为范围起点之前跳过的字符数量否则为范围中的第一个子节点的索引
endContainer	范围终点
endOffset	终点偏移量
commonAncestorContainer	startContainer 和endContainer 共同的祖先节点在文档树中位置最深的拉个

var rang = document.createRang();
rang.selectNode(document.getElementById(“p1”));

方法	含义
setStartBefore(refNode)	将范围的起点设置refNode之前包含refNode
setStartAfter(refNode)	将范围的起点设置为refNode之后不包含
setEndBefore(refNode)	将范围的终点设置在ref之前不包含
setEndAfter(refNode)	将范围的终点设置在refNode之后包含
deleteContents()	删除文档中的内容
extractContents()	移除文档范围内容返回文档片段
cloneContents()	复制文档片段
extractContents()	返回文档片段
collapse()	折叠范围，true折叠到起点，false折叠到终点
collapse	是否折叠
compareBoundaryPoints()	确定范围是否有公共边界
cloneRange()	复制范围
detach()	解除范围，从而设置为null以便垃圾回收