按属性名称获取HTML元素

JavaScript中有方法可用于获取使用其ID，类和标记的HTML元素。按属性名称获取HTML元素

document.getElementByID(*id*); 
document.getElementsByClassName(*class*); 
document.getElementsByTagName(*tag*);

是否有任何方法可以根据属性名称获取元素。

EX：

<span property="v:name">Basil Grilled Tomatoes and Onions</span>

像：

document.getElementsByAttributeName("property");

来源

2011-10-04 Saurabh Saxena

你能否解释一下为什么你需要做的是专门这样？这是非常低效的，并有更好的方法来处理它。 – 2011-10-04 16:44:38

是的，但它不存在于所有的浏览器。旧版本的Internet Explorer（即版本8之前）不支持它。函数是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.)

此找到与特性属性的所有元素。这将是最好指定标记名称如果可能的话：

document.querySelectorAll('span[property]');

如有必要，您可以解决此通过网页上的所有元素循环，看他们是否有该属性设置：

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

像jQuery这样的库可以为你处理这个问题：让它们完成繁重的工作可能是一个好主意。

来源

2011-10-04 11:23:50 lonesomeday

我想你想看看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; 
}

来源

2011-10-04 11:22:01

在jQuery中是这样：

$("span['property'=v:name]"); // for selecting your span element

来源

2011-10-04 11:28:59 IceMan

-1

你可以得到属性使用JavaScript，

element.getAttribute(attributeName);

例：

var wrap = document.getElementById("wrap"); 
var myattr = wrap.getAttribute("title");

参见：

https://developer.mozilla.org/en/DOM/element.getAttribute

来源

2011-10-04 11:33:17 gtamil

-1

随着prototypejs：

$$('span[property=v.name]');

或

document.body.select('span[property=v.name]');

两个返回阵列

来源

2011-10-04 11:33:47

不适用于铬14.0.835.187 m（Windows） –

只是另一个答案

Array.prototype.filter.call(
    document.getElementsByTagName('span'), 
    function(el) {return el.getAttribute('property') == 'v.name';} 
);

在未来

Array.prototype.filter.call(
    document.getElementsByTagName('span'), 
    (el) => el.getAttribute('property') == 'v.name' 
)

来源

2015-09-02 13:18:00

按属性名称获取HTML元素

回答

相关问题