On Tue, 9 May 2017 09:45:43 +0100 Mark Crutch <markc@...2744...> wrote:
On Tue, May 9, 2017 at 1:19 AM, Steve Litt <slitt@...2357...> wrote:
CSS selectors are powerful things these days (though still with some limitations), and a well crafted querySelector() can save a lot of DOM traversal in code.
How about browser support? What are the limitations you mention? These CSS type queries certainly seem more intuitive to someone knowing CSS, but before I switch to them I'd like to check for any downsides.
Support is excellent - all the way back to IE9 (and IE8, if you limit the choice of selectors).
This caniuse.com seems like an excellent resource. Thanks!
It looks like .querySelector() works with major browsers back at least 5 years, and that's good enough. Actually, according to this page, my user of <embed/> is a bigger problem.
The limitations are purely those inherent in CSS selectors in general
- e.g. that you can only select descendants of your chosen node, not
its ancestors,
Sounds pretty good to me. If I wanted to cast a wider net, I'd do document.querySelector('.whatever') instead of myElement.querySelector('.whatever').
and that there's no CSS selector for "the current node itself" ("this", if you will). None if this is likely to affect your use of them, and as a replacement for getElement(s)By... there are no real downsides.
Thanks.
By putting a click handler on the group, and passing both "evt" and
"this" you can get a reference to the object that was clicked ("evt.target") and the group itself ("this").
Other than demonstrating "this" and "if (e) e.stopPropagation();", is there a benefit to putting "onclick=change_all_colours();" on the group rather than on each losenge? I think the behavior would be identical, it would have simplified change_fill(), and would have required only one argument for change_fill().
No, it was purely demonstrative to show that you can put a handler on the <g> and use "this" to get a reference to the group.
After considerable thought, my screwhead and LED objects will have the methods on the group, use "this" instead of e.currentTarget or a parent-looping use of e.target to find the group, and mygroup.querySelector('.screwhead') to find the subcomponent that will change colors. By doing this, I eliminate the transparent cover, which could become somewhat important when I'm making over 100 copies of these group objects.
When you clued me in to 'this', it opened a world of possibilities.
Thanks
SteveT
Steve Litt May 2017 featured book: Twenty Eight Tales of Troubleshooting http://www.troubleshooters.com/28