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

2020/10/08 08:40 · javascript ·  · 0评论

您能告诉我是否有任何DOM API搜索具有给定属性名称和属性值的元素:

就像是:

doc.findElementByAttribute("myAttribute", "aValue");

更新:在过去几年中,情况发生了巨大变化。现在您可以可靠地使用querySelectorquerySelectorAll有关如何执行操作,请参见Wojtek的答案

现在不需要jQuery依赖项。如果您使用的是jQuery,那就太好了……如果您不使用jQuery,则不必再依赖于仅通过属性选择元素了。


在Vanilla javascript中,执行此操作的方法不是很短,但是有一些可用的解决方案。

您可以执行以下操作,遍历元素并检查属性

如果可以选择jQuery这样的库,则可以更轻松一些,例如:

$("[myAttribute=value]")

如果该值不是有效的CSS标识符(在其中包含空格或标点符号等),则需要在该值两边加上引号(它们可以是单引号或双引号):

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

你也可以做start-withends-withcontains等...还有的属性选择多个选项

现代浏览器支持本机,querySelectorAll因此您可以执行以下操作:

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Document.querySelectorAll

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

您可以使用jQuery支持过时的浏览器(IE9和更早版本):

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

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

为您的:

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

并使用querySlectorAll()

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

querySelector()querySelectorAll()方法中,我们可以像在“ CSS”中选择对象一样选择对象。

有关https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors的“ CSS”属性选择器的更多信息

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

ps如果您知道确切的元素类型,则添加第三个参数(即div, a, p ...etc...):

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

ps根据评论建议进行了更新。

这是一个示例,如何通过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/zh-CN/docs/Web/API/Element/getAttribute

使用查询选择器,例如:

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

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

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

[class~=button]button类的元素

本文地址:http://javascript.askforanswer.com/genjushuxingzhizaidomzhongchazhaoyuansu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!