The DOMMNode class

Objects of the DOMMNode type serve as wrappers for the native DOM tree nodes, adding extra functionality and properties.

The _node field

All objects from the DOMMNode type have a _node field, which holds a reference to the actual wrapped DOM Node. The object, which _node references, is of type Node. It is important to note that the DOMMNode class supports only the ELEMENT_NODE and DOCUMENT_NODE types.

Methods

Creating and destroying a DOMMNode object

• DOMMNode (element {String | Node}): {DOMMNode} (Constructor method) - You can create new DOMMNode instances, either by directly providing the DOM node wrapped, or a string in the format: <tag_name/>, which will result in the...

  var n = new DOMMNode(document.createElement("tag-name")); //=> a new DOMMNode with _node == <tag_name>
  var invalid = 3;
  var n2 = new DOMMNode(invalid); //=> creates a dummy node, with _node = null
  var n3 = new DOMMNode("<div>"); //=> a new DOMMNode with _node == <div>

• remove() - Removes the element, referenced in the _node field from the document tree. Note: If a node/child of the removed node is saved in a variable, the variable will still keep the node. However the node will be removed from the respective DOM Tree/Node. See the last few rows of the example:

  var node = new DOMMNode('<div>').text('Some Text');
  var child = new DOMMNode('<span>').text('Child Text');
  
  child.innerHtml(); //"<span>Child Text</span>"
  node.append(child);
  node.innerHtml(); //"<div>Some Text<span>Child Text</span></div>"
  
  var childOfChild = new DOMMNode('<a>');
  
  child.append(childOfChild);
  node.innerHtml(); //"<div>Some Text<span>Child Text<a></a></span></div>"
  
  child.remove();
  node.innerHtml(); //"<div>Some Text</div>"
  
  child //DOMMNode {_node: null}
  childOfChild //DOMMNode {_node: a} <- Note: notice here that a tag is not removed. However it is removed from everywhere else.

• detach() - Removes the element from the document tree and returns it.

  var parent = new DOMMNode("<div>").text("parent");
  var child = new DOMMNode("<span>").text("child");
  parent.append(child);
  child.detach(); //DOMMNode�{_node: span}

Queries

• contains(element {Node | DOMMNode}): {Boolean} - Checks if the input element is contained in the current node. It works by calling the _node.contains(otherNode) method on the wrapped _node object, and returns the result. You can read more about the contains() method here.

  var parent = new DOMMNode('<div>');
  var child = new DOMMNode('<span>').text('Child');
  
  parent.append(child);
  parent.innerHtml(); //"<div><span>Child</span></div>"
  parent.contains(child); //true

• select(selector {String}): {DOMMNodeCollection} - Returns the elements from the current node that match the selector. Beneath, it returns the results of a Sizzle(selector) call on the wrapped _node object, as a DOMMNodeCollection.

  var parent = new DOMMNode('<div>');
  var childA = new DOMMNode('<span>').text('ChildA');
  var childB = new DOMMNode('<span>').text('ChildB').id('childBId');
  var childC = new DOMMNode('<span>').text('ChildC').classes('childCClass');
  
  parent.append(childA, childB, childC);
  //DOMMNode {_node: div}
  parent.innerHtml(); //"<div><span>ChildA</span><span id="childBId">ChildB</span><span class="childCClass">ChildC</span></div>"
  parent.select("#childBId"); //DOMMNodeCollection {0: span#childBId, _isImmutable: true, length: 1}
  parent.select(".childCClass"); //DOMMNodeCollection {0: span.childCClass, _isImmutable: true, length: 1}

