INFO PAGE

DOM Basics

The Document Object Model or the DOM has now been separated from the core JavaScript language and exists as an API that allows JavaScript to access and manipulate HTML tags in the document (and XML). It is basically about hierarchical structure - or getting at things that are nested inside other things.

Generally, there is a window that has a document. Then there are elements in the document that match the tags of the document. Here is a sample tag:

<!-- down in body -->

<div id=test>Hello</div>

EVENTS

If we put our script tag in the head, then We must capture an event for when the tags are loaded before we can access them. We use the addEventListener() method to capture an event. The parameters are what kind of event, like "click" or "mousedown" and what function to call.

<!-- up in head -->

<script>
// most events are lowercase but this one is not
window.addEventListener("DOMContentLoaded", ()=>{ // arrow function

	console.log("tags have loaded"); // use F12 (or right click inspect) to see console

	// put rest of code here

});     
</script>

ELEMENTS

If we want to get a reference to the element / tag, then we can access it by its id.

const myElement = window.document.getElementById("test");

Since pretty well everything is in the window we can omit that:

const myElement = document.getElementById("test");

This is still pretty lengthy, so jQuery became famous for $("#test"); and ZIM uses zid("test"); // you may want to do something like this one day yourself. There are other ways we can access elements as follows but the ID is most popular. Some of these return a node list of elements.

document.getElementsByName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
document.body
document.image

Once we have access to an element then we can change its content and its style.

myElement.innerText = "new text"; // or
myElement.innerHTML = "new text";
myElement.innerHTML = "<div class='hot'>content</div>";

myElement.className = "someClass";
myElement.style.backgroundColor = "blue"; // dash replaced with camelCase
myElement.style.fontSize = "30px";

INTERACTION

We interact with the page by applying events such as click, mousedown, mousemove, mouseup, mouseover, mouseout, (similar pointer events), keydown, keyup:

const test = document.getElementById("test");  
test.style.cursor = "pointer"; // give it the finger
test.addEventListener("click", ()=>{
	test.innerText = "COOL!";
});

// the event function receives an event object with more info about the event:
test.addEventListener("click", e=>{
	console.log(e.target); // would be the div tag - object that triggered the event
	console.log(e.currentTarget); // also the div tag - object the event was placed on
});

NODES

The nested tags make up a hierarchy of parents, children and siblings. Each tag is also called a node and we can add, change and delete nodes according to the Node API: (here we use the body but we could add to any tag)

const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
newDiv.parentNode; // body
newDiv.setAttribute("width", 20); // html width
body.children[0]; // newDiv if only tag in the body

// swap the div with another div
const replacementDiv = document.createElement("div");
document.body.insertBefore(replacementDiv, newDiv); 	
document.body.removeChild(newDiv);