Some quick reference notes on Document Object Model
- Created by the browser when a web page is loaded. It is an object model representing the HTML
- DOM is an object oriented representation of a web page
- It is hierarchical – based on the element tags
- <head>, <body> at top / root
- DOM is most commonly used by JavaScript and serves as an interface to HTML/XML
- Change or create HTML elements and attributes
- Change or create CSS styles
- Event listeners
- DOM has methods and properties that JavaScript uses to interact with the web page
- Most commonly used objects for interface:
- document
- element
- window
- Most commonly used APIs based on the most commonly used objects in the DOM
document.getElementById(id)document.getElementsByTagName(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLelement.style.leftelement.setAttribute()element.getAttribute()element.addEventListener()window.contentwindow.onloadwindow.dump()window.scrollTo()
- Most commonly used objects for interface:
Other DOM objects available for interface:
- attribute
- console
- document
- element
- events
- event objects
- history
- HTMLCollection
- location
- navigrator
- screen
- style
- window
References
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://www.w3schools.com/Jsref/dom_obj_all.asp
https://www.w3schools.com/js/js_htmldom.asp