遞歸獲取當前節點全部指定類型的子節點
阿新 • • 發佈:2018-02-13
lang 類型 當前 能夠 tle nodetype i++ 文檔 not
在線預覽
方法
- 使用nodeType判斷類型,在allChildNodes方法內建立遞歸函數將allCN封裝在方法內。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
}
span{
color: blue;
}
em{
color: green;
}
i{
color: gray;
}
</style>
</head>
<body>
<p>
p中的純文本節點
<span style="color: red;">p中的span</span>
<em>
p中的em中的純文本節點
<i>
p中的em的i中的純文本節點1
<span>p中的em的i中的span</span>
p中的em的i中的純文本節點2
</i>
</em>
</p>
<button onclick="console.log(allChildNodes(document.querySelector(‘body‘), 3));">獲取body中全部純文本節點</button>
<button onclick="console.log(allChildNodes(document.querySelector(‘em‘), 3));">獲取em中全部純文本節點</button>
<button onclick="console.log(allChildNodes(document.querySelector(‘body‘), 1));" >獲取body中全部節點</button>
<button onclick="console.log(allChildNodes(document.querySelector(‘em‘), 1));">獲取em中全部節點</button>
<script>
/** 遞歸獲取子節點
1 Element 代表元素
2 Attr 代表屬性
3 Text 代表元素或屬性中的文本內容
4 CDATASection 代表文檔中的 CDATA 部分(不會由解析器解析的文本)
5 EntityReference 代表實體引用
6 Entity 代表實體
7 ProcessingInstruction 代表處理指令
8 Comment 代表註釋
9 Document 代表整個文檔(DOM 樹的根節點)
10 DocumentType 向為文檔定義的實體提供接口
11 DocumentFragment 代表輕量級的 Document 對象,能夠容納文檔的某個部分
12 Notation 代表 DTD 中聲明的符號
*/
var allChildNodes = function(node, type){
// 1.創建全部節點的數組
var allCN = [];
// 2.遞歸獲取全部節點
var getAllChildNodes = function(node, type, allCN){
// 獲取當前元素所有的子節點nodes
var nodes = node.childNodes;
// 獲取nodes的子節點
for (var i = 0; i < nodes.length; i++) {
var child = nodes[i];
// 判斷是否為指定類型節點
if(child.nodeType == type){
allCN.push(child);
}
getAllChildNodes(child, type, allCN);
}
}
getAllChildNodes(node, type, allCN);
// 3.返回全部節點的數組
return allCN;
}
</script>
</body>
</html>
遞歸獲取當前節點全部指定類型的子節點