• select(selector {String}, nearest {Boolean}): {DOMMNodeCollection} - Return the nearest elements in the current node that match the selector. The nearest means that it will return nodes from the closest level of the tree. See the example below.

  var parent = new DOMMNode('<div>');
  var childA = new DOMMNode('<span>').text('ChildA');
  var childB = new DOMMNode('<span>').text('ChildB').classes('searchedClass');
  var childOfChildB = new DOMMNode('<div>').text('ChildOfChildB').classes('searchedClass');
  
  childB.append(childOfChildB);
  parent.append(childA, childB);
  parent.innerHtml(); //"<div><span>ChildA</span><span class="searchedClass">ChildB<div class="searchedClass">ChildOfChildB</div></span></div>"
  
  parent.select(".searchedClass", true); //DOMMNodeCollection {0: span.searchedClass, _isImmutable: true, length: 1} 
  //Note: here the result is only the ChildB because it is closest to the parent. If the nearest is false the result will be both chilB and childOfChildB. Here childB is direct descendant and is on the first level. The childOfChildB is direct descendant of childB which, from parent's perspective is one level down -> second level. if childOfChildB has child it will be third level from the parent's node perspective and so on.

  • selectNearest(selector {String}): {DOMMNodeCollection} - Return the nearest elements in the current node that match the selector. The nearest means that it will return the nodes from the closest level of the tree. See the example below.

  var parent = new DOMMNode('<div>');
  var childA = new DOMMNode('<span>').text('ChildA');
  var childB = new DOMMNode('<span>').text('ChildB').classes('searchedClass');
  var childOfChildB = new DOMMNode('<div>').text('ChildOfChildB').classes('searchedClass');
  
  childB.append(childOfChildB);
  parent.append(childA, childB);
  parent.innerHtml(); //"<div><span>ChildA</span><span class="searchedClass">ChildB<div class="searchedClass">ChildOfChildB</div></span></div>"
  
  parent.selectNearest(".searchedClass"); //DOMMNodeCollection {0: span.searchedClass, _isImmutable: true, length: 1} 
  //Note: here the result is only the ChildB because it is closest to the parent. If the nearest is false the result will be both chilB and childOfChildB. Here childB is direct descendant and is on the first level. The childOfChildB is direct descendant of childB which, from parent's perspective is one level down -> second level. if childOfChildB has child it will be third level from the parent's node perspective and so on.

String representations

• DOMMNode.toString(): {String} - Returns the outer html of the node.

  var dommNode = new DOMMNode('<div>').text('Node');
  console.log(dommNode.toString()); // <div>Node</div>

• DOMMNode.outerHtml(): {String} - Returns the outer html of the node.

  var dommNode = new DOMMNode('<div>').text('Node');
  console.log(dommNode.outerHtml()); //<div>Node</div>

Content

• DOMMNode.innerHtml(argument {String | HTML}) - Sets the HTML content of a DOMMNode element.

  var htmlString = '<p>This is a paragraph!</p>';
  var dommNode = new DOMMNode('<div>');
  dommNode.innerHtml(htmlString);
  // => DOMMNode {_node: div}
  //      ...
  //      innerHTML: "<p>This is a paragraph!</p>"

• DOMMNode.innerHtml(): {String} - Calling .innerHtml() without argument returns the inner HTML content.

  dommNode.innerHtml();
  // => "<p>This is a paragraph!</p>"

• DOMMNode.text(text {String}): {String} - Sets text to the curent node. IMPORTANT: If there are any nodes existing as children they will be erased!

  var dommNode = new DOMMNode('<div>');
  var simpleText = 'This is simple text.';
  dommNode.text(simpleText);
  // => DOMMNode {_node: div}
  //      ...
  //      innerHTML: "This is simple text."

• DOMMNode.text(): {String} - Calling the method without parameters returns the DOMMNode's text content.

  var dommNode = new DOMMNode('<div>');
  dommNode.text('This is simple text.');
  dommNode.text();
  // => "This is simple text."

• getNative(): {The native node} - Returns the native node (_node).

  var dommNode = new DOMMNode("<div>");
  var native = dommNode.getNative();//<div></div>

Child Nodes Manipulation

