HTML DOM Api
JS
S
JavaScriptExplanation of how a browser renders a page (from the text parsing to the triggering of the 'onload' event) and it's API to enable JavaScript to query and modify the DOM. Based on: http://prettydiff.com/guide/unrelated_dom.xhtml
1/*
2 Introduction/Overview
3 DOM - API for JavaScript to access and interpret any markup based on XML (eg. HTML)
4 DOM API for Javascript is a collection of Ojects which inherit from 'document' object.
5
6 Any data point on DOM is a 'node'.
7 A 'node' is defined by types: 'element','text','attribute' *There are 12 types.
8 DOM is case sensitive (because DOM is based on XML syntax)
9 Lowercase is recommened to access HTML from DOM.
10 XPath is an alternative to DOM. (not universally supported).
11
12 DOM Level 3 - 2004
13 DOM Level 4 - 2015
14
15 HTML Loading in Browsers
16 If a cached JS file is requested at the top of a document, it may execute fast enough to request access to DOM objects before they are created.
17 By keeping JS files in the bottom of the document we are allowing the DOM to be fully rendered before any JS access will happen.
18
19 HTML markup language is sent to the browser via HTTP as text.
20 1. Browser will parse from text to XML (internally).
21 2. Then additional resources are indentified and requests are executed.
22 CSS, Image resources and should be put as high as possible in the HTML document so that the DOM renders without extra repaints.
23 3. After DOM is fully rendered, all further requests have been executed, the requested JS is interpreted and the load of the page is completed.
24 4. At this time 'onload' event is executed.
25 Note: JS requests not made from the HTML have no impact on 'onload' event.
26
27*/
28
29/*
30 Node types comprehensive list
31 ELEMENT_NODE
32 ATTRIBUTE_NODE
33 TEXT_NODE
34 CDATA_SECTION_NODE
35 ENTITY_REFERENCE_NODE
36 ENTITY_NODE
37 PROCESSING_INSTRUCTION_NODE
38 COMMENT_NODE
39 DOCUMENT_NODE 9 *document
40 DOCUMENT_TYPE_NODE
41 DOCUMENT_FRAGMENT_NODE
42 NOTATION_NODE
43*/
44
45/*
46 Querying the DOM
47 Any DOM access method executed on the 'document' is proxied through:
48 'document.documentElement' (aka the 'root' note of the markup, <html>)
49*/
50document.getElementById('elementId'); //null or 1st found node
51document.getElementsByTagName('section'); // [node]
52
53myElementNode.getElementsByTagName('section'); // [node]
54
55document.getElementsByClassName('classToken'); // [node] *DOM Level 4
56myElementNode.getElementsByClassName('classToken'); // [node] *DOM Level 4
57
58myElementNode.getAttribute('attributeName'); //null or string
59
60myNode.cloneNode(true); // copy of the node (inc all descendants)
61myNode.cloneNode(); // copy of the node (exc all descendants)
62myElementNode.cloneNode; // all values, attributes and properties are copied
63
64/*
65 Walking the DOM
66*/
67myNode.parentNode; // elementNode (or document if the element is on the 1st level on the DOM tree)
68myElementNode.childNodes; // [node] *wont return child descendant nodes
69myElementNode.firstChild; // node *same as childNodes[0]
70myElementNode.lastChild; // node *same as childNodes[childNodes.length-1]
71myNode.nextSibling; // node or null *next adjacent child the parent node, if current: null
72myNode.nextElementSibling; // nodeElement or null *WHATWG DOM
73myNode.previousSibling; // node or null *prior adjacent child the parent node, if current: null
74myNode.previousElementSibling; // nodeElement or null *WHATWG DOM
75
76myElementNode.attributes; // [attribute="value", ..] or []
77myNode.nodeType // 1 - 12
78
79myNode.nodeName; // string or null
80myNode.nodeValue; // string or null
81
82/*
83 Changing DOM
84*/
85const mySection = document.createElement('section'); // newElement *not bound yet **can be used only on 'document' or 'documentFragment' types
86const myFunkySection = document.createElement('sectionx'); // throw new Error('syntax violation')
87const myTextNode = document.createTextNode('section'); //newTextNode
88
89const myElementNode.appendChild(mySection); // node
90
91myElementNode.insertBefore(referenceNode, newNode); // node *add the new node before the referenceNode
92
93myElementNode.removeChild(node); // node *the node can be kept in memory, mutaded and injected on the document later
94myElementNode.removeChild(myElementNode.lastChild);
95myElementNode.removeChild(myElementNode.childNodes[1]);
96
97myElementNode.replaceChild(newNode, originalNode); // originalNode *note the newNode cannot have a parent assigned to it
98
99myElementNode.removeAttribute("class"); // nothing
100myElementNode.setAttribute("class","mega_banner"); // nothing
101
102// Method Chaining
103// Get all ChildNodes of an element
104document.getElementById("someID").childNodes
105
106// How many child nodes a domElement has
107document.getElementById("someID").childNodes.length
108
109// Get all sections of an element
110document.getElementById("someID").getElementsByTagName("section")
111
112// Determinte the node type of an element
113document.getElementById("someID").firstChild.nodeType
114
115//get the first child of a targeted element's previous sibling
116document.getElementById("someID").previousSibling.firstChild
117
118// get the second child of an element's next sibling
119document.getElementById("someID").nextSibling.childNodes[1]
120
121// grandfather element of first h1
122document.getElementsByTagName("h1")[0].parentNode.parentNode
123
124// get id of the first g3 on the document
125document.getElementsByTagName("h3")[0].getAttribute("id")
126Created on 12/25/2017