Document Object Model

• represents content on HTML document as a tree of node objects.
• DOM-API exposes the functionality to change webpage’s content
• Basic objects
  • window : global object
  • document : root node. HasdocumentElement (html) , head body
• Altering attributes
  • standard html attributes turn into HTMLElement fields. Some may type convert
  • Boolean attributes can’t be set to false, they have to be removeAttribute()
• DocumentFragment interface is a lightweight version of document.

let fragment = new DocumentFragment();
fragment.append(eleList)
div.appendChild(fragment) //append fragment to DOM

DOM Datatypes

• Node: objects that make up DOM tree. Each node has 6 relationships
  • parentNode firstChild lastChild previousSibling nextSibling childNodes
  • **Element*** versions
• NodeList: iterable of nodes. E.g. children (has length)
• HTMLElement: a node with a specific node type Node.ELEMENT_NODE. It has several subtypes like HTMLInputElement
• HTMLCollection: iterable of HTMLElements. Returned by document.getElement** methods
• NamedNodeMap: iterable of Attr objects = element's attributes. E.g. div.attributes
• DOMTokenList: set of space separated tokens on attribute. e.g. div.classList

Node Codes/ Constants

1 (Node.ELEMENT_NODE)

3 (Node.TEXT_NODE)

8 (Node.COMMENT_NODE)