Question

我必须从头开始写.getElementByClassName。这是我到目前为止的代码。

var getElementsByClassName = function(className){
  let result = [];
  let bod = document.body;

  for (let prop in bod) {
    if (bod[prop].classList && bod[prop].classList.contains(className)) {
      result.push(bod[prop]);
    }
    let child = bod[prop].childNodes;
    for(let elem in child) {
      if (child[elem].classList.contains(className)) {
        result.push(child[elem]);
      }
    }
  }
  return result;
};

我无法访问document.body。我的语法错误还是for循环不是解决之道？

Answer 1

prop in bod甚至会返回其方法/属性，并且它们没有classList，只有Node有。

因此，您需要的是其子节点，也称为document.body.childNodes。像这样：

for (let i = 0; i<bod.childNodes.length; i++) {
  let thisNode = bod.childNodes[i];
  if (thisNode.classList) {
    // check if it has your class
  }
  if (thisNode.childNodes.length) {
    // go deeper in the node, recursively 
  }
}

一个循环是不够的，并且您不知道需要多少个循环，因为每个节点可以具有任意数量的子节点，因此您需要进行递归。

Answer 2

var getElementsByClassName = function(className){
  let result = [];
  let bod = document.body; // THis is not an object you can perform loop on.

最好这样做

const BODY = document.querySelectorAll('body');

for(let prop in BODY) {

}

如何遍历document.body

2 个答案: