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

Question

我已阅读 this and this，但我正在尝试弄清楚 document.getELementbyClassName 的工作原理，以便我可以将其作为练习重新实现。显然，我不想只是模仿源代码；我的版本可能会更慢更粗糙。我有几个问题，但如能提供超出我的问题的见解，我将不胜感激。

When called on the document object, the complete document is searched, including the root node.

它是如何搜索整个文档的？这是否使用某种正则表达式？
document.getElementsByClassName('red test'); 这应该是 return 所有同时具有 red 和 test 类的元素。但是每个元素不是只有one class吗？或者这意味着 red orange test？
数组中的元素return是否正确？类似于 [element1, element2, ...]。我不确定 "array-like."

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

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，这是一个包含 object 的数据结构，表示文档内容。所以它不需要进行模式匹配，它只是在数据结构中搜索 class 列表包含指定 class.
元素可以有多个class，这种情况很常见。例如，您可能对所有按钮使用 button class，对活动元素使用 active class。活动按钮可能是 <span class="button active">contents</span>.
元素在 HTMLCollection 中返回。这是一个array-likeobject，所以你可以用elements.length获取元素的个数，用elements[i]访问collection中的特定元素。它也是一个 "live" collection，这意味着如果您更改 DOM，collection 将自动更新以反映更改（例如，如果您删除 class 从 object 开始，它将不再出现在 collection).

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

Understanding how document.getElementByClassName works - Javascript

html

javascript

document