DOM Levels

- Level 0

- Level 1

- Level 2

- Level 3

- Level 4

- Level 5

- Level 6

- Level 7

- Level 8

- Level 9

- Level 0

- Level 1

- Level 2

- Level 3

- Level 4

Level 0 - not a DOM

document.all
Boolean(document.all)// false

document.images

document.forms 
document.forms[0].elements

document.links// a[href]
document.anchors// a[name]

DHTML?

Level 1 - DOM begins!

Real DOM Tree with Nodes
document.getElementsByTagName
document.getElementById
NodeTypes
- CData
- Comment
- Text
- Attribute
- etc
Live NodeList

DOM Level 2

NameSpaces (HTML, MathML, SVG, XLink, XML, XMLNS)
Styles
Event
Traversal
DOMImplementation
- document.implementation

document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*")

DOM Level 2 - Events

Event capture
Event bubbling
Event cancellation
AddEventListener
- Function
- EventHandler

DOM Level 2 - EventHandler

const buttonElement = document.getElementById('btn');

buttonElement.addEventListener('click', function (event) {
  alert('Function!');
}); 


buttonElement.addEventListener('click', { 
  handleEvent: function (event) { 
    alert('EventHandler!'); 
  } 
});

Y2K

DOM Level 3

// XPath
var xpathResult = document.evaluate(xpathExpression, node, nsResolver, resultType, result);

// DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

// XMLSerializer
var inp = document.createElement('input');
var XMLS = new XMLSerializer(); 
var inp_xmls = XMLS.serializeToString(inp);

// DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
});

DOM Level 4

Node
- prepend/append
- before/after
- remove/replaceWith
- closest/contains
Element.matches
DOM Listener Options: capture, passive, and once