根据属性值在DOM中查找元素

在过去的几年里，情况发生了巨大的变化。你现在可以可靠地使用querySelector和querySelectorAll，参见Wojtek的回答了解如何做到这一点。

现在不需要jQuery依赖项了。如果你正在使用jQuery，很好……如果不是这样，就不需要再依赖它来按属性选择元素了。

在普通javascript中并没有一个非常简单的方法来做到这一点，但是有一些可用的解决方案。

你可以这样做，循环遍历元素并检查属性

如果像jQuery这样的库是一个选项，你可以更容易一点，像这样:

$("[myAttribute=value]")

如果值不是有效的CSS标识符(它有空格或标点符号等)，则需要在值周围加上引号(可以是单引号或双引号):

$("[myAttribute='my value']")

你也可以做start-with， ends-with， contains，等等……

现代浏览器支持原生querySelectorAll，所以你可以:

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

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll < a href = " https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll " > < / >

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

• < a href = " http://quirksmode.org/dom/core/ t14 " > http://quirksmode.org/dom/core/ t14 < / >
• http://caniuse.com/queryselector < a href = " http://caniuse.com/queryselector " > < / >

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

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

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

附注:如果你知道确切的元素类型，你可以添加第三个参数(即__abc0):

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]; }
}
}

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

下面是一个例子，如何通过src属性在文档中搜索图像:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

你可以使用getAttribute:

 var p = document.getElementById("p");
var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

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

你的:

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

和使用querySelectorAll():

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

在querySelector()和querySelectorAll()方法中，我们可以选择在“;CSS"”中选择的对象。

更多关于“CSS"https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors中的属性选择器

使用查询选择器，示例如下:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]输入具有name属性的元素。

[id|=view] id以view-开头的元素。

具有button类的[class~=button]元素。

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

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

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内的标签名)，属性，第四个是属性值。 此函数将返回指定属性中找到的元素数量及其值。

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