• append(arg1 [, arg2..., argN] {Node | DOMMNode | string | Array}): {this} - Appends child/children Nodes in the DOMMNode. This method can append multiple elements. The type of the elements can be a native Node, DOMMNode or string (text element).

      //With single DOMMNode as argument:
  
      var toAppendTo = new DOMMNode("<div>");
      var toBeAppended = new DOMMNode("<span>").classes("toBeAppended");
      var result = toAppendTo.append(toBeAppended);
      result.outerHtml(); //"<div><span class="toBeAppended"></span></div>"
  
      //With multiple DOMMNode-s as argument, separated by comma
  
      var toAppendTo = new DOMMNode("<div>");
      var firstToBeAppended = new DOMMNode("<span>").classes("firstToBeAppended");
      var secondToBeAppended = new DOMMNode("<span>").classes("secondToBeAppended");
      var result = toAppendTo.append(firstToBeAppended, secondToBeAppended);
      result.outerHtml(); //"<div><span class="firstToBeAppended"></span><span class="secondToBeAppended"></span></div>"
  
  // With native array of DOMMNode elements as argument
  
      var toAppendTo = new DOMMNode("<div>");
      var firstToBeAppended = new DOMMNode("<span>").classes("firstToBeAppended");
      var secondToBeAppended = new DOMMNode("<span>").classes("secondToBeAppended");
      var arrayOfDOMMNodes = [firstToBeAppended, secondToBeAppended];
      var result = toAppendTo.append([firstToBeAppended, secondToBeAppended]);
      result.outerHtml(); //"<div><span class="firstToBeAppended"></span><span class="secondToBeAppended"></span></div>"
  
      //With DOMMNodeCollection as argument
  
      var toAppendTo = new DOMMNode("<div>");
      var firstToBeAppended = new DOMMNode("<span>").classes("firstToBeAppended");
      var secondToBeAppended = new DOMMNode("<span>").classes("secondToBeAppended");
      var dommNodeColl = new DOMMNodeCollection([firstToBeAppended, secondToBeAppended]);
      var result = toAppendTo.append(dommNodeColl);
      result.outerHtml(); //"<div><span class="firstToBeAppended"></span><span class="secondToBeAppended"></span></div>"

• prepend(arg1, arg2..., argN {Node | DOMMNode | string | Array}): {this} - Prepends child/children Nodes in the DOMMNode. This method can prepend multiple elements. The type of the elements can be native Node, DOMMNode and string(text element)

      var toPrependTo = new DOMMNode("<div>");
      var firstToBePrepended = new DOMMNode("<span>").classes("firstToBePrepended");
      var secondToBePrepended = new DOMMNode("<span>").classes("secondToBePrepended");
      var result = toPrependTo.prepend(firstToBePrepended).prepend(secondToBePrepended);
      result.outerHtml(); //"<div><span class="secondToBePrepended"></span><span class="firstToBePrepended"></span></div>"
  
      //With array of DOMMNode-s
  
      var toPrependTo = new DOMMNode("<div>");
      var firstToBePrepended = new DOMMNode("<span>").classes("firstToBePrepended");
      var secondToBePrepended = new DOMMNode("<span>").classes("secondToBePrepended");
      var arrayOfNodes = [firstToBePrepended, secondToBePrepended];
      var result = toPrependTo.prepend(arrayOfNodes);
      result.outerHtml(); //"<div><span class="firstToBePrepended"></span><span class="secondToBePrepended"></span></div>"
  
      //With DOMMNodeCollection as argument
  
      var toPrependTo = new DOMMNode("<div>");
      var firstToBePrepended = new DOMMNode("<span>").classes("firstToBePrepended");
      var secondToBePrepended = new DOMMNode("<span>").classes("secondToBePrepended");
      var dommNodeCollection = new DOMMNodeCollection(firstToBePrepended, secondToBePrepended);
      var result = toPrependTo.prepend(arrayOfNodes);
  	result.outerHtml()//"<div><span class="firstToBePrepended"></span><span class="secondToBePrepended"></span></div>"

