时间戳

首页 > 解决方案 > 如何使用没有 id 的 Javascript 访问元素？

javascript - 如何使用没有 id 的 Javascript 访问元素？

问题描述

我正在尝试使用 Javascript 访问没有 id 且具有共享类名的元素。我怎样才能成功地做到这一点？

我尝试使用document.getElementsbyClassName属性，但由于类名由其他元素共享，这不起作用。

   <a class="sharedClass anotherClass" href="www.mybooks.com" data-m="{"CN":"uniquename"}"> Proceed </a>

我希望能够Proceed从上面的代码中单击元素。请注意，这uniquename是该元素独有的。我想我们可以在这里以某种方式使用它，但我不太确定。

标签： javascript

解决方案

正如@Buffalo 在他的评论中提到的那样，您可以获得共享类名的所有元素的列表，并遍历结果集并检查data-m属性，直到找到您想要的：

var elements = document.getElementsByClassName("sharedClass");
var myElement;
for (var i = 0; i < elements.length; i++) {
  if (elements[i].getAttribute("data-m") == '{"CN":"uniquename"}') {
    myElement = elements[i];
  }
}

console.log(myElement);
<a class="sharedClass anotherClass" href="www.mybooks.com" data-m='{"CN":"uniquename"}'> Proceed </a>
<a class="sharedClass anotherClass" href="www.mybooks.com" data-m='{"CN":"uniquename2"}'> Proceed </a>

您也可以通过利用querySelector来更简洁： 

var myElement = document.querySelector("[data-m='{\"CN\":\"uniquename\"}");
console.log(myElement);
<a class="sharedClass anotherClass" href="www.mybooks.com" data-m='{"CN":"uniquename"}'> Proceed </a>
<a class="sharedClass anotherClass" href="www.mybooks.com" data-m='{"CN":"uniquename2"}'> Proceed </a>

推荐阅读