DOM探索之-DOM的nodeType、nodeName、nodeValue
nodeType
通過DOM節點類型，我們可知，可以通過某個節點的nodeType屬性來獲得節點的類型，節點的類型可以是數值常量或者字元常量。示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>nodeType</title>
</head>
<body>
<div id="container">這是一個元素節點</div>
<script>
var divNode = document.getElementById("container");
/*
IE中只支持數值常量，因為低版本IE瀏覽器沒有內置Node對象，其他瀏覽器數值常量和字元常量都支持，因此可
以直接用數值常量判斷，這裡為了比較兩種寫法，便都寫在了這裡
*/
if (divNode.nodeType == Node.ELEMENT_NODE || divNode.nodeType === 1) {
alert("Node is an element.");
}
</script>
</body>
</html>
nodeName和nodeValue
先看示例代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>nodeName,nodeValue</title>
</head>
<body>
<!--nodeName,nodeValue實驗-->
<div id="container">這是一個元素節點</div>
<script>
var divNode = document.getElementById("container");
console.log(divNode.nodeName + "/" + divNode.nodeValue);
//結果: DIV/null
var attrNode = divNode.attributes[0];
console.log(attrNode.nodeName + "/" + attrNode.nodeValue);
//結果： id/container
var textNode = divNode.childNodes[0];
console.log(textNode.nodeName + "/" + textNode.nodeValue);
//結果： #text/這是一個元素節點
var commentNode = document.body.childNodes[1];
//表示取第二個注釋節點，因為body下面的第一個注釋節點為空白符。
console.log(commentNode.nodeName + "/" +commentNode.nodeValue);
//結果： #comment/nodeName,nodeValue實驗
console.log(document.doctype.nodeName + "/" + document.doctype.nodeValue);
//結果： html/null
var frag = document.createDocumentFragment();
console.log(frag.nodeName + "/" + frag.nodeValue);
//結果： #document-fragment/null
</script>
</body>
</html>
根據實驗，得出以下匯總表格:
※程序員為什麼不要去外包公司？網友：真是太坑了
※我們為什麼要用vue，他解決了什麼問題，如何使用它？
TAG:極客教程 |