標籤：
1.擷取文檔對象。
a.querySelector():通過傳入合法的CSS選取器，即可擷取合格第一個元素。
document.querySelector("#test"); //返回id為test的首個元素;
b.querySelectorAll():通過傳入合法的CSS選取器，即可擷取所有合格元素，返回對象數組。
document.querySelectorAll("div.foo"); //返回所有帶有foo類樣式的div元素
注意：上述兩個方法無法尋找到帶有偽類狀態的元素，比如:querySelector(":hover")不會得到期望的結果。
c.getElementById():返回一個與給定id屬性值的元素節點相對應的對象。
document.getElementById(‘box‘);
d.getElementsByTagName():返回一個對象數組。每個對象分別對應著文檔裡給定標籤的一個元素。
document.getElementsByTagName(‘li‘);
e.getElementByName():通過name擷取一個對象數組。
2.間接引用節點。
a.引用子節點：每個節點都有一個childNodes集合屬性，類型是數組對象。表示該節點的所有子節點的集合。這些子節點按照其在文檔中出現的順序排列，因此可以通過索引來依次訪問各個子節點。
document.childNodes[0]; //文檔頭聲明;document.childNodes[1]; //文檔根對象;document.childNodes[1].childNodes[0]; //引用<head>節點;document.childNodes[1].childNodes[1]; //引用<body>節點;
除了childNodes屬性，還有兩個屬性可以用於引用子節點，分別是：element.firstChild;和elementlastChild;它們分別表示了第一個子節點和最後一個子節點。
b.引用父節點：html的節點層次是一個樹狀結構，除了根節點，每個節點都僅有一個父節點，可以由parentNode屬性來應用。
element.parentNode;//引用父節點
c.引用兄弟節點：屬於同一個文檔層次的節點稱為兄弟節點，有兩個屬性可以用於兄弟節點間。
element.nextSibling;//引用下一個兄弟節點;
element.previousSibling;//引用上一個兄弟節點;
3.擷取節點資訊：在獲得一個節點的引用後，有一些方法可以獲得該節點的資訊。
a.nodeName:擷取節點名稱。文法:Node.nodeName;
不同類型的節點，nodeName的傳回值有所差異：
元素節點：返回標記名稱；
屬性節點:返回屬性名稱；
文本節點：返迴文本。
b.nodeType:擷取節點類型。文法：Node.nodeType;
元素節點：返回1
屬性節點:返回2
文本節點返回:返回3
c.nodeValue：擷取節點的值。文法：Node.nodeValue;
元素節點：返回null;
屬性節點：返回節點值;
文本節點：返迴文本的內容;
4.處理屬性節點。
a.getAttribute擷取屬性節點屬性值：object.getAttribute(attribute);
var a = document.getElementByTagName(‘a‘);for(var i = 0;i < a.length;i++) { alert(a.[i].getAttribute(‘title‘)); }
b.setAttribute設定節點屬性值：object.setAttribute(attribute,value)
var link = document.getElementById(‘link‘); link.setAttribute(‘title‘,‘串連提示資訊‘);
5.處理文本節點。
a.node.innerHTML:擷取該節點下的包含HTML標籤的常值內容。（包含標籤的文本）。
var body = document.querySelector(‘body‘); alert(body.innerHTML);
b.node.textContent:擷取該節點下的純文字內容。
var body = document.querySelector(‘body‘); alert(body.textContent);
6.因瀏覽器而異的空白節點：ie瀏覽器和Firefox瀏覽器對空白節點的處理方式不同，ie瀏覽器會忽略這些節點，而Firefox瀏覽器則認可這些節點。
處理方法：1.避免在文檔中出現文本節點。2.在使用前先刪除其中的空白節點。
function cleanWhitespace(element){
for(var i = 0; i < element.childNodes.length;i++) {
var node = element.childNodes[i];
//判斷是否是空白節點，如果是則刪除該節點
if(node.nodeType == 3 && /\S/.test(node.nodeValue)) {
node.parentNode.removeChild(node);
}
}
}
JS七.....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