• appendTo(element {DOMMNode | Node | DOMMNodeCollection | query string}): {this} - Appends the current DOMMNode as a child to DOMMNode, DOMMNodeCollection or DOMM query result. When DOMMNodeCollection is used as target, the first element of the collection will be considered as the target.

      //Overload with target as DOMMNode
  
      var node = new DOMMNode('<div>').text('Some Text');
      var target = new DOMMNode('<span>').text('Target');
      
      node.appendTo(target);
      target.asHtml(); //"<span>Target<div>Some Text</div></span>"
  
      //Overload with target as DOMMNodeCollection
  
      var dnc = new DOMMNodeCollection();
      var fe = new DOMMNode("<div>").classes("fe");
      var se = new DOMMNode("<div>").classes("se");
      var ze = new DOMMNode("<div>").classes("ze");
      dnc = fe.appendTo(dnc);
      dnc = se.appendTo(dnc);
      dnc = ze.prependTo(dnc);
  //DOMMNodeCollection {0: div.ze, 1: div.fe, 2: div.se, _isImmutable: true, length: 3}
  //"<div class="ze"></div><div class="fe"></div><div class="se"></div>"

• prependTo(element {DOMMNode | Node | DOMMNodeCollection | query string}) - Prepends the current DOMMNode as a child to DOMMNode, DOMMNodeCollection or DOMM query result. When DOMMNodeCollection is used as target, the first element of the collection will be considered as the target.

      //Overload with target as DOMMNode
  
      var node = new DOMMNode('<div>').text('Some Text');
      var target = new DOMMNode('<span>').text('Target');
          
      node.prependTo(target);
      target.innerHtml(); //"<span><div>Some Text</div>Target</span>"
  
      //Overload with target as DOMMNodeCollection
  
      var dnc = new DOMMNodeCollection();
      var fe = new DOMMNode("<div>").classes("fe");
      var se = new DOMMNode("<div>").classes("se");
      var ze = new DOMMNode("<div>").classes("ze");
      dnc = fe.appendTo(dnc);
      dnc = se.appendTo(dnc);
      dnc = ze.prependTo(dnc);
  //DOMMNodeCollection {0: div.ze, 1: div.fe, 2: div.se, _isImmutable: true, length: 3}
  //"<div class="ze"></div><div class="fe"></div><div class="se"></div>"

• appendWith(element {DOMMNode | Node | DOMMNodeCollection | query string}): {DOMMNodeCollection} - Appends the current DOMMNode with the input elements on a DOMMNodeCollection. NOTE: The current node will be APPENDED to the input elements and the collection will be created.

  var nodeA = new DOMMNode('<div>');
  var nodeB = new DOMMNode('<span>');
  
  nodeA.appendWith(nodeB); //DOMMNodeCollection {0: div, 1: span, _isImmutable: true, length: 2}

• prependWith(element {DOMMNode | Node | DOMMNodeCollection | query string}): {DOMMNodeCollection} - Prepends the current DOMMNode with the input elements on a DOMMNodeCollection. NOTE: The current node will be PREPENDED to the input elements and the collection will be created.

  var nodeA = new DOMMNode('<div>');
  var nodeB = new DOMMNode('<span>');
  
  nodeA.prependWith(nodeB); //DOMMNodeCollection {0: span, 1: div, _isImmutable: true, length: 2}

• insertChildBefore(index {Integer}, element {DOMMNode | Node}): {this} - Inserts element before the child at the input index.

  var parent = new DOMMNode('<div>');
  var childA = new DOMMNode('<span>').text('ChildA');
  var childB = new DOMMNode('<span>').text('ChildB');
  parent.append(childA, childB);
  var inputChild = new DOMMNode('<span>').text('inputChild');
  
  parent.outerHtml(); //"<div><span>ChildA</span><span>ChildB</span></div>"
  parent.insertChildBefore(0, inputChild);
  parent.outerHtml(); //"<div><span>inputChild</span><span>ChildA</span><span>ChildB</span></div>"

