Как перебрать document.body

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) {

}