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

我已经阅读了and，但我正在试图弄清楚

document.getELementbyClassName

是如何工作的，以便作为练习重新实现它。显然，我不想仅仅模仿源代码；我的版本可能会慢得多，更粗糙。我有几个问题，但任何超出我的问题提供的见解是感激的

在document对象上调用时，将搜索整个文档，包括根节点

它如何搜索整个文档？这是否使用某种正则表达式

---

document.getElementsByClassName（'redtest'）

这应该返回同时具有

red

和

test

类的所有元素。但不是每个元素都只有一个属性吗？或者这意味着类似于红橙色测试的东西

在数组中返回元素是否正确？类似于

[element1，element2，…]

。我不确定什么是“阵列式”

---

注意：我是JavaScript新手，对HTML、CSS和jQuery的练习更少

要回答您的问题：

可能是递归的。否则，有很多不同的方法来遍历n元树，这就是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;
}

元素可以有多个类<代码>具有类

foo

、

bar

和

baz

---

回答您的问题：

可能是递归的。否则，有很多不同的方法来遍历n元树，这就是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;
}

元素可以有多个类<代码>具有类

foo

、

bar

和

baz

所有像这样的Javascript方法都在DOM上操作，而不是在HTML源代码上操作。加载HTML时，浏览器将HTML解析到DOM中，DOM是一种包含表示文档内容的对象的数据结构。因此，它不需要进行模式匹配，只需在数据结构中搜索其类列表包含指定类的元素

元素可以有多个类，这是非常常见的。例如，对于所有按钮，您可能有一个

按钮

类，对于活动元素，您可能有一个

活动

类。然后，活动按钮可能是

内容

元素以一种新的方式返回。这是一个类似数组的对象，因此您可以使用

elements.length

获取元素数，并使用

elements[i]

访问集合中的特定元素。它也是一个“活动”集合，这意味着如果更改DOM，集合将自动更新以反映更改（例如，如果从对象中删除类，它将不再位于集合中）

所有像这样的Javascript方法都在DOM上操作，而不是在HTML源代码上操作。加载HTML时，浏览器将HTML解析到DOM中，DOM是一种包含表示文档内容的对象的数据结构。因此，它不需要进行模式匹配，只需在数据结构中搜索其类列表包含指定类的元素

元素可以有多个类，这是非常常见的。例如，对于所有按钮，您可能有一个

按钮

类，对于活动元素，您可能有一个

活动

类。然后，活动按钮可能是

内容

元素以一种新的方式返回。这是一个类似数组的对象，因此您可以使用

elements.length

获取元素数，并使用

elements[i]

访问集合中的特定元素。它也是一个“活动”集合，这意味着如果更改DOM，集合将自动更新以反映更改（例如，如果从对象中删除类，它将不再位于集合中）

---

document.getElementsByClassName

是用本机代码编写的，如果您正在编写一个polyfill，那么它的内部工作方式就不是很有趣了，因为您可能必须使用

getElementsByTagName

无论如何，您需要知道的是它的功能，它还可以按类名获取元素，元素可以有多个类元素可以有0到多个类<代码>

，

，

都是有效的。下面介绍如何多填充它->它不需要使用正则表达式，因为它是在DOM上操作的，而不是在HTML源代码上操作的。

document.getElementsByClassName

是用本机代码编写的，如果您正在编写一个polyfill，那么它的内部工作方式就不是很有趣了，因为您可能必须使用

getElementsByTagName

无论如何，您需要知道的是它的功能，它通过类名获取元素。此外，元素可以有多个类元素可以有0到多个类<代码>

，

，

都是有效的。下面是如何多填充它的->它不需要使用正则表达式，因为它在DOM上操作，而不是在HTML源代码上。它在什么时候调用它