• insertChildAfter(index, element {DOMMNode | Node}): {this} - Inserts element after the child at the input index.

  var parent = new DOMMNode('<div>');
  var childA = new DOMMNode('<span>').text('ChildA');
  var childB = new DOMMNode('<span>').text('ChildB');
  parent.append(childA, childB);
  var inputChild = new DOMMNode('<span>').text('inputChild');
  
  parent.outerHtml(); //"<div><span>ChildA</span><span>ChildB</span></div>"
  parent.insertChildAfter(0, inputChild);
  parent.outerHtml();//"<div><span>ChildA</span><span>inputChild</span><span>ChildB</span></div>"

• getChildren(): {DOMMNodeCollection} - Gets all direct child nodes of the DOMMNode returned as DOMMCollection.

  var parent = new DOMMNode('<div>');
  var childA = new DOMMNode('<span>').text('ChildA');
  var childB = new DOMMNode('<span>').text('ChildB');
  
  parent.append(childA, childB); //DOMMNode {_node: div}
  parent.getChildren(); //DOMMNodeCollection {0: span, 1: span, _isImmutable: true, length: 2}

• removeChild(child {DOMMNode | Node}): {this} - Removes existing child element from the current DOMMNode.

  var parent = new DOMMNode('<div>');
  var child = new DOMMNode('<span>').text('Child');
  
  parent.append(child);
  parent.contains(child); //true
  parent.outerHtml(); //"<div><span>Child</span></div>"
  
  parent.removeChild(child);
  parent.outerHtml(); //"<div></div>"
  parent.contains(child); //false

• removeChild(index {Integer}): {this} - Removes existing child element at the current index from the current DOMMNode.

  var parent = new DOMMNode('<div>');
  var child = new DOMMNode('<span>').text('Child');
  
  parent.append(child);
  parent.contains(child); //true
  parent.outerHtml(); //"<div><span>Child</span></div>"
  
  parent.removeChild(0);
  parent.outerHtml(); //"<div></div>"
  parent.contains(child); //false

• empty(): {this} - Removes the innerHtml from a DOMMNode

  var parent = new DOMMNode("<div>");
  var child = new DOMMNode("<span>").text("child");
  parent.append(child);
  parent.innerHtml();//"<span>child</span>"
  parent.empty();
  parent.innerHtml();//""

Relatives

• getPrev(): {DOMMNode} - Gets the previous sibling of the current node. If there is no previous element it will return DOMMNode with null node.

  var parent = new DOMMNode('<div>');
  var leftChild = new DOMMNode('<span>').text('Left');
  var middleChild = new DOMMNode('<span>').text('Middle');
  var rightChild = new DOMMNode('<span>').text('Right');
  
  parent.append(leftChild, middleChild, rightChild);
  parent.outerHtml(); //"<div><span>Left</span><span>Middle</span><span>Right</span></div>"
  
  middleChild.getPrev(); //DOMMNode {_node: span}
  middleChild.getPrev().text();//"Left"
  middleChild.getPrev().isReferenceOf(leftChild); //true

• getNext(): {DOMMNode} - Gets the next sibling of the current node. If there is no next element it will return DOMMNode with null node.

  var parent = new DOMMNode('<div>');
  var leftChild = new DOMMNode('<span>').text('Left');
  var middleChild = new DOMMNode('<span>').text('Middle');
  var rightChild = new DOMMNode('<span>').text('Right');
  
  parent.append(leftChild, middleChild, rightChild);
  parent.outerHtml(); //"<div><span>Left</span><span>Middle</span><span>Right</span></div>"
  
  middleChild.getNext(); //DOMMNode {_node: span}
  middleChild.getNext().text();//"Right"
  middleChild.getNext().isReferenceOf(rightChild);//true

• getParent(): {DOMMNode} - Returns the parent element of the node. If there is no parent element it will return DOMMNode with null node.

  var parent = new DOMMNode('<div>');
  var child = new DOMMNode('<span>').text('Child');
  
  parent.append(child);
  parent.innerHtml(); //"<div><span>Child</span></div>"
  child.getParent(); //DOMMNode {_node: div}
  child.getParent().isReferenceOf(parent); //true

