【有书共读】《JS高级程序设计》读书笔记04
第十一章
选择符 API
可以通过 Document 和 Element 类型的实例调用它们。前两个方法兼容 IE8+。
querySelector()
querySelectorAll()
matchesSelector()
元素遍历
对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他浏览器都会返回文本节点。为了弥补差异，Element Traversal 规范新添加了五个属性：
childElementCount：返回子元素（不包括文本和注释节点）的个数。
firstElementChild：指向第一个子元素。
lastElementChild：指向最后一个子元素。
previousElementSibling：指向前一个同辈元素。
nextElementSibling：指向后一个同辈元素。
HTML5
getElementsByClassName()
classList属性
HTML5 新增了一种操作类名的方式classList，它是新集合类型 DOMTokenList 的实例。
add(value)：将给定字符串值添加到列表中。
contains(value)：表示列表中是否存在给定的值。
remove(value)：从列表中删除给定字符串。
toggle(value)：如果列表中已经存在给定值，删除它；如果没有，添加它。
焦点管理
document.activeElement：这个属性始终会引用 DOM 中当前获得了焦点的元素。默认情况下，文档刚加载完时，该属性值为document.body。
document.hasFocus()：这个方法用于确定文档是否获得了焦点，可以知道用户是不是正在与页面交互。
HTMLDocument 的变化
readyState正式加入标准
document的readyState属性有两个可能的值：
loading：正在加载文档
complete：已经加载完文档
兼容模式
使用document.head获取<head>元素。
字符集属性
document.charset：表示文档中实际使用的字符集，也可以用来指定新的字符集。
document.defaultCharset：默认字符集。
自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加data-前缀。
<div id = "myDiv" data-appId = "12345" data-myname="Nicholas"></div>
添加了自定义属性后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是 DOMStringMap 的一个实例，也就是一个名值对映射。实例代码如下：
var div = docuemnt.getElementById('myDiv');
var appId = div.dataset.appId;
var myName = div.dataset.myName;
div.dataset.appId = 23456;
div.dataset.myName = "Michael"; 插入标记
innerHTML
outerHTML
与innerHTML基本相同，区别在于写入信息时，会替换给定节点。
内存与性能问题
使用innerHTML和outerHTML替换子节点可能会导致浏览器的内存问题。
scrollIntoView()方法
可以在所有 HTML 元素中调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true，或者不传参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false，调用元素会尽可能全部出现在视口中，不过顶部不一定平齐。
第十二章
DOM 变化
DOM2 级和 3 级的目的在扩展 DOM API，以满足操作 XML 的所有需求，同时提供更好的错误处理及特性检测能力。
针对XML命名空间的变化
Node类型的变化
DOM2 级中，Node类型包含下列特定于命名空间的属性。
localName：不带命名空间前缀的节点名称。
namespaceURI：命名空间 URI，未指定则为null。
prefix：命名空间前缀，未指定则为null。
DOM3 级
isDefaultNamespace(namespaceURI)：指定的 namespaceURI 在当前的默认命名空间的情况下返回true。
lookupNamespaceURI(prefix)：返回给定 prefix 的命名空间。
lookupPrefix(namespaceURI)：返回给定 namespaceURI 的前缀。
Document 类型的变化
DOM2 级中与命名空间相关的方法：
createElementNS(namespaceURI, tagName)：使用给定的 tagName 创建一个属于命名空间 namespaceURI 的新元素。
createAttributeNS(namespaceURI, attributeName)：使用给定的 attributeName 创建一个属于命名空间 namespaceURI 的新元素。
getElementBytagNameNS(namespaceURI, tagName)：返回属于命名空间 namespaceURI 的 tagName 元素的 NodeList。
NamedNodeMap 类型的变化
getNamedItemNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的项。
removeNamedItemNS(namespaceURI, localName)：移除属于命名空间 namespaceURI 且名为 localName 的项。
setNamedItemNS(node)：添加 node，这个节点已事先指定了命名空间信息。
其他方面的变化
DocumentType 类型的变化
新增 3 个属性：publicId、systemId 和 internalSubset。
前两个表示文档类型声明中的两个信息段，最后一个属性internalSubset用于访问包含在文档类型声明中的额外定义。
框架的变化
contentDocument属性是 Document 类型实例，因此可以像使用其他 HTML 文档一样使用它，包括所有属性和方法。IE8 之前不支持框架中的contentDocument 属性，但支持一个叫 contentWindow `属性，返回框架的window对象。访问内嵌框架文档对象兼容代码：
var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
样式
访问元素的样式
style属性
DOM 样式属性和方法
DOM2 级还为 style 对象定义了一些属性和方法。在提供特性值时也可修改样式。
cssText：访问style特性中的 CSS 代码。
length：应用给元素的 CSS 属性数量。
parentRule：表示 CSS 信息的 CSSRule 对象。
getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象，含两个属性cssText 和 cssValueType。
getProperytPriority(propertyName)：如果给定的属性使用了!important设置，则返回“important”，否则返回空字符串。
item(index)：返回给定位置的 CSS 属性的名称。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName, value, priority)：将给定属性设置为相应的值，并加上优先权标志（“important”或者一个空字符串）。
计算的样式
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(mydiv, null) || myDiv.currentStyle;
alert(computedStyle.width);
alert(computedStyle.height);
//取得第一个<link>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link); CSS 规则
CSSRule 对象表示样式表中的每一条规则，是一个供其他多种类型继承的基类型，其中最常见的就是 CSSStyleRule 类型，表示样式信息。CSSStyleRule 对象包含下列属性：
cssText：返回整条规则对应的文本，IE 不支持。
parentRule：如果当前规则是导入的规则，这属性引用的就是导入规则，否则这个值为null。IE 不支持。
parentStyleSheet：当前规则所属的样式表。IE不支持。
selectorText：返回当前规则的选择符文本。
style：一个 CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值。
type：表示规则类型的常量值。对于样式规则，这个值是 1。IE 不支持。
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
rule.style.backgroundColor = "red";
alert(rule.style.backgroundColor);
function insertRule(sheet, selectorText, cssText, position){
if(sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText + "}", position);
}else if(sheet.addRule){
sheet.addRule(selectorText, cssText, position);
}
}
insertRule(document.styleSheets[0], "body", "background-color:red", 0);
sheet.deleteRule(0); //DOM方法，IE不支持
sheet.removeRule(0); //IE方法，两者都是传入要删除的规则的位置。
function deleteRule(sheet, index){
if(sheet.deleteRule){
sheet.deleteRule(index);
}else if(sheet.removeRule){
sheet.removeRule(index);
}
} 这种做法不是实际web开发中常见做法，删除规则会影响 CSS 层叠效果，慎用。
元素大小
偏移量（offset dimension）
包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水平滚动条高度、上下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、垂直滚动条宽度、左右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在
offsetParent属性中。offsetParent属性不一定与parentNode的值相等。
这些偏移量属性是只读的，每次访问需要重新计算。若重复使用，应保存在局部变量中。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
} 客户区大小（client dimension）
元素内容及其内边距所占空间的大小，滚动条占用空间不算在内。
clientWidth：元素内容区宽度加上左右内边距宽度。
clientHeight：元素内容区高度加上上下内边距高度。
确定浏览器视口大小可用document.documentElement或document.body（IE7 以前）。
function getViewport() {
if (document.compatMode == "BackCompat") {
return {
width: document.body.clientWidth,
height: document.body.clientheight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
} 确定元素大小
getBoundingClientRect()：这个方法返回一个矩形对象，含4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但 IE8 认为左上角坐标为 (2,2)，其他浏览器认为是 (0,0)。
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);
temp = null;
}
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
}
}
} 操作 IE 范围中的内容
可通过text属性取得范围中的内容文本。要向范围中插入 HTML 代码，要用pasteHTML()方法。
折叠 IE 范围
collapse()方法：传入true折叠到起点，false折叠到终点。可以用boundingWidth属性是否等于 0，来检查折叠是否完毕。
range.collapse(true);
var isCollapse = (range.boundingWidth == 0);
比较 IE 范围
compareEndPoints()方法：接受两个参数，比较的类型和要比较的范围。比较类型取值字符串："StartToStart"、"StartToEnd"、"EndToEnd"和"EndToStart"。如果第一个范围的边界位于第二个范围的边界前，返回 -1；相等返回 0；在后面返回 1。
isEqual()：用于确定两个范围是否相等。
inRange()：用于确定一个范围是否包含另一个范围。
复制 IE 范围
使用duplicate()方法，复制文本范围，返回原范围的一个副本，如下：
var newRange = range.duplicate();
失业啃老第二年，熬夜玩手机中。。
