通过属性名称获取 HTML 元素

Question

JavaScript 中有一些方法可以使用 HTML 元素的 ID、类和标签来获取它们。

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

有没有什么方法可以根据属性名称获取元素。

例如：

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

喜欢：

document.getElementsByAttributeName("property");

Answer 1

是的，该函数是 querySelectorAll （或 querySelector 对于单个元素），它允许您使用 CSS 选择器来查找元素。

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property="value"]'); // All with "property" set to "value" exactly.

（MDN 上属性选择器的完整列表。）

这会找到所有具有 attribute 属性的元素。如果可能的话，最好指定一个标签名称：

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 这样的库会为您处理这个问题；让他们承担繁重的工作可能是个好主意。

对于使用古代浏览器的任何人，请注意 querySelectorAll 是在 v8 (2009) 中引入 Internet Explorer 的，并且在 IE9 中得到完全支持。所有现代浏览器都支持它。

Answer 2

假设您有一个输入：

         <input type='text' name='from'/>
  

那么您可以按如下方式访问它：

        document.querySelector('input[name="from"]')

Answer 3

您可以使用querySelectorAll：

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

Answer 4

在 jQuery 中是这样的：

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

Answer 5

只是另一个答案

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'
)

第 3 方编辑

介绍

• call() 方法 使用给定的 this 值和单独提供的参数调用函数。

• filter() 方法 创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

鉴于此 html 标记，

<span property="a">apple - no match</span>
<span property="v:name">onion - match</span>
<span property="b">root - match</span>
<span property="v:name">tomato - match</span>
<br />
<button onclick="findSpan()">find span</button>

您可以使用此 javascript

function findSpan(){

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

请参阅 演示

Answer 6

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

Answer 7

您可以使用 javascript 获取属性，

element.getAttribute(attributeName);

例如：

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

请参阅：

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

Answer 8

使用 prototypejs ：

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

或

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

两者返回一个数组