• getAllParents(): {DOMMNodeCollection} - Returns a DOMMNodeCollection with all the parents of the node untill the BODY element. If there is no parent element it will return an empty DOMMNodeCollection.

  var parent = new DOMMNode("<div>").text("parent");
  var childOfParent = new DOMMNode("<span>").text("child");
  var childOfChild = new DOMMNode("<p>").text("child of child");
  
  parent.append(childOfParent);
  childOfParent.append(childOfChild);
  
  var allParents = childOfChild.getAllParents();
  allParents;//DOMMNodeCollection�{0: span, 1: div, _isImmutable: true, length: 2}
  parent.getAllParents();//DOMMNodeCollection�{_isImmutable: true, length: 0}

• closestParent(selector): {DOMMNode} - Returns the closest parrent as a DOMMNode

  var parent = new DOMMNode("<div>").classes("parent");
  var childOfParent = new DOMMNode("<span>").classes("parent");
  var childOfChild = new DOMMNode("<p>").text("child of child");
  
  parent.append(childOfParent);
  childOfParent.append(childOfChild);
  childOfChild.closestParent(".parent");//DOMMNode�{_node: span.parent}

• clone({Boolean} deep): {DOMMNode} - Returns a clone of the node

  var el = new DOMMNode("<div>");
  var cloned = el.clone();
  el.isEqualTo(cloned);//true
  el.isReferenceOf(cloned);//false

• isDummy(): {Boolean} - Checks if the current node is dummy (its _node is null)

  var dummy = new DOMMNode();
  dummy.isDummy();//true

• getElementIndex(): {Integer} - Gets the index of an element from the subling's perspective

  var parent = new DOMMNode("<div>");
  var firstChild = new DOMMNode("<span>");
  var secondChild = new DOMMNode("<span>");
  var thirdChild = new DOMMNode("<span>");
  parent.append(firstChild).append(secondChild).append(thirdChild);
  firstChild.getElementIndex();//0
  secondChild.getElementIndex();//1
  thirdChild.getElementIndex();//2

Properties

• DOMMNode.properties(propertyName {String}): {String} - Gets property value.

  var dommNode = new DOMMNode('<div>');
  dommNode.properties('nodeName');//=> "DIV"

• DOMMNode.properties(propertyName {String}, propertyValue {Any}) - Sets the property value.

  var dommNode = new DOMMNode('<div>');
  dommNode.properties('textContent', 'New text content');
  // textContent: "New text content"

• DOMMNode.hasProperty(propertyName {String}): Boolean

  var dommNode = new DOMMNode('<div>');
  
  dommNode.properties('textContent', 'New text content');
  dommNode.hasProperty('textContent'); // => true
  dommNode.properties('textContent', '');
  dommNode.hasProperty('textContent'); // => false

Attributes

• DOMMNode.id(value {String}) - Sets the value of the "id" attribute. If it is called with an empty string the value is removed.

  var dommNode = new DOMMNode('<div>');
  dommNode.id('unique');
  // id: "unique"

  • DOMMNode.id(): {String} - Returns the value of "id".

  dommNode.id();
  // => "unique"

• DOMMNode.attributes(): {Object} - Call without parameters returns object with all attributes. Please note that this object is not a reference of the original attributes object. If you want to make changes on DOMMNode attributes, please pass the changed object to the attributes() method. That way it will change the dom element.

  var dommNode = new DOMMNode("<span>");
  
  dommNode.attributes("id", "simple-span");
  dommNode.attributes("data-key", "viewroot");
  dommNode.attributes("data-bind", "{read path=$path}");
  // => Object {data-bind: "{read path=$path}", data-key: "viewroot", id: "simple-span", length: 3}

• DOMMNode.attributes(attributeName {String}): {String} - Gets the value of the attribute specified.

  dommNode.attributes('data-key'); // => "viewroot"

• DOMMNode.attributes(attributeName {String}, attributeValue {String}) - Sets the value of the attribute specified.

  dommNode.attributes("data-bind", "{read path=$newPath}");
  // bind: "{read path=$newPath}"

