js高级程序设计笔记7--DOM2和DOM3

选择符API

Selectors API是由W3C发起制定的一个标准。致力于让浏览器原生支持CSS查询。

querySelector()方法

此方法接收一个CSS选择符，返回与该模式匹配的第一个元素。如果没有找到返回null.

var body = document.querySelector("body");var myDiv = document.querySelector("#myDiv");var selected = document.querySelector(".selector");var img = document.body.querySelector("img.button");

如果传入了不被支持的选择符，querySelector()方法会抛出错误。

querySelectorAll()方法

接收的参数与querySelector()方法一样，但是返回的是一个NodeList的实例。

//取得所有<p>元素中的所有<strong>元素var strongs = document.querySelectorAll("p strong");

matchesSelector()方法

传入一个css选择符，如果调用元素与该选择符匹配，则返回true.很多浏览器还没有支持matchesSelector()方法，各个浏览器实现的方法不同。如果要用则写过包装函数。

function matchesSelector(element,selector){    if(element.matchesSelector){        return element.matchesSelctor(selector);    }else if(element.msMatchesSelector){        return element.msMatchesSelector(selector);    }else if(element.mozMatchesSelector){        return element.mozMatchesSelector(selector);    }else if(element.webkitMatchesSelector){        return element.webkitMatchesSelector(selector);    }else{        throw new Error("not supported");    }}

元素遍历

对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他浏览器都会返回文本节点。
为了弥补这一差异，Element Traversal规范新定义了一组属性。
childElementCount:返回子元素（不包括文本节点和注释）的个数。
firstElementChild:指向第一个子元素
lastElementChild:指向最后一个子元素。
previousElementSibling:指向前一个同辈元素。
nextElementSibling:指向后一个同辈元素。

HTML5扩展DOM

1. getElementsByClassName()方法：接收一个参数，一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。

var selected = document.getElementById("myDiv").getElementByClassName("selected");

1. classList属性：HTML5新增了一种操作类名的方式。可以让操作更简单更安全。这个classList属性时新集合类型DOMTokenList的实例。DOMTokenList有个length属性，并有以下方法：
   add(value):将给定的字符串添加到列表中。
   contains(value):表示列表中是否存在给定的值。
   remove(value):从列表中删除指定的字符串。
   toggle(value):如果存在则删除，不存在则添加。

<div class="bd user disabled">...</div>div.classList.remove("disabled");div.classList.add("current");

支持classList属性的浏览器有Firefox3.6+和Chrome.

焦点管理

HMTL5也添加了管理DOM焦点的功能。
document.activeElement：这个属性始终会引用DOM中当前获得了焦点的元素。

var button = document.getElementById("muButton");button.focus();alert(document.activeElement == button);//true

document.hasFocus()方法：用于确定文档是否获得了焦点。

HTMLDocument的变化

