Object structure for HTML document parsing, entry point for all the document content.
Ref.: https://dom.spec.whatwg.org/
The root object.
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).
document.documentElement
: thehtml
tagdocument.head
: thehead
tagdocument.body
: thebody
tag, ornull
if called inside thehead
tag (the browser didn't read it yet).
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>
hasrows
,caption
,tHead
,tFoot
,tBodies
;<thead>
,tfoot
andtbody
hasrows
;tr
hascells
(<td>
's and<th>
's),rowIndex
(whole table) andsectionRowIndex
(section only);<td>
's and<th>
's has cellIndex (in parent<tr>
).
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 ofid
equalsmyId
, no matter where.
elem.querySelectorAll(cssSelector)
gets a static collection with all elements insideelem
matchingcssSelector
;elem.querySelector(cssSelector)
gets the first element insideelem
matchingcssSelector
;elem.matches(cssSelector)
return if any element insideelem
matchescssSelector
;elem.contains(otherElem)
checks ifotherElem
is descendant ofelem
.elem.closest(cssSelector)
gets the closest ancestor ofelem
matchingcssSelector
(including itself).
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 elementname
attribute.