DOM Levels
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
DOM Levels
By Sasha Pinchuk
