This page provides some examples for working with the DOM. The DOM is a representation of the HTML document that can be accessed and modified with JavaScript. It's not the same as the HTML document, and any changes you make with client-side JavaScript will have no effect on the underlying HTML and will revert at reload. The DOM represents the HTML structure of the document as a tree with nested nodes, where each element in the document (or comment, or text outside of an element) is a node in the tree.
The simplest way to access elements in JavaScript is with
document.getElementbyId();. You can also use:
.getElementsByClassName(); (returns an array-like object of elements as an HTML collection) li has the same class as above..getElementsByTagName(); also returns an array-like object as an HTML collection..querySelector(); and .querySelectorAll(); which can take a tag, class, or id, and yes, the second one returns an array-like object, this time as a NodeList.We refer to the DOM as a tree structure of nested nodes, and nodes are referred to as parents, children, and siblings in this structure, in reference to their hierarchy. For example, the div that contains all of thes p elements has the id #example, so we would refer to these p elements as "children" of #example. You could access them through their parent element with document.getElementById('example').children;, however, this would also return all of the other child elements of #example in the order in which they appear in the page.
You can use JavaScript to create elements, style elements, add text or html content to elements, add elements to the DOM, add remove elements from the DOM.
Because it's JavaScript, we can also do so procedurally with loops and timings.
For more on DOM traversal and modification, see Tania Rascia's excellent DOM series, starting with "Introduction to the DOM"
.I'm an element outside of the #example div.