你能告诉我是否有任何DOM API可以搜索给定属性名和属性值的元素吗?
喜欢的东西:
doc.findElementByAttribute("myAttribute", "aValue");
你能告诉我是否有任何DOM API可以搜索给定属性名和属性值的元素吗?
喜欢的东西:
doc.findElementByAttribute("myAttribute", "aValue");
当前回答
Daniel De León的回答 它可以用来搜索 ^= - filters id(或任何其他attr)以view关键字开头的元素
document.querySelectorAll("[id^='view']")
其他回答
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]; }
}
}
附注:根据评论建议更新。
更新:在过去的几年里,情况发生了巨大的变化。你现在可以可靠地使用querySelector和querySelectorAll,参见Wojtek的答案如何做到这一点。
现在不需要jQuery依赖项了。如果你正在使用jQuery,很好……如果不是这样,就不需要再依赖它来按属性选择元素了。
在普通javascript中并没有一个非常简单的方法来做到这一点,但是有一些可用的解决方案。
您可以这样做,遍历元素并检查属性
如果你可以选择jQuery这样的库,你可以简单一点,像这样:
$("[myAttribute=value]")
如果值不是一个有效的CSS标识符(它有空格或标点符号等),你需要在值周围加引号(它们可以是单引号或双引号):
$("[myAttribute='my value']")
你还可以使用start-with, end -with, contains等等。属性选择器有几个选项。
你可以使用getAttribute:
var p = document.getElementById("p");
var alignP = p.getAttribute("align");
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
Daniel De León的回答 它可以用来搜索 ^= - filters id(或任何其他attr)以view关键字开头的元素
document.querySelectorAll("[id^='view']")
现代浏览器支持本机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"]');