Document Object Model

Andrei Vouchanka
volchenko.andrei@gmail.com

What is DOM?

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents

Why do we need DOM?

  • provides a structured representation of the document (a tree)
  • defines a way that the structure can be accessed from programs 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
DOCUMENTDOCTYPEhtmlheadtextmetatexttitletexttexttextbodytext

Node

Properties

  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling
  • parentNode

other

node.childNodes

// somehow we've got reference from js varable 'node' to DOM element
var nodeChilds = node.childNodes;
var initialChildNodesCount = nodeChilds.length;
assert(nodeChilds.constructor === NodeList);

In this case, the NodeList is a live collection. Changes in the DOM are reflected in the collection. 

// add children to node
assert(initialChildNodesCount === nodeChilds.length); // throws


node.firstChild

assert(node.firstChild === node.childNodes[0]);

node.lastChild

var childNodes = node.childNodes;
var childNodesCount = childNodes.length;
assert(node.lastChild === childNodes[childNodesCount - 1]);

node.nextSibling

var parentNode = node.parentNode;
var nodeSiblings = parentNode.childNodes;
var nodeIndex = Array.prototype.indexOf.call(nodeSiblings, node);
assert(node.nextSibling === nodeSiblings[nodeIndex + 1]);

node.previous

var parentNode = node.parentNode;
var nodeSiblings = parentNode.childNodes;
var nodeIndex = Array.prototype.indexOf.call(nodeSiblings, node);
assert(node.previous === nodeSiblings[nodeIndex - 1]);

Node

Methods

  • appendChild
  • contains
  • hasAttributes
  • hasChildNodes
  • insertBefore
  • removeChild
  • replaceChild

other

node.contains(otherNode)

returns a Boolean value indicating whether an otherNode is a descendant of a node

node.appendChild(otherNode)

// node is empty
assert(Array.prototype.indexOf.call(node.childNodes, otherNode === -1));
node.appendChild(otherNode);
assert(Array.prototype.indexOf.call(node.childNodes, otherNode === 0))

node.hasAttributes()

returns a Boolean value, true or false, indicating if the current element has any attributes or not

node.hasChildNodes()

var childNodesCount = node.childNodesCount;
var hasChildNodes = node.hasChildNodes();
assert(Boolean(childNodesCount) === hasChildNodes);

node.insertBefore(newElement, referenceElement);

// node is empty
node.appendChild(referenceElement);
var insertedElement = node.insertBefore(newElement, referenceElement);
assert(node.childNodes[0] === newElement);
assert(node.childNodes[1] === referenceElement);
assert(insertedElement === node.childNodes[0]);

node.removeChild(childToRemove);

node.appendChild(newNode);
assert(node.contains(newNode));
var removed = node.removeChild(newNode);
assert(!node.contains(newNode));
assert(removed === newNode);

node.replaceChild(newChild, oldChild);

replaces one child node of the specified element with another; returns oldChild

Element

assert(typeof Element === 'function');
assert(Element.prototype.__proto__ === Node);

Element properties

  • attributes
  • childElementCount
  • children
  • id
  • name
  • innerHTML

other

element.attributes

returns a NamedNodeMap that lists all attributes associated with the element.

more about NamedNodeMap

element.children

live HTMLCollection containing all child elements of the element, as a collection

more about HTMLCollection

element.childElementCount

assert(element.childElementCount === element.children.length)

element.id

assert(div.id === 'myId')

element.name

assert(div.name === 'myNameIsDiv')

element.innerHTML


    item

var innerHTML = '    item';
assert(div.innerHTML === innerHTML);
element.classList

Methods

  • add
  • remove
  • toggle
  • contains
element.classList.contains(string)
assert(element.classList.contains('class1'));
assert(element.classList.contains('class2'));
assert(element.classList.contains('class3')); //throws
element.classList.add(string)
element.classList.add('class3');
element.classList.remove(string)
element.classList.remove('class2');
element.classList.toggle(string)
element.classList.toggle('class2');
element.classList.toggle('class2');

Element

methods

  • getAttribute
  • getElementsByClassName
  • getElementsByTagName
  • hasAttribute
  • matches
  • querySelector
  • querySelectorAll

Element

methods

  • remove
  • removeAttribute
  • setAttribute
element.getAttribute(attrName)

returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string)

element.getElementsByClassName(className)

returns a live HTMLCollection containing all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node

element.getElementsByTagName(tagName)

returns a live HTMLCollection of elements with the given tag name

element.hasAttribute(attrName)

returns a Boolean indicating if the element has the specified attribute or not

element.matches(cssSelector)

returns true if the element would be selected by the specified selector string; otherwise, returns false

element.querySelector(cssSelector)

returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors

element.querySelectorAll(cssSelector)

returns a non-live NodeList of all elements descended from the element on which it is invoked that match the specified group of CSS selectors

element.remove()

removes the element from the children list of its parent

element.removeAttribute(attrName)

removes the named attribute from the element

element.setAttribute(attrName, attrValue)

adds a new attribute or changes the value of an existing attribute on the specified element

HTMLElement

assert(typeof HTMLElement === 'function');
assert(HTMLElement.prototype.__proto__ === Element);

HTMLElement

properties

  • offsetParent
  • offsetHeight
  • offsetLeft
  • offsetTop
  • offsetWidth
  • style
  • tabIndex
  • title

other

htmlElement.offsetHeight | htmlElement.offsetWidth

read-only property is the height of the element including [vertical | horisontal] padding and borders, in pixels, as an integer

htmlElement.offsetParent

returns a Element that is the element from which all offset calculations are currently computed

htmlElement.offsetLeft | htmlElement.offsetTop

the distance from this element's [left | top] border to its offsetParent's [left | top] border

htmlElement.title

containing the text that appears in a popup box when mouse is over the element

htmlElement.tabIndex

is a long representing the position of the element in the tabbing order

htmlElement.style
  • represents a collection of CSS property-value pairs set in elements style attribute (inline styles)
  • to get the values of all CSS properties for an element you should use window.getComputedStyle()

list of the CSS properties accessible via .style

HTML Element interfaces

DOCUMENT

document.body;
document.getElementById('id');
document.getElementsByClassName('class-name');
document.getElementsByName('name-attribute-value');
document.getElementsByTagName('div');
document.querySelector('div');
document.querySelectorAll('div');
document.createElement('tagname');

Creates a new element with the given tag name.

document.createTextNode('text');

creates a new Text node.

more about document