使用递归遍历所有的后代元素
function mul(n) {
if (n === 1 || n === 0) {
return 1;
}
return n * mul(n - 1);
}
mul(5);
mul(5) ==> 5 * mul(4)
↓
mul(4) ==> 4 * mul(3)
↓
mul(3) ==> 3 * mul(2)
↓
mul(2) ==> 2 * mul(1)
fb(n) == fb(n - 1) + fb(n - 2)
function fb(n){
if(n === 1 || n === 2){
return 1
}
return fb(n - 1) + fb(n - 2)
}
fb(5) ===> fb(4) + fb(3);
↓ ↓
fb(4) ==> fb(3) + fb(2); fb(3) ==> fb(2) + fb(1);
↓
fb(3) ==> fb(2) + fb(1);
方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script>
window.onload = function() {
function getChildNode(node) {
var nodeList = node.childNodes;
var result = [];
for (var i = 0; i < nodeList.length; i++) {
var childNode = nodeList[i];
if (childNode.nodeType == 1) {
result.push(childNode);
var temp = getChildNode(childNode);
console.log(temp);
result = result.concat(temp);
console.log(result);
}
}
return result;
}
var arr = getChildNode(document.body);
console.log(arr);
for (var i = 0; i < arr.length; i++) {
var child = arr[i];
child.style.border = "1px solid pink";
}
};
</script>
</head>
<body>
<div>
1div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>
2div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
</body>
</html>
方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script>
window.onload = function() {
var allChildren = [];
function getChildNode(node) {
var nodeList = node.childNodes;
for (var i = 0; i < nodeList.length; i++) {
var childNode = nodeList[i];
if (childNode.nodeType == 1) {
allChildren.push(childNode);
getChildNode(childNode);
}
}
}
getChildNode(document.body);
for (var i = 0; i < allChildren.length; i++) {
var child = allChildren[i];
child.style.border = "1px solid pink";
}
};
</script>
</head>
<body>
<div>
1div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<div>
2div
<p>1p<span>1span</span><span>2span</span><span>3span</span></p>
<p>2p<span>1span</span><span>2span</span><span>3span</span></p>
<p>3p<span>1span</span><span>2span</span><span>3span</span></p>
<p>4p<span>1span</span><span>2span</span><span>3span</span></p>
<p>5p<span>1span</span><span>2span</span><span>3span</span></p>
</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
</body>
</html>