• DOMMNode.hasAttributes(attributeName {String} | attributeNames {String[]}): {Boolean} - ...

  var attrKey = 'customAttr';
  var attrValue = 'customValue';
  var dommNode = new DOMMNode('<div>');
  
  dommNode.attributes(attrKey, attrValue);
  dommNode.hasAttributes(attrKey); // => true
  
  var attrKey2 = 'customAttr2';
  var attrValue2 = 'customValue2';
  
  dommNode.attributes(attrKey, attrKey2);
  dommNode.hasAttributes(attrKey,attrKey2); // => true

• DOMMNode.removeAttributes(attributeName {String} | attributeNames {String[]}) - removes an attribute from the DOMMNode

  var attrKey = 'customAttr';
  var attrValue = 'customValue';
  var dommNode = new DOMMNode('<div>');
  
  dommNode.attributes(attrKey, attrValue);
  dommNode.removeAttributes(attrKey);
  dommNode.hasAttributes(attrKey); // => false
  
  var attrKey2 = 'customAttr2';
  var attrValue2 = 'customValue2';
  
  dommNode.attributes(attrKey, attrKey2);
  dommNode.removeAttributes(attrKey, attrKey2);
  dommNode.hasAttributes(attrKey,attrKey2); // => false

Classes

• DOMMNode.classes(className {String} | classNames {String[]}) - Sets the class name of an element (the value of an element's class attribute).

  var dommNode = new DOMMNode('<div>');
  var firstClass = 'firstClass';
  var secondClass = 'secondClass';
  var thirdClass = 'thirdClass'
  var multiClassString = 'newClass1 newClass2';
  var arr = [firstClass, secondClass, thirdClass];
  
  dommNode.classes(multiClassString); // className: "newClass1 newClass2"
  dommNode.classes(arr); // className: "firstClass newClass1 newClass2 secondClass thirdClass"

• DOMMNode.classes(): {String[]} - ...

  dommNode.classes(); //=> ["firstClass", "newClass1", "newClass2", "secondClass", "thirdClass"]

• DOMMNode.toggleClasses(className {String} | classNames {String[]}) - Toggles the class/classes specified.

  var dommNode = new DOMMNode("<div>");
  var singleClassName = 'toggledClass';
  var singleClassName2 = 'toggledClass2';
  var multipleClasses = 'toggledClass1 toggledClass2';
  
  var classNamesArr = [singleClassName, singleClassName2];
  dommNode.toggleClasses(singleClassName); // className: "toggledClass"
  dommNode.toggleClasses(singleClassName); // second call removes class -> className: "toggledClass"
  dommNode.toggleClasses(multipleClasses); // className: "toggledClass1 toggledClass2"
  dommNode.toggleClasses(multipleClasses); // className: ""
  dommNode.toggleClasses(classNamesArr); // className: "toggledClass toggledClass2"
  dommNode.toggleClasses(classNamesArr); // className: ""

• DOMMNode.removeClasses(className {String} | classNames {String[]}) - If the method is called without parameters, the "class" attribute is removed. Else all specified classes are removed.

  var dommNode = new DOMMNode("<div>");
  var firstClassToBeRemoved = 'beRemoved1';
  var secondClassToBeRemoved = 'beRemoved2';
  var classToStay = "toStay";
  var classesToBeRemoved = firstClassToBeRemoved + ' ' + secondClassToBeRemoved;
  var classArray = [firstClassToBeRemoved, secondClassToBeRemoved];
  
  dommNode.classes(classToStay, firstClassToBeRemoved, secondClassToBeRemoved); // className: "beRemoved1 beRemoved2 toStay"
  dommNode.removeClasses(firstClassToBeRemoved, secondClassToBeRemoved); // className: "toStay"

• DOMMNode.hasClasses(className {String} | classNames {String[]}): {Boolean} - Checks if element has the specified class or classes.

  var dommNode = new DOMMNode('<div>');
  var firstClass = 'firstClass';
  var secondClass = 'secondClass';
  var thirdClass = 'thirdClass'
  var multiClassString = 'newClass1 newClass2';
  var arr = [secondClass, thirdClass];
  
  dommNode.classes(firstClass);
  dommNode.hasClasses(firstClass); // => true
  dommNode.classes(multiClassString); 
  dommNode.hasClasses(multiClassString); // => true
  dommNode.classes(arr); 
  dommNode.hasClasses(arr); // => true
  dommNode.hasClasses('notExisting'); // false

Styles

• styles(styleKey {String}) : {String}

  var dommNode = new DOMMNode('<div>');
  dommNode.styles('color', 'red'); 
  dommNode.styles('color'); // 'red'

• styles(styleKeyValuePair {String, String} | styleObj {Object}) - Sets style of the element.

  var dommNode = new DOMMNode('<div>');
  dommNode.styles('background-color', blue); 
  dommNode.styles('color', red); 
  dommNode.styles('display', block); 
  dommNode.styles(); // => Object {background-color: "blue", color: "red", display: "block"}
  // Set styles with an object passed as a parameter
  var newDommNode = new DOMMNode('<div>');
  var firstStyleValue = "blue";
  var secondStyleValue = "blue";
  var styleObj = {
      'background-color': firstStyleValue,
      'color': secondStyleValue
  };
  newDommNode.styles(styleObj);
  newDommNode.styles(); // => Object {background-color: "blue", color: "blue"}

• styles(): {Object} - Returns element's styles as an object.

  var dommNode = new DOMMNode('<div>');
  var firstStyleValue = "blue";
  var secondStyleValue = "red";
  var styleObj = {
      'background-color': firstStyleValue,
      'color': secondStyleValue
  };
  dommNode.styles(styleObj);
  dommNode.styles(); // => Object {background-color: "blue", color: "red"}

  Note that the returned object is not a reference to the original DOMMNode style object. If you want to work directly with the returned object and apply changes to the actual DOMMNode style object you need to pass the object to the styles(styleKeyValuePair styleObj {Object}) overload

• getComputedStyles(input {String}) Returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain.

  var el = new DOMMNode("<div>");
  el.styles("color", "red").styles("font-size", "1.2em");
  el.getComputedStyles();//CSSStyleDeclaration�{alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "",��}

• removeStyles() - Removes the "style" attribute.

  var dommNode = new DOMMNode('<div>');
  el.dommNode("color", "red").styles("font-size", "1.2em");
  dommNode.removeStyles(); // "<div></div>"

• removeStyles(styleName {String}) - Removes one or more style property values specified by names.

• hide() - Hides the element (sets the display css property to none).

  var dommNode = new DOMMNode('<div>');
  dommNode.hide();
  dommNode.isVisible();//false

• show() - Shows the element (sets the display css property to none). TODO:

  var dommNode = new DOMMNode('<div>');
  dommNode.hide();
  dommNode.isVisible();//false

• offset() - Returns the offset coordinates of a DOMMNode

  var dommNode = new DOMMNode('<div>');
  dommNode.offset()

• focus() - Returns the offset coordinates of a DOMMNode

  var dommNode = new DOMMNode('<div>');
  dommNode.focus();

Equals/References

• isEqualTo(DOMMNode | node) - Checks if the current node is equal to the one passed as argument.

  var el = new DOMMNode("<div>");
  var equalEl = new DOMMNode("<div>");
  el.isEqualTo(equalEl);//true

• isReferenceOf(DOMMNode | node) - Checks if the current node is equal to the one passed as argument.

  var el = new DOMMNode("<div>");
  var equalEl = new DOMMNode("<div>");
  el.isReferenceOf(equalEl);//false
  var referenceEl = el;
  referenceEl.isReferenceOf(el);//true

• is(DOMMNode | node) - Checks if the current node is equal to the one passed as argument.

  var dommNode = new DOMMNode('<div>');
  dommNode.is("div");//true
  dommNode.is("span");//false