javascript - 如何通过javaScript查找html节点

Question

我不是 html 或 javaScript 程序员，因此，我有一个关于通过 javaScript 查找 html 节点的问题？

我目前正在决定是否为每个 html 节点使用类属性或数据属性，并且不确定是否有关于如何通过 javaScript 查找 html 节点的标准实践？

情况如下:

我有 x 个 html 节点需要通过 javaScript 找到。这些 html 节点有时会被多个 javaScript 函数找到，为此需要使用不同的属性进行标识。因此，我的意思是，在某些情况下，一个 html 节点需要具有多个属性，并且在某些情况下，需要在多个 html 节点之间使用相同的属性(或等效属性)。

由于上述原因，我认为使用类属性是正确的。

这是一个例子:

HTML 节点 1:

<div class="attribute-1 attribute-2"></div>

Html 节点 2:

<div class="attribute-2"></div>

JavaScript 函数 1:

需要获取所有具有该属性的html节点:

attribute-1

JavaScript函数2:

需要获取所有具有该属性的html节点:

attribute-2

我发现这个资源指出不应这样做:http://roytomeij.com/blog/2012/dont-use-class-names-to-find-HTML-elements-with-JS.html

我还发现了以下信息:

查询 DOM 主要有 5 种方式:

1. 获取ElementById
2. getElementsByTagName
3. getElementsByName
4. getElementsByClassName(IE<9 除外)
5. querySelector(兼容模式下的 IE<8 和 IE8 除外)

所以基本上，我问，应该如何使用 javaScript 找到 html 节点，我自己在哪里装饰 html 节点？我应该使用类、数据属性还是其他东西？

Answer 1

这在很大程度上取决于您的 HTML 页面的结构以及您的目标。

例如元素:

<tag id="myId" class="myClass"/>

可以通过以下任一方式检索:

var element = document.getElementById("myId"); // 1 element
var elements = document.getElementsByClassName("myClass"); // 1+ elements
var elements = document.getElementsByTagName("tag"); // 1+ elements

请注意:

• id 属性保证，如果 HTML 页面设计正确，页面中应该只有一个具有指定 id 的元素，因此通过使用 getElementById() 您将从 DOM 中检索单个元素
• getElementsByClassName()、getElementsByTagName() 和 getElementsByName() 根据元素的类、标签和名称检索元素。由于这些不是唯一的(即，可能有多个元素报告相同的类、标签或名称)，因此您将检索一个元素列表，您必须正确遍历该列表才能找到您正在查找的元素