The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. - MDN Web Docs
documentwhich exposes the DOM API for us to play with.
⚡️ A global variable is basically one which already exists, which all levels of our program can access⚡️ An API is an
Application Programming Interface, and is basically just a set of functionality one system exposes for other systems to use.
documentobject which we can use to find the DOM node we are looking for. Some common ones are:
write("string")- Writes the given string to the end of the DOM
writeln("string")- Writes the string to the dom and then a newline
getElementById()- Target a node based on its
getElementByTagName()- Target nodes based on their tag
getElementsByClassName()- Target nodes based on their
'My List of …', and the unordered list (
<ul id="list"></ul>) is empty, yet, in the output at the bottom we can see clearly there is more content than we would expect. We are using the DOM API to add content to the HTML document.
idattributes. Now that we have the nodes, and the content, we can combine them to add our new content to the page.
<li>node, and a text node, and append the text node to the
linode, and then append the
linode to the list node. We do this inside of a loop, so that we do it once for each item in our array.
⚡️ According to the HTTP spec, only 1 element per page should have a given ID, so they should be unique.
remove()method on the node we want to remove. Let's take a look at a basic example of this now.