Closed
Bug 1439798
Opened 7 years ago
Closed 7 years ago
querySelectorAll is not working - [x='y' i]
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: u608644, Unassigned)
References
Details
Attachments
(1 file)
|
770 bytes,
application/zip
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20100101
Steps to reproduce:
querySelectorAll()
// failed to capture <div class="exactly">
x=document.querySelectorAll("[class='exactly' i]");
// capture <div class="exactly">
x=document.querySelectorAll("[class^='exactly' i]");
https://drafts.csswg.org/selectors-4/#overview
E[foo="bar" i]
Actual results:
see above
Expected results:
x=document.querySelectorAll("[class='exactly' i]"); should capture <div class="exactly">
|
||
Updated•7 years ago
|
Component: Untriaged → DOM
Product: Firefox → Core
|
|
||
Comment 1•7 years ago
|
||
I can't reproduce this in either current nightly, current nightly without stylo, or Firefox 52. This testcase:
data:text/html,<div class="exactly"></div><script>alert(document.querySelectorAll("[class='exactly' i]").length)</script>
alerts "1" in all three.
John, can you please point me to a page that shows the problem you're running into, or attach such a page to this report?
Not from webpage.
http://test.com/:
<html><body>
<div class="no">no.</div>
</html>
Webextension:
"content_scripts":[{"matches":["http://*/*"],"js":["test.js"],"run_at":"document_end"}]
test.js:
var aaa=document.querySelectorAll("[class='no' i],[id='no' i]");
for(var i=0;i<aaa.length;i++){if (aaa[i]){console.log('ok no');}}
[x='y' i] is just not working.
#y or .y or [x^='y' i] works.
|
|
||
Comment 3•7 years ago
|
||
OK, so I tried this:
1) Unzip the zip file I am attaching.
2) Start Firefox 52 with a clean profile.
3) Load about:debugging#addons
4) Click "Load Temporary Add-On".
5) Select the manifest.json from the attached extension. The
"querySelectorAll tester" extension should now appear in the
list shown on that page.
6) Open a new tab.
7) Open the web console.
8) Load http://web.mit.edu/bzbarsky/www/testcases/css-selectors/test-page-for-extensions.html
I see "ok no" logged once in the console, as expected.
Just to double-check, what exact Firefox version are you using? Do you see the problem in that version with the extension I am attaching?
Your extensions works.
I have no idea. I use both latest Firefox and ESR firefox.
<pre class="js-cli--demo is-invisible terminal"> <--- *this*
<span class="js-line terminal-line somewhat">...
a=document.querySelectorAll("[class='terminal' i],...otherselectors...");
<pre> class have js-cli--demo & is-invisible & terminal.
qSA should capture it because it has 'terminal' in classes.
If I replace [class='terminal' i] to [class^='terminal' i] it works.
Why Mozilla wiki didn't have this kind of example? Am I the only one on earth who having this problem?
^ I can't use .terminal because I want to capture other variants such as <div class="terMINaL">.
https://threatpost.com/new-bec-spam-campaign-target-fortune-500-businesses/130012/
<aside id="text-13" class="widget-odd widget-last widget-first widget-1 header-banner--ad widget widget_text">
<div class="textwidget"><p>......</aside>
document.querySelectorAll("[class$='-ad' i]");
NodeList []
document.querySelectorAll("aside[class$='-ad' i]");
NodeList []
document.querySelectorAll("[class*='-ad' i]");
NodeList [ aside#text-13.widget-odd.widget-last.widget-first.widget-1.header-banner--ad.widget.widget_text ]
|
|
||
Comment 7•7 years ago
|
||
> <pre class="js-cli--demo is-invisible terminal"> <--- *this*
> a=document.querySelectorAll("[class='terminal' i],...otherselectors...");
Well, that shouldn't match, because the value of the class attribute is not a case-insensitive match for the string "terminal", right? "terminal" is a substring of the value, but not the whole value, and [class='terminal' i] will match only if the whole value is a case-insensitive version of "terminal".
> <pre> class have js-cli--demo & is-invisible & terminal.
Yes, it does.
> qSA should capture it because it has 'terminal' in classes.
No, because you're not matching on the classes, but on the value of the class attribute...
> If I replace [class='terminal' i] to [class^='terminal' i] it works.
It does? I wouldn't think so, in this case, since "js-cli--demo is-invisible terminal" doesn't start with "terminal".
> I can't use .terminal because I want to capture other variants such as <div class="terMINaL">.
Right, so you're not matching on classes, which are case-sensitive...
> <aside id="text-13" class="widget-odd widget-last widget-first widget-1 header-banner--ad widget widget_text">
> <div class="textwidget"><p>......</aside>
> document.querySelectorAll("[class$='-ad' i]");
Should not match nothing, because the last three chars of the two class attributes are "ext" and "get" respectively, neither one of which matches "-ad".
> document.querySelectorAll("aside[class$='-ad' i]");
Should match nothing, for the same reason.
> document.querySelectorAll("[class*='-ad' i]");
Now you're doing a substring match, which matches because the substring "-ad" is in there, sure.
It really sounds like you want to be doing either [class*="whatever" i] or [class~="whatever" i] depending on the behavior you want. But [class="whatever" i] is working correctly in all the examples you give in comment 4 and comment 6. If those are the actual examples you started with, and comment 0 was a simplification that doesn't actually exhibit the behavior you're having a problem with, then I don't see what the bug is here.
I appreciate your time for writing detailed information, but I still have question.
This bugzilla page:
(1) document.querySelectorAll(".skin-standard")
NodeList [ <body.bugzilla-mozilla-org.skin-standard.bug_modal.yui-skin-sam> ]
(2) document.querySelectorAll("[class='skin-standard']")
NodeList [ ]
(3) document.querySelectorAll("[class='skin-standard' i]")
NodeList [ ]
Would you tell me why method 2 and 3 return nothing?
Isn't (2) === (1) ?
.skin-standard -- Class is skin-standard.
[class='skin-standard'] -- Any tag with class is skin-standard.
> you want to be doing either [class*="whatever" i] or [class~="whatever" i]
This will cause a problem because the method will catch other parts such as 'some-whatever-thing'.
I've used [class='whatever' i] but I found this method can't catch some tags.
I had to replace it to [class ^='whatever' i] or ".whatever,.Whatever",.WHATEVER.
AMO wiki: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
> > <aside id="text-13" class="widget-odd widget-last widget-first widget-1 header-banner--ad widget widget_text">
> > <div class="textwidget"><p>......</aside>
> > document.querySelectorAll("[class$='-ad' i]");
>
> Should not match nothing, because the last three chars of the two class
> attributes are "ext" and "get" respectively, neither one of which matches
> "-ad".
Firefox knows this <aside> tag have these classes:
widget-odd
widget-last
widget-first
widget-1
header-banner--ad <-- this??
widget
widget_text
> document.querySelectorAll("[class$='-ad' i]");
|
|
||
Comment 10•7 years ago
|
||
> Isn't (2) === (1) ?
No.
> .skin-standard -- Class is skin-standard.
No. ".skin-standard" means "one of the classes of this element is "skin-standard".
> [class='skin-standard'] -- Any tag with class is skin-standard.
No, it's "any tag whose 'class' attribute has the value 'skin-standard'". In this case, the "class" attribute has the value "bugzilla-mozilla-org skin-standard bug_modal yui-skin-sam platform-MacIntel" which is not the string "skin-standard".
> This will cause a problem because the method will catch other parts such as 'some-whatever-thing'.
[class~="whatever" i] will _not_ match things with class="some-whatever-thing". It _will_ match class="some whatever thing", which sounds like what you're looking for.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
|
Assignee | |
Updated•6 years ago
|
Component: DOM → DOM: Core & HTML
You need to log in
before you can comment on or make changes to this bug.
Description
•