JavaScript DOM遍历
[英]JavaScript DOM traverse
问题描述
I am trying to get all childs from <article class="birds"> , but cant reach these ones that are in <li class="bird">Hawk ... I am trying to do it with recursion. 
我正在尝试从<article class="birds">获取所有子项，但是无法到达<li class="bird">Hawk ...我试图通过递归来实现。
function traverse (node){
node = document.getElementsByClassName(node)[0];
for(let i=0; i<node.childNodes.length; i++){
let child = node.childNodes[i];
if(child.nodeName == '#text'){
continue;
}else{
console.log(child.nodeName.toLowerCase() +
": class=\"" + child.className +"\"");
if(child.nodeType === document.ELEMENT_NODE){
traverse(child.className);
}
}
}
}
traverse('birds');
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h1>Living Creatures</h1>
</header>
<section>
<article class="birds">
<h2 class="birds-heading">Birds</h2>
<ul class="birds-list">
<li class="bird">Nightingale</li>
<li class="bird">Owl</li>
<li class="bird">Hawk
<ul>
<li class="sub-bird">Black Hawk</li>
<li class="sub-bird">Chicago Hawk</li>
</ul>
</li>
<li id="eagle" class="bird">Eagle</li>
<li class="bird">Sparrow</li>
<li class="bird">Falcon</li>
<li class="bird">Blackbird</li>
</ul>
</article>
<article class="mammals">
<h2 class="mammal-heading">Mammals</h2>
<ol class="mammal-list">
<li id="dolphin" class="mammal">Dolphin</li>
<li class="mammal">Elephant</li>
<li class="mammal">Hyena</li>
</ol>
</article>
</section>
<script type="text/javascript" src="testing.js"></script>>
</body>
</html>
Is it because <ul> element does not have a class attr? 是因为<ul>元素没有类attr吗？ The ouput i get is : 我得到的输出是：
h2: class="birds-heading"
ul: class="birds-list"
li: class="bird"
2 个解决方案
解决方案1
3 2016-11-17 10:14:28
Per my understanding, you are trying to fetch all li s from container .birds . 据我了解，您正在尝试从container .birds获取所有li 。 If yes, you can just use querySelectorAll instead of manually traversing DOM and searching manually. 如果是，则可以只使用querySelectorAll而不是手动遍历DOM并手动搜索。
function traverse(className, fetchElement){ return document.querySelectorAll("."+className +" " + fetchElement) } console.log(traverse('birds', 'li'))
<section> <article class="birds"> <h2 class="birds-heading">Birds</h2> <ul class="birds-list"> <li class="bird">Nightingale</li> <li class="bird">Owl</li> <li class="bird">Hawk <ul> <li class="sub-bird">Black Hawk</li> <li class="sub-bird">Chicago Hawk</li> </ul> </li> <li id="eagle" class="bird">Eagle</li> <li class="bird">Sparrow</li> <li class="bird">Falcon</li> <li class="bird">Blackbird</li> </ul> </article> <article class="mammals"> <h2 class="mammal-heading">Mammals</h2> <ol class="mammal-list"> <li id="dolphin" class="mammal">Dolphin</li> <li class="mammal">Elephant</li> <li class="mammal">Hyena</li> </ol> </article> </section>
解决方案2
2 已采纳 2016-11-17 10:16:03
You cannot get to the li with class birds-list since the parent ul does not have a class and your traverse code is dependant on a class . 你不能给li带班birds-list ，因为父ul没有一个class ，你的遍历代码依赖于一class 。
Instead, you can tweak the code to traverse by node . 相反，您可以调整代码以通过node遍历。 I have made the change to your code and it works. 我已经对您的代码进行了更改，并且可以正常工作。
function traverse (node){
for(let i=0; i<node.childNodes.length; i++){
let child = node.childNodes[i];
if(child.nodeName == '#text'){
continue;
}else{
console.log(child.nodeName.toLowerCase() +
": class=\"" + child.className +"\"");
if(child.nodeType === document.ELEMENT_NODE){
traverse(child);
}
}
}
}
traverse(document.getElementsByClassName('birds')[0]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.