HTML5扩展了HTMLDocument。
1. readyState属性：有两个可能的值：loading(正在加载文档（,complete(已经加载文档).

if(document.readyState == "complete"){    //执行操作}

1. 兼容模式
   为了区分页面的模式是标准的还是混杂的。IE为此给document添加了一个名为compatMode的属性。标准模式下，document.compatMode的值为”CSS1Compat”,混杂模式下为”BackCompat”.

document.head引用文档的元素。
document.charset:文档中实际使用的字符集。
document.defaultCharset:浏览器设置的文档默认的字符集。

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-.

<div id="mydiv" data-appId="12345" data-myname="nicholas"></div>

可以通过元素的dataset属性来访问自定义属性的值。

var appId = div.dataset.appId;var myName = div.dataset.myname;

插入文本

innerText:但firefox不支持
textContent:firefox支持

function getInnerText(element){    return (typeof element.textContent == "string")?element.textContent:element.innerText;}

css规则

CSSRule对象表示样式表中的每一条规则。

div.box{    background-color:blue;    width:100px;    height:200px;}假设这条规则位于页面中的第一个样式表中。var sheet = document.styleSheets[0];var rules = sheet.cssRules || sheet.rules;//取得规则列表var rule = ruless[0];alert(rule.selectorText);//div.boxalert(rule.style.cssText);//完整的CSS代码alert(rule.style.backgroundColor);//blue

创建规则

insertRule(规则文本，表示在哪里插入规则的索引).

sheet.insertRule("body{backgournd-color:silver}",0);

但IE8及更早版本不支持此方法，而是另外一个方法：

sheet.addRule("body{backgournd-color:silver}",0);

删除规则

deleteRule(pos):接受一个参数，要删除的规则的位置。
IE支持的方法removeRule()。

元素大小

1. 偏移量。
   

offsetHeight:元素在垂直方向上占用的空间大小。以像素计。包括元素的高度，水平滚动条的高度、上边框高度和下边框高度。
offsetWidth:元素在水平方向上占用的空间大小。
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
offsetParent:对包含元素的引用。
取得元素的左偏移量(上偏移量类似原理)。

function getElementLeft(element){    var actualLeft = element.offsetLeft;    var current = element.offsetParent;    while(current != null){        acrualLeft += current.offsetLeft;        current = current.offsetParent;    }    return actualLeft;}

所有这些偏移量都是只读的，而且每次访问他们都需要重新计算。因此尽量避免重复访问这些属性。
2. 客户区大小
指的是元素内容及其内边距所占据的空间大小。
clientWidth:元素内容区域宽度加上左右内边距宽度。
clientHeight:元素内容高度加上上下内边距高度。
3. 滚动大小
scrollHeight:在没有滚动条的情况下，元素内容的总高度。
scrollWidth:在没有滚动条的情况下，元素内容的总宽度。
scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可变改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素数。

遍历

“DOM2级遍历和范围”模块定义了两个用于完成顺序遍历DOM结构的类型：NodeIterator和TreeWalder.
能够基于给定的起点对DOM结构执行深度优先的遍历操作。检测浏览器是否支持：

var supportsTraversals = document.implementation.hasFeature("Traversal","2.0);var supportNodeIterator= (typeof document.createNodeIterator == "function");var supportTreeWalder = (typeof document.createTreeWalder == "function");

document.createNodeIterator()方法接收四个参数：
root:想要作为搜索起点的树中的节点。
whatToShow:表示要访问那些节点的数字代码。
filter:一个NodeFilter对象，或者一个表示接受还是拒绝某种特定节点的函数。
entityReferenceExpansion:布尔值，表示是否要扩展实体引用。在HTML中没有用。
whattoShow参数是一个位掩码。

NodeFilter.SHOW_ALL:显示所有类型的的节点。
NodeFilter.SHOW_ELEMENT:显示元素节点。
NodeFilter.SHOW_TEXT:显示文本节点。
等等。

可以使用按位或操作符来组合多个选型。

var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

filter参数：可以传入一个NodeFilter对象或者一个函数。
每个NodeFilter对象只有一个方法，及acceptNode()方法。如果应该访问给定的节点该方法返回NodeFilter.FILTER_ACCEPT,如果不应该访问则返回NodeFilter.FILGER_SKIP。
传入的函数与acceptNode()方法类似。

var filter = {    acceptNode:function(node){        return node.tagName.toLowerCase() == "p"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;    }};var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);

NodeIterator对象有两个方法，nextNode()和previousNode()。第一次调用nextNode()返回根节点。

var div = document.getElementById("mydiv");var filter = function(node){    return node.tagName.toLowerCase() == "li"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;};var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);var node = iterator.nextNode();while(node !== null){    alert(node.tagName);    node = iterator.nextNode();}

TreeWalker

TreeWalker是NodeIterator的一个更高级的版本。增加了很多方法。

parentNode():
firstChild():
lastChild():
nextSibling():
previousSibling():

document.createTreeWalker():同document.createNodeIterator方法一样接收四个参数。

var walker = document.createTreeWalder(root,NodeFilter.SHOW_ELEMENT,filter,false);

TreeWalker类型还有一个currentNode属性。由于IE中没有TreeWalker类型，所有使用遍历的跨浏览器解决方案非常少。

范围

后续补上