Global variables

window execution context document for accessing the DOM
shortcut to window.document console for issuing messages, typically with console.log()
shortcut to window.console

DOM locating elements
see below for how to iterate over multiple results
all these methods can be called on any DOM element (i.e. instead of document), then the search happens only in that subtree

elt = document.getElementById("foo") returns the one DOM element whose id is foo elt = document.getElementsByClassName("foo") returns all the DOM elements of class foo elt = document.querySelector(".myclass") returns the first DOM element that matches
a CSS selector elts = document.querySelectorAll(".myclass") returns all the DOM elements that match
a CSS selector;

DOM changing / inspecting elements


          elt.classList.add('my-class')

adds a class to an element


          elt.classList.remove('my-class')

remove a class from an element


          elt.classList.contains('my-class')

does the element have that class ?


          elt.classList.toggle('my-class')

add or remove a class

elt.style.display = "none" change property display on elt elt.style.display = null cancels previous statement
so that property display is no longer defined in the style= attribute
so it will revert to the default value (i.e. the one defined in CSS) elt.style.backgroundColor = "red" to change a property whose name contains a dash,
like background-color, replace it with camelCase
elt.style.backgroundColor

elt.textContent = "text" change the text inside an HTML element

elt.innerHTML = 
          "<some><html></html></some>"

graft a whole tree inside an HTML element

DOM adding elements

my_div = document.createElement('div') create a div element warning
it still needs to be inserted somewhere ! father.append(my_div) inserts element my_div as the last child of element parent
this is how the newly-created element can become
part of the whole tree

const svgNS = "http://www.w3.org/2000/svg"
my_circle = document.createElementNS(
    svgNS, 'circle')

same but for the tags that belong
in the SVG family (svg itself, circle, rect, etc...)
likewise it needs to be grafted in the tree somewhere

DOM accessing and removing elements

child = node.children.item(n) returns the n-th child of node


          node.removeChild(child)

remove element child from its father node


          while (node.firstChild) node.removeChild(node.lastChild)

remove all children of node

DOM iterating over elements

for (let child of elt.children) iterates over the children of a given DOM element for (let element of document.querySelectorAll(selector)) iterates over a NodeList or HTMLCollection,
as returned by either QuerySelectorAll or getElementsByClassName
WARNING DO NOT use a for (x in elements)

arming callbacks
a_function denotes a function object
for a list of common events, see this link

document.addEventListener("DOMContentLoaded", a_function) registers a_function() to be triggered when document is fully loaded elt.addEventListener("click", a_function) will cause a_function(event) to be called
each time a user clicks on that element
other event names are exposed as well
through event the function can access details on that event (see below)

setInterval(a_function, 400) causes a_function() to be called
every 400ms forever setTimeout(a_function, 400) causes a_function() to be called
once in 400ms

using events
assume you have attached a callback with, say:
elt.addEventListener('click', (event) => {...})
here are a few ways to use the event object inside the callback

event.target locate the DOM element that received the event event.key what keyboard key was pressed
see also keyboard events event.clientX info on the location where the mouse was clicked
see also mouse events event.preventDefault() keep the event from having its default behaviour event.stopPropagation() stop the event from bubbling up the document tree