barberboy / dom-elements Goto Github PK

Hi! This is a great project!

@annevk and I are the authors of the Elements proposal, with @annevk being the the author of the DOM spec.

We were a bit saddened that you decided to name this project after, and include references to, the W3C's fork of the DOM Standard. The actual DOM Standard is maintained by @annevk at the WHATWG; the W3C copies it into their URL-space for intellectual property reasons, and renames it "DOM 4".

I know renaming kind of sucks, but would you be willing to set the record straight here? At least with the correct links to the source material, instead of the fork.

the issue

the actual issue is that Elements' behaviour deviates from Array:

var elements = new Elements()
elements[4] = 1
elements.length // 0
elements.length = 0
elements[4] // 1

the workarouds

__proto__

in the browsers supporting the non-standard __proto__, we can do this :

function Elements(){
  var elements = Array.apply(null, arguments)
  elements.__proto__ = Elements.prototype
  return elements
}

Elements.prototype = []
Elements.prototype.constructor = Elements

Elements.prototype.query = function(){
  // …
}

var elements = new Elements()
elements instanceof Elements // true
elements instanceof Array // true
Array.prototype.foo = "bar"
elements.foo // "bar"

which makes a proper subclass as :

• there is prototypal inheritance
• we have the array length and index behaviour

direct extension

function Elements(){
  var elements = Array.apply(null, arguments)
      , key
  for(key in Elements.prototype) {
    if(!Elements.prototype.hasOwnProperty(key)){
      continue
    }
    elements[key] = Elements.prototype[key]
  }
  return elements
}

Elements.prototype = []
Elements.prototype.constructor = Elements

Elements.prototype.query = function(){
  // …
}

var elements = new Elements()
elements instanceof Elements // false
elements instanceof Array // true
Array.prototype.foo = "bar"
elements.foo // "bar"

• there is no prototypal inheritance for Elements.prototype, adding a method to it will not work for the instances that have been created before
• we have the array length and index behaviour though

iframe array

var Elements = IframeArray

Elements.prototype.query = function(){
  // …
}

var elements = new Elements()
elements instanceof Elements // true
elements instanceof Array // false
Array.prototype.foo = "bar"
elements.foo // void 0

• makes possible inheritance from Elements.prototype in older browsers
• doesn't inherit from current windows's array

results from query and queryAll should be relative to the element, don't they ?

<div id="foo">
  <strong></strong>
</div>

document.getElementById("foo").query("div strong")
// -> should return `null`
document.getElementById("foo").query("strong")
// -> should return the element

That way you can do things like new Elements(document.query('#a'), document.query('#b')).queryAll('.c'). Similar to jQuery's $('#a').add($('#b')).find('.c'). Basically any situation where you might programmatically construct a set of elements.

This polyfill should be deprecated