Native DOM changes

What has changed in natives DOM classes

All classes that begin with HTML and finish by Element are referenced into the html package.

// Original classes
HTMLBodyElement === html.Body                      // true
HTMLSectionElement === html.Section                // true
HTMLDivElement === html.Div                        // true
document.createElement('div') instanceof html.Div  // true
// With new constructor
HTMLStyleElement === html.Style                    // true
new html.Style() instanceof html.Style             // true
// Inheritance
HTMLElement === html.Element                       // true
new html.Style() instanceof html.Element           // true
// Additional use
node.constructor in html
html[node.consructor.name]

Note: You can still access these classes with the original name myDiv instanceof HTMLDivElement

Exception made of classes like Node or Element that are not subclasses of HTMLElement and therefore dont stand in the html package but the global package (window). Before completely loose it by remplacing by the shimmed version (see next inserted shims), theses classes are saved into the Natives package:

Natives.EventTarget
Natives.Node
Natives.Attr
Natives.Element
Natives.HTMLElement
Natives.Document

The inserted shims

Some behaviors need the overriden on the native class definitionn itself. A few classes had been rewritten subclasing the origin and inserted into the prototype chain of the native equivalent.

Theses classes are:

Node (shim)
Document (methods added, method overriden) TODO: shim to be able to new Document("<html>...")
Element (shim)
Attr (getter and method added)

The global reference name are replaced by shimed version of the class, but attention was made not to break inheritance so you can still test:

let myH = document.createElement('h1');
console.log( myH instanceof HTMLElement );
console.log( myH instanceof html.Element );
console.log( myH instanceof Element );
console.log( myH instanceof Node );
myH.setAttribute('foo', 42 );
console.log( myH.attributes.foo instanceof Attr );

Overclocking

The shim classes are callable.

let myDiv = new Element('div')                              // <div></div>
  , myCatalog = new Element('my:Catalog')                   // <my:Catalog></my:Catalog>
  , myIcon = new Node('http://www.w3.org/2000/svg', 'svg')  // <svg xmlns="http://www.w3.org/2000/svg"></svg>
  , myTextNode = new Node(3)                                // TODO
  , myButtonComponent = new Document('./path/to/comps/Button.xhtml') // TODO
  ;

The shim classes are extendable.

class MyButton extends html.Button {}
class MyButton extends html.Element {}
class MyStyle extends html.Style {}
class MyButton extends Element {}
class MyButton extends Node {}

Note: subclass must follow the callable later pattern to have no super() call because native classes can't be instanciated (see callable later pattern)

New inheritance tree

					Changes	TODO
Natives.Node					Moved
	Node				Brand new class used as shim
		Attr			1 getter and 1 method added
		Natives.Element			Moved
			Element		Brand new class used as shim
				html.Element	Same as HTMLElement
		Natives.Document			1 getter and 1 method added
			Document		Brand new class used as shim	TODO
				html.Document		TODO
				xml.Document		TODO
				svg.Document		TODO
		DocumentFragment			Reparented
			ShadowRoot
		CharacterData			Reparented
			Native.Text		Moved	TODO
				Text	Brand new class used as shim	TODO
		DocumentType			Reparented

Complete changes table

Class	Change type	Definition	Description
Attr	method added	initialize():Attr
	getter added	isXmlns:Boolean
Node	constructor	new Node( [uri:String, ] localName:String )	Shim replaces native equivalent, respects instanceof
	method added	applyClass( klass:Function )
	method added	extends( Class:Function, ...rest )
	method added	cloneNode( recursive:Boolean )
	method added	merge( object:Object ):Node	Experimental, may change name as "merge" is already used often...
	method added	toXMLString():String
Document	method added	_createStyleImpl()	Private will be renamed using internal symbols.
	getter added	isHtml5:Boolean
	method added	initialize( root:Element ):Document	May be renamed/removed
	method augmented	createElement( nodeName ):Element	No signature change. Fix XHTML Documents creating nodes with empty namespace
	method added	loadComponent( node:Element, ext:String )
	method added	onComponentLoaded( node:Node, doc:Document )
	method augmented	querySelector( selectors:String ):Element
	method augmented	querySelectorAll( selectors:String ):Array	Signature change, a plain Array is returned
	method added	$( selectors:String ):Array
Element	constructor	new Element( [uri:String, ] localName:String )	Shim replaces native equivalent, respects instanceof
	method augmented	querySelector( selectors:String ):Element
	method augmented	querySelectorAll(selectors:String ):Array	Signature change, a plain Array is returned
	method augmented	matches(selectors:String ):Boolean	No signature change. Accepts namespaced selectors `jx
	method added	$( selectors:String ):Array
	method added	initialize():Element	May be renamed/removed
	method added	addToContext( ctx:Object [, force:Boolean] )
	method added	implementStyle( extendedStyle )
	getter added	style:CSSStyleDeclaration	Natives.Element dont have style, only HTMLElement have style
	method added	replaceWith( node:Element )
	getter added	xmlns:Object
	getter added	namespace:Attr
	getter added	namespaceURL:String
	getter added	url:String
	method added	namespaceReadyHandler( e:Event )	Private will be renamed using internal symbols.
	method added	readyHandler( e )	Private will be renamed using internal symbols.
	method added	fixForShadowRoot()
	getter added	isElement:Boolean
ShadowRoot	method added	_createStyleImpl	Private will be renamed using internal symbols.
	method added	preinitialize( root:Element ):ShadowRoot
	method added	initialize( root:Element ):ShadowRoot
	method added	loadComponent( node:Element, ext:String )
	method added	onComponentLoaded( node:Node, doc:Document )

Provide feedback

Saved searches