Home

The DOM Management Library

Currently we are using $$() as an alias to our library as main functional point which is DOMM.query(). You can access existing elements in the DOM tree or create elements, add them or manipulate as you like with this alias. The DOMM library uses DOMMNode and DOMMNodeCollection as its main components so everything you do with the $$() alias will basicly lead you to the usage of DOMMNode or DOMMNodeCollection and its methods.

See the below examples to understand more about how it is used.

$$() is alias for DOMM.query. Our library provides additional functions which can be seen in the above section after the examples.

Terminology

From now on, when we speak of collection we will mean DOMMNodeCollection and by Node we will mean DOMMNode. If we have to mention a native node, it will be explained explicitly.

Examples

Note: Remember that the execution of $$() will always return DOMMNodeCollection.

Creating Elements

To create an element you need to add diamond brackets at the start and end of the input string ('<>'). In the middle goes the type of the node you want to create. Note: Missing the diamond brackets will execute the search/access (DOMM.select) function of the $$().

$$('<div>')//=> DOMMNodeCollection {0: div, _isImmutable: true, length: 1}

If you want to use the single member of the collection as DOMMNode

$$('<div>').first();//=> DOMMNode {_node: div}
//or
$$('<div>').get(0);//=> DOMMNode {_node: div}

Searching Elements

Searching for elements is done with a selector which can be used in a different way. Since the below selection is using sizzle, you can use different selectors to access elements with specific classes, id-s and so on.

• Returns all divs from the DOM tree:

  $$('div')//=> DOMMNodeCollection {0: div, 1: div, 2: div#wjs_testsfinder_messages.container, 3: div.item_box.inset_shadow, 4: di...  

• Returns all divs from the Dom Tree that have the item_box class:

  $$('div.item_box')//=> DOMMNodeCollection {0: div.item_box.inset_shadow, 1: div.item_box.mess_notice, 2: div.item_box.mess_warning, 3: div.item_box.m...

• Returns the div from the Dom Tree that have id test_results:

  $$('div#test_results')//=> DOMMNodeCollection {0: div#test_results, _isImmutable: true, length: 1}

Other available functions are:

• DOMM.query(argument { css selector string | diamond string | HTML markup | Node | DOMMNode | NodeList | DOMMNodeCollection}): {DOMMNodeCollection} - Available as alias $$(). Basically creates or accesses existing native nodes in the Dom Tree wrapping them as DOMMNodes. This method always returns a collection.