jQuery中的find()函數可以在給定的父元素中，獲得當前父元素下指定的子元素集合潘飘。
關于find()的具體使用就不細說了肮之，重點是如何使用原生JS來實現一樣的功能。
當時想的方法是用遞歸來完成DOM樹的遍歷卜录。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="carousel" id="id_carousel">
<ul class="img-ct">
<li id="0">
<a href="#">
<p>p0</p>
</a>
</li>
<li id="1">
<a href="#">
<p>p1</p>
</a>
</li>
</ul>
</div>
<script>
function findRecursion(parent, label) {
for (var i = 0; i < parent.children.length; i++) {
console.log(parent.children[i]);
findRecursion(parent.children[i], label);
}
}
/*
ul.img-ct {compact: false, type: "", title: "", lang: "", translate: true, …}
li#0 {value: 0, type: "", title: "", lang: "", translate: true, …}
a {target: "", download: "", ping: "", rel: "", relList: DOMTokenList(0), …}
p {align: "", title: "", lang: "", translate: true, dir: "", …}
li#1 {value: 0, type: "", title: "", lang: "", translate: true, …}
a {target: "", download: "", ping: "", rel: "", relList: DOMTokenList(0), …}
p {align: "", title: "", lang: "", translate: true, dir: "", …}
*/
</script>
</body>
</html>
其實自己對遞歸不是很熟練（科班出身學過算法的優(yōu)勢馬上體現出來了有沒有８昵堋），了解也不是很深刻艰毒，以至于當時寫出來甚至都不知道如何運行的筐高，后面一步一步打斷點運行后才了解，也知道了為什么jQuery中find()的源碼沒有使用這種方法來遍歷DOM。
調試界面
可以看到在調用堆棧中柑土，有5個
findRecursion()函數在堆棧內執(zhí)行蜀肘，此時遍歷DOM深度是遍歷到第一個li元素內的p元素上。由于p本身沒有后代元素（children.length=0）稽屏，不會再繼續(xù)調用函數遞歸下去幌缝，執(zhí)行棧彈出函數，i自增......直到碰到下一個children.length>1的元素诫欠，繼續(xù)遍歷下去涵卵。
實際上，節(jié)點中每存在一個后代節(jié)點荒叼，就會執(zhí)行一次函數轿偎，如果元素節(jié)點很多很深，很容易造成棧溢出被廓。
<ul class="img-ct">
<li id="0">
<a href="#">
<p>p0</p>
</a>
</li>
<li id="1">
<a href="#">
<p>p1</p>
</a>
</li>
</ul>
這是優(yōu)化了一下函數坏晦，簡單模擬了find()的功能。加入class嫁乘、id昆婿、tagName參數用于對比，數組用于保存符合功能的元素蜓斧。
var result = [];
function findRecursion(parent,label) {
for (var i = 0; i < parent.children.length; i++) {
if (([].indexOf.call(parent.children[i].classList,label) !== -1) || parent.children[i].id === label || parent.children[i].tagName === label) {
result.push(parent.children[i]);
}
findRecursion(parent.children[i], label);
}
}
findRecursion(document.querySelectorAll(".carousel")[0],"P"); // Array(4) [p, p, p, p.p3]
console.log(result);
result = [];
findRecursion(document.querySelectorAll(".carousel")[0],"3"); // Array(1) [li#3]
console.log(result);
result = [];
findRecursion(document.querySelectorAll(".carousel")[0],"img-ct"); // Array(1) [ul.img-ct]
console.log(result);
result = [];
測試HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="carousel" id="id_carousel">
<ul class="img-ct">
<li id="0">
<a href="#"><p>p0</p></a>
</li>
<li id="1">
<a href="#"><p>p1</p></a>
</li>
<li id="2">
<a href="#"><p>p2</p></a>
</li>
<li id="3">
<a href="#"><p class="p3">p3</p></a>
</li>
</ul>
</div>
</body>
</html>
當然問題也有很多仓蛆，如沒有使用this，參數類型不嚴謹挎春，每執(zhí)行一次result數組要歸0等等看疙。
待更
