ermogenes/DOM 101 notes.md

## DOM 101 notes.md

      
    Raw
  

              DOM 101 notes.md
            
          
    DOM - Document Object Model

Object structure for HTML document parsing, entry point for all the document content.
Ref.: https://dom.spec.whatwg.org/
document

The root object.
The DOM tree

Example:
<!DOCTYPE HTML>
<html>
<head>
  <title>The document title</title>
</head>
<body>
  The document content
</body>
</html>
That's the DOM:
DOCTYPE: html
  HTML
    HEAD
      #text: \n, 2 spaces
      TITLE
        #text: The document title
      #text: \n
    #text: \n
    BODY
      #text: The document content

Live DOM Viewer: http://software.hixie.ch/utilities/js/live-dom-viewer/
If html or body doesn't exists in document, it exists in DOM due to autocorrection. Same for open tags and tbody.
All spaces and newlines before head are ignored. All content after body is moved inside.
The browser tools hides the spaces/newline only text elements.
Most important node types:

document, the root;
elements, the document tags;
text;
comments (yes, you can read and process them).

Getting DOM elements


document.documentElement: the html tag
document.head: the head tag
document.body: the body tag, or null if called inside the head tag (the browser didn't read it yet).

Walking the tree

Terms:

children: all elements direct inside the element, including text and comment elements
descendants: all children and their childrens (all branches and leaves)
parent: the direct above element in tree
ancestor: the chain of parents;
siblings: elements with the same parent


All
Element-only
Description


childNodes
children
live read-only collection of children (use for..of to iterate)


childNodes[n]
children[n]
n th child


firstChild
firstElementChild
first child


lastChild
lastElementChild
last child


parentNode
parentElement
the parent of the element (document.documentElement.parentNode === document but document.documentElement.parentElement === null)


nextSibling
previousElementSibling
the next sibiling


previousSibling
nextElementSibling
the previous sibiling


hasChildNodes()
N/A
element has children?


length
N/A
number of children


Tables

<table> has rows, caption, tHead, tFoot, tBodies;
<thead>, tfoot and tbody has rows;
tr has cells (<td>'s and <th>'s), rowIndex (whole table) and sectionRowIndex (section only);
<td>'s and <th>'s has cellIndex (in parent <tr>).

Getting specific elements using id

There is id-named global variables, but teh use is not recommended. If there is a JS variable whith the same name, it takes precedence.
If the id is not unique, all the techniques are unpredictable!

document.getElementById('myId') gets the element of id equals myId, no matter where.

Getting specific elements using CSS selectors


elem.querySelectorAll(cssSelector) gets a static collection with all elements inside elem matching cssSelector;
elem.querySelector(cssSelector) gets the first element inside elem matching cssSelector;
elem.matches(cssSelector) return if any element inside elem matches cssSelector;
elem.contains(otherElem) checks if otherElem is descendant of elem.
elem.closest(cssSelector) gets the closest ancestor of elem matching cssSelector (including itself).

Other methods for getting specific elements

Use getElement_ (singular) for first and getElements_ (plural) for a live collection:

elem.getElementsByTagName(tag) gets by tag name ("*" means any tags);
elem.getElementsByClassName(class) gets elements having the given class name;
document.getElementsByName(name) gets by element name attribute.
All	Element-only	Description
`childNodes`	`children`	live read-only collection of children (use for..of to iterate)
`childNodes[n]`	`children[n]`	n th child
`firstChild`	`firstElementChild`	first child
`lastChild`	`lastElementChild`	last child
`parentNode`	`parentElement`	the parent of the element (`document.documentElement.parentNode === document` but `document.documentElement.parentElement === null`)
`nextSibling`	`previousElementSibling`	the next sibiling
`previousSibling`	`nextElementSibling`	the previous sibiling
`hasChildNodes()`	N/A	element has children?
`length`	N/A	number of children