通过属性/属性值查找元素

Question

鉴于以下情况：

  ...
     <tr xyz="Alpha"> ... </tr>
     <tr xyz="Bravo"> ... </tr>
     <tr xyz="Delta"> ... </tr>
  ...

除了创建getElementsByTagName()循环并测试每个返回的元素外，我如何获取具有xyz =“Bravo”的行呢？

xyz是属性还是属性?

- Brian Wren

---

属性是放在HTML元素上的设置。属性是与JavaScript语言中的元素相关联的设置。 - Travis J

经检查，对于具有onclick和此附加项（xyz =“”）的TR，IE调试器将“xyz”列为属性，特别是（其中obj是对行的引用）obj.attributes [1]。 - Brian Wren

xyz 在元素本身上，因此它是一个属性（也可以使用 getAttribute 在本地 API 中使用）。 - Travis J

那么是否有一种类似于getElementById()的方法，可以获取具有特定值的“xyz”属性的元素？ - Brian Wren

是的，Amit在他的回答中提供了这个。 - Travis J

Answer 1

xyz不是有效的属性或属性，但在HTML5中引入的数据属性是有效的。

您可以按以下方式使用它们：

     <tr data-xyz="Alpha"> ... </tr>
     <tr data-xyz="Bravo"> ... </tr>
     <tr data-xyz="Delta"> ... </tr>

接下来，您可以使用 .querySelector() 查找特定元素。

document.querySelector('[data-xyz="Bravo"]');

如果您想仅限于搜索，则可以按照以下方式操作：

document.querySelector('tr[data-xyz="Bravo"]');

- Amit Joki