你能告诉我是否有任何DOM API可以搜索给定属性名和属性值的元素吗?

喜欢的东西:

doc.findElementByAttribute("myAttribute", "aValue");

当前回答

function optCount(tagId, tagName, attr, attrval) { inputs = document.getElementById(tagId).getElementsByTagName(tagName); if (inputs) { var reqInputs = []; inputsCount = inputs.length; for (i = 0; i < inputsCount; i++) { atts = inputs[i].attributes; var attsCount = atts.length; for (j = 0; j < attsCount; j++) { if (atts[j].nodeName == attr && atts[j].nodeValue == attrval) { reqInputs.push(atts[j].nodeName); } } } } else { alert("no such specified tags present"); } return reqInputs.length; }//optcount function closed

这是一个函数,用于选择具有特定属性值的特定标签。要传递的参数是标签ID,然后是标签名(标签ID内的标签名),属性,第四个是属性值。 此函数将返回指定属性中找到的元素数量及其值。 你可以根据自己的需要修改。

其他回答

FindByAttributeValue("Attribute-Name", "Attribute-Value");   

附注:如果你知道确切的元素类型,你可以添加第三个参数(i.e.div, a, p…等等…):

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");   

但首先,定义这个函数:

function FindByAttributeValue(attribute, value, element_type)    {
  element_type = element_type || "*";
  var All = document.getElementsByTagName(element_type);
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}

附注:根据评论建议更新。

现代浏览器支持本机querySelectorAll,所以你可以:

document.querySelectorAll('[data-foo="value"]');

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

浏览器兼容性的详细信息:

http://quirksmode.org/dom/core/#t14 http://caniuse.com/queryselector

你可以使用jQuery来支持过时的浏览器(IE9及更老版本):

$('[data-foo="value"]');

Daniel De León的回答 它可以用来搜索 ^= - filters id(或任何其他attr)以view关键字开头的元素

document.querySelectorAll("[id^='view']")

下面是如何使用querySelector进行选择:

document.querySelector("tagName[attributeName='attributeValue']")

我们可以通过使用document.querySelector()和document.querySelectorAll()方法在DOM中使用属性选择器。

你的:

document.querySelector("[myAttribute='aValue']");

使用querySelectorAll():

document.querySelectorAll("[myAttribute='aValue']");

在querySelector()和querySelectorAll()方法中,我们可以像在“CSS”中一样选择对象。

关于“CSS”属性选择器的更多信息,请参见https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors