如何在搜索节点中编写Javascript-不使用getElementsByClassName
[英]How to write Javascript to search nodes - without getElementsByClassName
问题描述
I'm very new at recursion, and have been tasked with writing getElementsByClassName in JavaScript without libraries or the DOM API. 
我对递归非常陌生，并且受过在没有库或DOM API的JavaScript中编写getElementsByClassName的任务。
There are two matching classes, one of which is in the body tag itself, the other is in ap tag. 有两个匹配的类，其中一个在body标签本身中，另一个在ap标签中。
The code I wrote isn't working, and there must be a better way to do this. 我编写的代码无法正常工作，并且必须有更好的方法来执行此操作。 Your insight would be greatly appreciated. 您的见解将不胜感激。
var elemByClass = function(className) {
var result = [];
var nodes = document.body; //<body> is a node w/className, it needs to check itself.
var childNodes = document.body.childNodes; //then there's a <p> w/className
var goFetchClass = function(nodes) {
for (var i = 0; i <= nodes; i++) { // check the parent
if (nodes.classList == className) {
result.push(i);
console.log(result);
}
for (var j = 0; j <= childNodes; j++) { // check the children
if (childNodes.classList == className) {
result.push(j);
console.log(result);
}
goFetchClass(nodes); // recursion for childNodes
}
goFetchClass(nodes); // recursion for nodes (body)
}
return result;
};
};
2 个解决方案
解决方案1
0 2016-02-12 02:09:28
Here are some reasons: 原因如下：
goFetchClassneeds an initial call after you've defined it - for example, you need areturn goFetchClass(nodes)statement at the end ofelemByClassfunctiongoFetchClass定义后需要进行初始调用-例如，在elemByClass函数末尾需要return goFetchClass(nodes)语句the line
for (var i = 0; i <= nodes; i++) {will not enter the for loop - did you meani <= nodes.length?for (var i = 0; i <= nodes; i++) {不会进入for循环-您的意思是i <= nodes.length吗？nodes.classListwill return an array of classNames, so a direct equality such asnodes.classList == classNamewill not work.nodes.classList将返回一个classNames数组，因此直接相等的nodes.classList == className例如nodes.classList == className将不起作用。 Acontainsmethod is better.contains方法更好。Lastly, you may want to reconsider having 2 for loops for the parent and children.
最后，您可能需要重新考虑为父级和子级设置2个for循环。 Why not have 1 for loop and then call goFetchClasson the children?为什么不使用1 for循环，然后在子goFetchClass上调用goFetchClass？ such as,goFetchClass(nodes[i])?例如goFetchClass(nodes[i])吗？
Hope this helps. 希望这可以帮助。
解决方案2
0 已采纳 2016-02-12 02:10:25
There are some errors, mostly logical, in your code, here's what it should have looked like 您的代码中存在一些错误，大部分是逻辑错误，这是应该看起来像的错误
var elemByClass = function(className) {
var result = [];
var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
(function goFetchClass(nodes) {
for (var i = 0; i < nodes.length; i++) {
if ( pattern.test(nodes[i].className) ) {
result.push(nodes[i]);
}
goFetchClass(nodes[i].children);
}
})([document.body]);
return result;
};
Note the use of a regex instead of classList , as it makes no sense to use classList which is IE10+ to polyfill getElementsByClassName 请注意，使用正则表达式代替classList ，因为使用IE10 +的classList来classList getElementsByClassName是没有意义的
Firstly, you'd start with the body, and check it's className property. 首先，从主体开始，然后检查它的className属性。
Then you'd get the children , not the childNodes as the latter includes text-nodes and comments, which can't have classes. 然后你会得到children ，不是childNodes ，因为后者包括文本节点和意见，不能上课。
To recursively call the function, you'd pass the children in, and do the same with them, check for a class, get the children of the children, and call the function again, until there are no more children. 要递归调用该函数，您需要传入子代，并对它们执行相同的操作，检查一个类，获取这些子代的子代，然后再次调用该函数，直到没有更多子代为止。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.