How useful would it be to have NodeList inherit from Node/Element/etc


#21

@domenic take a look at this code it’s a proxied version prollyfill for document.querySelectorAll, not sure how I would handle method calls if the methods don’t actually exist on the NodeList it’s self. Therefore could this be a reason for a function call proxy trap.

Update

Here’s a jsbin using proxiedNodeList.js


#22

Ok @domenic I figured it out everything’s working the way it should in this jsbin which you’ll have to run in like FF (where Proxies are supported)

So this is the way anything that returns a NodeList should return a NodeList. Now the only thing I’m still wondering is, you’ve said that this would imply all NodeList are sort of Nodes since they inherit from them.

But the truth is NodeList are not inheriting from Node:

let divs = document.querySelectorAll('div');
divs instanceof Node // false

What it’s doing is looping through the nodes and calling those methods if they exist on the node, and for getting the properties checks if the property exist on the nodes return it, and same thing for setting. Allowing me to do this without worry:

let elements = document.querySelectorAll('div,a');
elements.href = 'https://example.com'; // will only set href on <a> elements

Therefore it’s not a Node. But I guess what your saying is that “it seems as if it’s a node”? So again the only option I see is having different names for the methods?

But then there’s this problem:

let divs = document.querySelectorAll('div');
elements.textContent = 'Hello';

Setting the textContent that way makes it seem as if it’s a Node right?

The only other option is to have no use of Proxies and only allow:

let divs = document.querySelectorAll('div');
// only allow the following:
divs.get('className'); // returns ids
divs.set('className', 'a b c');
divs.addEventListeners('click', e => e.target.style.color = 'red'); // hence the name of the method addEventListener(s) **the S**

//use of array methods:
divs.map(div => div.id);
divs.forEach(div => div.remove());
// ... etc

So none of this:

let divs = document.querySelectorAll('div');
divs.textContent; // returns undefined;
divs.textContent = 'hi'; // not possible, will obviously set the actual textContent property on the nodeList and won't loop through the elements and set the textContent

But this ruins the whole point of my implementation, the only good parts would be the Array methods, and the get(), set() methods (BTW would probably best to rename to getProperty() and setProperty()?

Which I could deal with, and if anything I also made it into a really good library to allow my original implementation. So what should be done @domenic?


#23

This discussion can be closed NodeList.js will stay as a library as its too magicy to be natively implemented as I’ve been told by others, thanks to everyone.