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 元素遍歷
對於元素間的空格，IE9及之前的版本不會返回文字節點，而其他瀏覽器都會返回文字節點。
為了彌補這一差異，Element Traversal規範新定義了一組屬性。
childElementCount:返回子元素（不包括文字節點和註釋）的個數。
firstElementChild:指向第一個子元素
lastElementChild:指向最後一個子元素。
previousElementSibling:指向前一個同輩元素。
nextElementSibling:指向後一個同輩元素。
HTML5擴充套件DOM
- getElementsByClassName()方法：接收一個引數，一個包含一或多個類名的字串，返回帶有指定類的所有元素的NodeList。
var selected = document.getElementById("myDiv").getElementByClassName("selected");- 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);//truedocument.hasFocus()方法：用於確定文件是否獲得了焦點。
HTMLDocument的變化
HTML5擴充套件了HTMLDocument。
1. readyState屬性：有兩個可能的值：loading(正在載入文件（,complete(已經載入文件).
if(document.readyState == "complete"){
//執行操作
}- 相容模式
為了區分頁面的模式是標準的還是混雜的。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.box
alert(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()。
元素大小
- 偏移量。
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型別，所有使用遍歷的跨瀏覽器解決方案非常少。
範圍
後續補上