blocks|key|1269382|text|我们可以通过使用document.querySelector()和document.querySelectorAll()方法在DOM中使用属性选择器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1269383|对于你的：|1269384|document.querySelector("[myAttribute='aValue']");|code-block|syntax|javascript|1269385|并通过使用querySelectorAll()|1269386|document.querySelectorAll("[myAttribute='aValue']");|1269387|在querySelector()和querySelectorAll()方法中，我们可以像在"CSS“中选择一样来选择对象。|1269388|有关https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors中的"CSS“属性选择器的详细信息|1269389|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors^0|8|O|X|R|0|0|0|5|I|0|0|1|F|H|I|0|2|1W|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|U|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

We can use attribute selector in DOM by using <code>document.querySelector()</code> and <code>document.querySelectorAll()</code> methods.
for yours:
<pre><code>document.querySelector(&quot;[myAttribute='aValue']&quot;);
</code></pre>
and by using <code>querySelectorAll()</code>:
<pre><code>document.querySelectorAll(&quot;[myAttribute='aValue']&quot;);
</code></pre>
In <code>querySelector()</code> and <code>querySelectorAll()</code> methods we can select objects as we select in &quot;CSS&quot;.
More about &quot;CSS&quot; attribute selectors in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors</a>

blocks|key|1054560|text|FindByAttributeValue("Attribute-Name",+"Attribute-Value");+++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1054561|附注：如果您知道确切的元素类型，则需要添加第三个参数(即div,+a,+p+...etc...)：|unstyled|offset|length|style|CODE|1054562|FindByAttributeValue("Attribute-Name",+"Attribute-Value",+"div");+++|1054563|但是首先，定义这个函数：|1054564|function+FindByAttributeValue(attribute,+value,+element_type)++++{
++element_type+=+element_type+%7C%7C+"*";
++var+All+=+document.getElementsByTagName(element_type);
++for+(var+i+=+0;+i+<+All.length;+i%2B%2B)+++++++{
++++if+(All[i].getAttribute(attribute)+==+value)+{+return+All[i];+}
++}
}|1054565|附注：根据评论和建议进行更新。|1054566|entityMap^0|0|S|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@$G|W|H|X|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>FindByAttributeValue("Attribute-Name", "Attribute-Value"); 
</code></pre>

p.s. if you know exact element-type, you add 3rd parameter (i.e.<code>div, a, p ...etc...</code>):

<pre><code>FindByAttributeValue("Attribute-Name", "Attribute-Value", "div"); 
</code></pre>

but at first, define this function:

<pre><code>function FindByAttributeValue(attribute, value, element_type) {
 element_type = element_type || "*";
 var All = document.getElementsByTagName(element_type);
 for (var i = 0; i &lt; All.length; i++) {
 if (All[i].getAttribute(attribute) == value) { return All[i]; }
 }
}
</code></pre>

p.s. updated per comments recommendations.

blocks|key|1269427|text|使用查询选择器，示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1269428|document.querySelectorAll('+input[name],+[id%7C=view],+[class~=button]+')|code-block|syntax|javascript|1269429|具有name属性的input[name]输入元素。|offset|length|style|CODE|1269430|id以view-开头的[id%7C=view]元素。|1269431|具有button类的[class~=button]元素。|1269432|entityMap^0|0|0|2|4|9|B|0|3|5|B|A|0|2|6|A|F|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$I|10|J|11|K|L]|$I|12|J|13|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@$I|15|J|16|K|L]|$I|17|J|18|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|R|$]]

Use query selectors, examples:

<pre><code>document.querySelectorAll(' input[name], [id|=view], [class~=button] ')
</code></pre>

<code>input[name]</code> Inputs elements with <code>name</code> property.

<code>[id|=view]</code> Elements with id that start with <code>view-</code>.

<code>[class~=button]</code> Elements with the <code>button</code> class.

blocks|key|1054608|text|您可以使用getAttribute：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1054609|+var+p+=+document.getElementById("p");
+var+alignP+=+p.getAttribute("align");|code-block|syntax|javascript|1054610|https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute|offset|length|1054611|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

you could use getAttribute:

<pre><code> var p = document.getElementById("p");
 var alignP = p.getAttribute("align");
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute</a>

blocks|key|1269319|text|下面是一个示例，如何通过src属性搜索文档中的图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1269320|document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");|code-block|syntax|javascript|1269321|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is an example , How to search images in a document by src attribute :

<pre><code>document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");
</code></pre>

blocks|key|1054740|text|下面是如何使用querySelector进行选择|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1054741|document.querySelector("tagName[attributeName='attributeValue']")|code-block|syntax|javascript|1054742|entityMap^0|7|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Here's how you can select using <code>querySelector</code>:
<pre><code>document.querySelector(&quot;tagName[attributeName='attributeValue']&quot;)
</code></pre>

blocks|key|1054749|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1054750|function+optCount(tagId,+tagName,+attr,+attrval)+{
++++inputs+=+document.getElementById(tagId).getElementsByTagName(tagName);

++++if+(inputs)+{
++++++++var+reqInputs+=+[];

++++++++inputsCount+=+inputs.length;

++++++++for+(i+=+0;+i+<+inputsCount;+i%2B%2B)+{

++++++++++++atts+=+inputs[i].attributes;
++++++++++++var+attsCount+=+atts.length;

++++++++++++for+(j+=+0;+j+<+attsCount;+j%2B%2B)+{

++++++++++++++++if+(atts[j].nodeName+==+attr+&&+atts[j].nodeValue+==+attrval)+{
++++++++++++++++++++reqInputs.push(atts[j].nodeName);
++++++++++++++++}
++++++++++++}
++++++++}
++++}
++++else+{
++++++++alert("no+such+specified+tags+present");
++++}
++++return+reqInputs.length;
}//optcount+function+closed|code-block|syntax|javascript|1054751|1054752|这是一个函数，用于选择具有特定属性值的特定标签。要传递的参数是标记ID，然后是标记名称-在该标记ID内，以及属性和第四个属性值。此函数将返回具有指定属性及其值的元素的数量。您可以根据自己的需要进行修改。|1054753|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function optCount(tagId, tagName, attr, attrval) {
 inputs = document.getElementById(tagId).getElementsByTagName(tagName);

 if (inputs) {
 var reqInputs = [];

 inputsCount = inputs.length;

 for (i = 0; i &lt; inputsCount; i++) {

 atts = inputs[i].attributes;
 var attsCount = atts.length;

 for (j = 0; j &lt; attsCount; j++) {

 if (atts[j].nodeName == attr &amp;&amp; atts[j].nodeValue == attrval) {
 reqInputs.push(atts[j].nodeName);
 }
 }
 }
 }
 else {
 alert("no such specified tags present");
 }
 return reqInputs.length;
}//optcount function closed</code></pre>
</div>
</div>

This is a function which is is used tu to select a particular tag with specific attribute value. The parameters to be passed are are the tag ID, then the tag name - inside that tag ID, and the attribute and fourth the attribute value.
This function will return the number of elements found with the specified attribute and its value.
You can modify it according to you.

Can you please tell me if there is any DOM API which search for an element with given attribute name and attribute value:

Something like:

<pre><code>doc.findElementByAttribute("myAttribute", "aValue");
</code></pre>

Find an element in DOM based on an attribute value

您能告诉我是否有DOM API可以搜索具有给定属性名称和属性值的元素：类似于：doc.findElementByAttribute("myAttribute", "aValue");

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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