JavaScript nodeType節點型別

admin發表於2018-09-25
JavaScript型別

nodeType屬性可以返回一個數字，用來標識當前節點的型別。

此屬性瀏覽器相容性良好，當前所有主流瀏覽器都支援。

一.節點型別介紹：

JavaScript中有多種節點型別，比如<div>是元素節點，<div>螞蟻部落</div>，div元素中的字串是文字節點，上述兩種最為常見且應用最為頻繁的節點，除此之外還有多種可能使用頻繁但不引人注目的節點。

JavaScript常用節點型別羅列如下：

（1）.元素節點。

（2）.屬性節點。

（3）.文字節點。

（4）.document文字節點。

（5）.註釋節點。

（6）.DocumentType節點。

（7）.documentFragment節點。

二.nodeType返回值與節點對應關係如下：

（1）.元素節點：1。

（2）.屬性節點：2。

（3）.文字節點：3。

（4）.document文件節點：9。

（5）.註釋節點：8。

（6）.documentType節點：10。

（7）.documentFragment節點：11。

三.程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){ 
  let oshow=document.getElementById("show");
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  oshow.innerHTML=lis[1].nodeType;
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/010124jruo5hkh0shsjeur.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼首先獲取li元素物件集合，然後獲取第二個（索引為1）li元素nodeType屬性值。

返回值為1，說明li是元素節點，這很明顯。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  font-size:12px;
  height:15px;
}
</style>
<script> 
window.onload=function(){ 
  let oshow=document.getElementById("show");
  let obox=document.getElementById("box");
  let childNodes=obox.childNodes;
  oshow.innerHTML=childNodes[0].nodeType;
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/010151i3cq4dhnozzjho43.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

obox.childNodes返回obox元素下所有子節點集合。

那麼childNodes[0].nodeType獲取的就是第一個子節點型別。

很多朋友可能會認為返回的是第一個li元素節點型別，應該是1才對。

但是返回值是3，表明是一個文字節點，因為空格換行會被childNodes解讀為一個文字節點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  font-size:12px;
  height:15px;
}
</style>
<script> 
window.onload=function(){ 
  let oshow=document.getElementById("show");
  let obox=document.getElementById("box");
  let childNodes=obox.childNodes;
  oshow.innerHTML=childNodes[1].nodeType;
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <!--螞蟻部落--> 
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/010219utyvt4zzw2eizi4c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

childNodes[1]獲取的是HTML註釋節點，所以返回值是8。

再強調一遍，childNodes[0]獲取到是前面的空格和換行，會被解讀為文字節點。

關於其他節點型別由於應用不多，所以不再舉例演示

關於documentFragment可以參閱JavaScript createDocumentFragment()一章節。

相關文章