3 ms·
> Firstly, it doesn't tell the reader that every method of selecting elements listed is available on both a Document and an Element. https://developer.mozilla.
by austincheney 7y ago
> Firstly, it doesn't tell the reader that every method of selecting elements listed is available on both a Document and an Element.
https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeTy...
Just about everything on the Element node type is available directly on the Document. The document is actually a node type in the DOM. In JavaScript the DOM methods are populated on the global objects Element and Document and that is visible in the browser console with:
Document.prototype
You can see that the prototypes are almost but not exactly identical and both inherit from the global Node object. The page could have dived into that level of detail, but I think that largely misses the point. Most JavaScript developers are irrationally scared to death of the DOM and that page is trying to be a friendly low friction reference. If somebody were really looking for that level of granularity they could go to MDN or the DOM spec.
> but browsers don't enforce ID uniqueness
Actually, the browsers do. This isn't a browser shortcoming. It is an HTML shortcoming. If the code were parsed as XML the browser would point to the location of this violation.
> .querySelectorAll() does not return a list of elements. It returns a NodeList
Same thing. Node lists are iterable lists but are not a form of Array where the only practical difference is that a node list does not have the Array.prototype methods.
> The page that does talk about selecting children (https://htmldom.dev/select-the-children-of-an-element https://htmldom.dev/select-the-children-of-an-element) of an element suggests using an element's childNode array. That's horrible. There could be all manner of strange things in there. Just use an element.querySelector() call.
Suggesting reliance on the convenience of the querySelector method is bad advise, especially from a learning and reference perspective. The querySelector method executes thousands of times slower than the other more specific methods because it requires a parse step. Also I see no danger of using the childNodes property. Simply don't make the blanket assumption that everything in the DOM is limited to element and text node types.
- orange8 7y ago> The querySelector method executes thousands of times slower than the other more specific methods Do you mean this literally?
- austincheney 7y agoYes. Test it yourself on JSBench https://jsbench.github.io/ https://jsbench.github.io/
- orange8 7y agoWhy link to a blank page? It was an honest question, no need to be snarky. I'll just take that as "I've no real facts about the numbers am throwing about" answer. Thanks
- austincheney 7y agoIt’s a benchmark tool that runs in your browser. You have to supply code samples to compare to see the numbers.
- orange8 7y agoA benchmark tool. Wow! Thanks for that snarkboy, I never would have known! Again, I wasn't asking for proof or tests, or links to blank benchmark tools where I could write the tests myself. I simply asked if you meant 1000 times faster literally or figuratively as that is a HUGE and significant difference. A more civil response: "Yes, I mean literally. See https://jsperf.com/queryselectorall-vs-getelementsbytagname/164" https://jsperf.com/queryselectorall-vs-getelementsbytagname/...
- dillonmckay 7y agoChill out, dude.