DOM Abstraction"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

 
Line 3: Line 3:
 
The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively".
 
The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively".
  
For each of the basic DOM objects, we'll have a dedicated class, including: window, document, element and text node. Those are the typical objects used by our application.
+
For each of the basic DOM objects, we'll have a dedicated class, including: window, document, element, text node and event. Those are the typical objects used by our application.
  
 
The following example demonstrates what we mean with DOM abstraction:
 
The following example demonstrates what we mean with DOM abstraction:

Latest revision as of 09:58, 28 February 2008

(Draft)

The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively".

For each of the basic DOM objects, we'll have a dedicated class, including: window, document, element, text node and event. Those are the typical objects used by our application.

The following example demonstrates what we mean with DOM abstraction:

// Create and element object based on its ID.
var element = new Element( "element_id" );

// Get the element name (always lowercase).
element.getName();

// Get next sibling node.
element.getNext();

// Set the class attribute.
element.setAttribute( 'class', 'myClass' );

// Get the element document (instance of our Document class)
var doc = element.getDocument();

// Set the inner HTML for the first child element of body.
doc.getBody().getFirstChild().setInnerHtml('');

Benefits

  • Rich and easy to use API.
  • Consistency among all browsers.
  • Memory leak free code.

Performance

A simple test page has been created to measure the performance impact of using a simple DOM abstraction set of classes, instead of direct DOM calls.

The following are the test results (in ms) in a Pentium 4 2GHz. The first value is the DOM abstraction results, while the second is the native times:

  • IE : 1051 / 541
  • Firefox : 921 / 561
  • Safari : 200 / 90

So we can note a performance degradation in a factor between 2 and 3 times over the native DOM.

But, we can also take in consideration that this test executes 1.000 calls to a function that does around 10 DOM specific calls. So, we have potentially 10.000 calls being executed. So, the real impact we could have by using the DOM abstraction classes is definitely inferior to the benefits we have with it.

This page was last edited on 28 February 2008, at 09:58.