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β
document
which 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 anApplication Programming Interface
, and is basically just a set of functionality one system exposes for other systems to use.
getElementsByTagName
function.document
object 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 DOMwriteln("string")
- Writes the string to the dom and then a newlinegetElementById()
- Target a node based on its id
attributegetElementByTagName()
- Target nodes based on their taggetElementsByClassName()
- Target nodes based on their class
attributedocument
and control what the user sees. remember, the role of JavaScript in the web is primarily for adding interaction and logic to pages, which are presented visually by a combination of HTML and CSS.'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.id
attributes. 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 li
node, and then append the li
node 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.