Repozytorium Web Developera

DOM, BOM & Web APIs

The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript. Source

window.navigator

window vs document

window object doesn't have all the methods which has document object.

document methods

To get an element:


document.getElementById(ID)
document.getElementsByTagName(ELEMENT_TYPE)
document.getElementsByClassName(CLASS) // But it's only in IE9+ - whereas .querySelectorAll() is in IE8.

To create an element:


document.createElement(ELEMENT_TYPE) // ex. 'img', 'div'

Some not popular methods:


document.activeElement // gets an focused element
document.readyState // is document loaded?

Child can be a Text node or an Element node. firstElementChild or lastElementChild will return only Element nodes. Similar methods without Element in name may also return a Text node.

  • .childElementCount
  • .firstElementChild
  • .lastElementChild
  • .previousElementSibling
  • .nextElementSibling

Node vs Element

Node in not always an Element. There are several types of Nodes (like a Text Node). Element is one of them.

Element methods

To append an element to another element:


element.appendChild(ELEMENT)

To set an attribute on element:


element.setAttribute(ATTRIBUTE_NAME, ATTRIBUTE_VALUE)

Some attributes you can set up directly:


img.src = URL