了解 document.getElementByClassName 的工作原理 - Javascript答案

【问题标题】：Understanding how document.getElementByClassName works - Javascript了解 document.getElementByClassName 的工作原理 - Javascript
【发布时间】：2016-02-11 04:07:32
【问题描述】：

我已经阅读了this 和this，但我试图弄清楚document.getELementbyClassName 是如何工作的，以便我可以将其作为练习重新实现。显然，我不想只是模仿源代码；我的版本可能会更慢，更粗糙。我有几个问题，但感谢您提供超出我的问题的任何见解。

当在文档对象上调用时，会搜索整个文档，包括根节点。

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

注意：我是 JavaScript 新手，对 HTML、CSS 和 jQuery 的经验更少。

【问题讨论】：

document.getElementsByClassName 是用本机代码编写的，如果你正在编写一个 polyfill，它的内部工作方式并不是很有趣，因为无论如何你可能不得不使用getElementsByTagName，你只需要知道它是做什么的，它通过类名获取元素
另外，元素可以有多个类
元素可以有 0 到多个类。 、、 都是有效的。
下面是你如何填充它 -> gist.github.com/eikes/2299607
不需要使用正则表达式，因为它操作的是DOM，而不是HTML源代码。

标签： javascript html document

【解决方案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

【讨论】：

它在什么时候调用自己？换句话说，执行递归调用需要满足什么条件？

【解决方案2】：

所有像这样的 Javascript 方法都在 DOM 上运行，而不是在 HTML 源代码上运行。加载 HTML 时，浏览器将 HTML 解析为 DOM，DOM 是一种数据结构，其中包含表示文档内容的对象。所以它不需要做模式匹配，它只是在数据结构中搜索类列表中包含指定类的元素。
元素可以有多个类，这很常见。例如，您可能有一个用于所有按钮的button 类，以及一个用于活动元素的active 类。然后活动按钮可能是contents。
元素以HTMLCollection 形式返回。这是一个类似数组的对象，因此您可以使用elements.length 来获取元素的数量，并使用elements[i] 来访问集合中的特定元素。它也是一个“实时”集合，这意味着如果您更改 DOM，该集合将自动更新以反映更改（例如，如果您从对象中删除类，它将不再在集合中）。

【讨论】：