Javascript 通过属性名称获取 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7647095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting HTML elements by their attribute names
提问by Saurabh Saxena
There are methods available in JavaScript to get HTML elements using their ID, Class and Tag.
JavaScript 中有一些方法可以使用它们的 ID、类和标签来获取 HTML 元素。
document.getElementByID(*id*);
document.getElementsByClassName(*class*);
document.getElementsByTagName(*tag*);
Is there any method available to get the elements according to the attribute name.
是否有任何方法可以根据属性名称获取元素。
EX:
前任：
<span property="v:name">Basil Grilled Tomatoes and Onions</span>
Like:
喜欢：
document.getElementsByAttributeName("property");
回答by lonesomeday
Yes, rthe function is querySelectorAll(or querySelectorfor a single element), which allows you to use CSS selectors to find elements.
是的，rthe 函数是querySelectorAll（或querySelector用于单个元素），它允许您使用 CSS 选择器来查找元素。
document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property=value]'); // All with "property" set to "value" exactly.
(Complete list of attribute selectors on MDN.)
This finds all elements with the attribute property. It would be better to specify a tag name if possible:
这将查找具有 attribute 属性的所有元素。如果可能，最好指定一个标签名称：
document.querySelectorAll('span[property]');
You can work around this if necessary by looping through all the elements on the page to see whether they have the attribute set:
如有必要，您可以通过遍历页面上的所有元素来查看它们是否设置了属性来解决此问题：
var withProperty = [],
els = document.getElementsByTagName('span'), // or '*' for all types of element
i = 0;
for (i = 0; i < els.length; i++) {
if (els[i].hasAttribute('property')) {
withProperty.push(els[i]);
}
}
Libraries such as jQuery handle this for you; it's probably a good idea to let them do the heavy lifting.
诸如 jQuery 之类的库会为您处理这个问题；让他们做繁重的工作可能是个好主意。
Note that querySelectorAllwas introduced in IE8 and fully supported in IE9. All modern browserssupport it.
请注意，它querySelectorAll是在 IE8 中引入的，并在 IE9 中得到完全支持。所有现代浏览器都支持它。
回答by IceMan
In jQuery this is so:
在 jQuery 中是这样的：
$("span['property'=v:name]"); // for selecting your span element
回答by Fabio Montefuscolo
Just another answer
只是另一个答案
Array.prototype.filter.call(
document.getElementsByTagName('span'),
function(el) {return el.getAttribute('property') == 'v.name';}
);
In future
在未来
Array.prototype.filter.call(
document.getElementsByTagName('span'),
(el) => el.getAttribute('property') == 'v.name'
)
回答by Paula Fleck
You can use querySelectorAll:
您可以使用querySelectorAll：
document.querySelectorAll('span[property=name]');
回答by Bas Slagter
I think you want to take a look at jQuerysince that Javascript library provides a lot of functionality you might want to use in this kind of cases. In your case you could write (or find one on the internet) a hasAttribute method, like so (not tested):
我认为您想看看jQuery，因为该 Javascript 库提供了许多您可能希望在这种情况下使用的功能。在您的情况下，您可以编写（或在互联网上找到）一个 hasAttribute 方法，如下所示（未测试）：
$.fn.hasAttribute = function(tagName, attrName){
var result = [];
$.each($(tagName), function(index, value) {
var attr = $(this).attr(attrName);
if (typeof attr !== 'undefined' && attr !== false)
result.push($(this));
});
return result;
}
回答by gtamil
You can get attribute using javascript,
您可以使用javascript获取属性，
element.getAttribute(attributeName);
Ex:
前任：
var wrap = document.getElementById("wrap");
var myattr = wrap.getAttribute("title");
Refer:
参考：
回答by Alain Beauvois
With prototypejs:
使用prototypejs：
$$('span[property=v.name]');
or
或者
document.body.select('span[property=v.name]');
Bothreturn an array
两者都返回一个数组
