認識DOM的三大節點：元素節點，文字節點，屬性節點以及nodeName,nodeType,nodeValue的區別
阿新 • • 發佈：2019-02-12
既然我們把網頁文件看做樹形結構，那麼就有對應的節點。誠然DOM中有三大節點，分別是元素節點，文字節點，屬性節點
元素節點：構成了DOM的基礎。文件結構中，<html>是根元素，代表整個文件，其他的還有<head>,<body>,<p>,<span>等等。元素節點之間可以相互包含(當然遵循一定的規則)
文字節點：包含在元素節點中。
屬性節點：元素都可以包含一些屬性，屬性的作用是對元素做出更具體的描述，比如id,name之類的。
在比較上述節點的區別之前，還需要了解nodeType,nodeName,nodeValue節點的這三個基本屬性。
1.nodeName屬性含有某個節點的名稱
對於元素節點，nodeName=標籤名（返回的名稱是大寫的）
對於文字節點，nodeName=#text
對於屬性節點，nodeName=屬性名（返回的名稱是大寫的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script>
window.onload = function()
{
var element = document.getElementById("span");
var text = element.firstChild;
var property = document.getElementById("span").getAttributeNode("id");
alert("這是元素節點的返回值："+ element.nodeName);//返回的標籤名SPAN,注意是大寫的
alert("這是文字節點的返回值："+ text.nodeName);//返回的#text
alert("這是屬性節點的返回值："+ property.nodeName);//返回的是屬性名，這裡是id
}
</script>
</head>
<body>
<div>
<span id="span">文字節點</span>
</div>
</body>
</html> 2.nodeValue
對於元素節點，因為本身不直接包含文字，所以nodeValue是不可用的。當然你也可以在示例中自己寫試試看有什麼結果出現。
對於文字節點，nodeValue=文字值
對於屬性節點，nodeValue=屬性值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script>
window.onload = function()
{
var element = document.getElementById("myspan");
var text = element.firstChild;
var property = document.getElementById("myspan").getAttributeNode("id");
alert("這是元素節點的返回值："+ element.nodeValue);//本身就沒有意義，這裡是試驗下的，返回的是null
alert("這是文字節點的返回值："+ text.nodeValue);//返回的是文字值 文字節點
alert("這是屬性節點的返回值："+ property.nodeValue);//返回的是屬性值，這裡是id的屬性值 myspan
}
</script>
</head>
<body>
<div>
<span id="myspan">文字節點</span>
</div>
</body>
</html> 3.nodeType
對於元素節點，nodeType=1
對於文字節點，nodeType=3
對於屬性節點，nodeType=2
另外提一下：
對於註釋元素，nodeType=8
對於文件元素，nodeType=9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script>
window.onload = function()
{
var element = document.getElementById("myspan");
var text = element.firstChild;
var property = document.getElementById("myspan").getAttributeNode("id");
alert("這是元素節點的返回值："+ element.nodeType);//元素節點返回1
alert("這是文字節點的返回值："+ text.nodeType);//文字節點返回3
alert("這是屬性節點的返回值："+ property.nodeType);//屬性節點返回2
}
</script>
</head>
<body>
<div>
<span id="myspan">文字節點</span>
</div>
</body>
</html>