Question

我已阅读this和this，但我正在尝试弄清楚document.getELementbyClassName的工作原理，以便我可以将其重新实施为练习。显然，我不想只是模仿源代码;我的版本可能会慢得多，而且更粗糙。我有几个问题，但除了我的问题之外提供的任何见解都表示赞赏。

在文档对象上调用时，将搜索完整的文档，包括根节点。

如何搜索整个文档？这是否使用某种正则表达式？
document.getElementsByClassName('red test');这应该返回同时具有red和test类的所有元素。但是每个元素都不只有one class吗？或者这是指red orange test之类的东西？
元素在数组中返回是否正确？像[element1, element2, ...]这样的东西。我不确定“阵列式”是什么意思。

注意：我是JavaScript的新手，并且使用HTML，CSS和jQuery的更少的exerpeince。

Answer 1

回答你的问题：

可能是递归的。否则，有很多不同的方法来遍历n-ary树，这就是DOM。深度优先，广度优先，然而你想要的第一 - 真的，它们都可以递归地实现，或者使用一些数据结构，如堆栈或队列。它是如何做的真的不重要，重要的是你认为应该怎么做。

用递归方式识别具有这些类的元素的简单算法将是这样的

getByClassName(class, root) {
  ret = []
  if (root has class) {
     ret.push(root);
  }
  for (each child of root) {
    append getByClassName(class, child) to ret;
  }
  return ret;
}

元素可以有多个类。 <a class="foo bar baz">有foo，bar和baz

Answer 2

像这样的所有Javascript方法都在DOM上运行，而不是HTML源代码。当加载HTML时，浏览器将HTML解析为DOM，DOM是包含表示文档内容的对象的数据结构。因此，它不需要进行模式匹配，只需在数据结构中搜索其类列表包含指定类的元素。
ELements可以有多个课程，这很常见。例如，您可能拥有所有按钮的active类，以及活动元素的<span class="button active">contents</span>类。然后，有效按钮可能是elements.length。
元素以HTMLCollection返回。这是一个类似于数组的对象，因此您可以使用elements[i]来获取元素的数量，并使用result[i] = {'distance': Math.sqrt(r1 + r2), 'city': locationcity[i].city };来访问集合中的特定元素。它也是一个“实时”集合，这意味着如果你更改DOM，集合将自动更新以反映更改（例如，如果从对象中删除类，它将不再在集合中）。

了解document.getElementByClassName如何工作 - Javascript

2 个答案: