DOM

#documentobjectmodel #javascript #webdev #programming

When a webpage is loaded, the browser renders it as a tree of objects. This hierarchical representation of HTML elements is called the Document Object Model, or DOM for short. In this model, the HTML document is referred to as the document object, making this structure a document object model. The DOM enables JavaScript to have powerful capabilities to manipulate HTML.

What does it mean to manipulate HTML with JavaScript?
Thanks to the tree-like structure of the DOM, JavaScript can target and modify any part of the page. To do this, you start by accessing the document object, which serves as the parent or "root" of all other objects in the model. From the document, you can traverse down to specific child elements that you want to manipulate.

In the DOM, the document object is considered the "mother" of all objects. However, the name of this root object can vary across different environments:

In the browser's global context, it's called window.
In a Node.js environment, it's referred to as global. Despite the difference in names, the concept remains the same.
Accessing Elements in the DOM:
JavaScript provides several methods to access specific elements in the DOM, such as:

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
Newer methods like document.querySelector() and document.querySelectorAll()

If the targeted element exists, these methods return it as an object. If the element is not found, the method will return null.

What Can You Do with the DOM?
Once you have accessed an element, you can manipulate it in various ways:

Change Content: Modify the element's text or HTML using innerHTML or textContent.
document.getElementById("example").innerHTML = "New Content!";
React to Events: Use addEventListener() to make the element respond to user actions:
document.getElementById("button").addEventListener("click", function() {
alert("Button clicked!");
});
Style Elements: Directly change an element's style properties.
document.getElementById("example").style.color = "blue";
Create New Elements: Dynamically generate HTML elements using document.createElement() and append them to the DOM.
const newElement = document.createElement("div");
newElement.textContent = "I am a new element!";
document.body.appendChild(newElement);

Lets try an analogy,

If you want to find a student:

You first locate their school (like the document in the DOM).(The document object is your starting point—it represents the entire webpage. Just like the school contains all classes, the document contains all elements on the page).
Then, within the school, you find their class (a specific element in the DOM, such as a div or a section).
Finally, within the class, you identify the student (the target element you want to manipulate).

creating a todo-list with DOM:
level 1 :

const input = document.createElement("input"); //first we create our input box

input.id = "textBox";//we give it a class so that we can target it later

input.placeholder = "write todo here";// we set a place holder for it

document.body.appendChild(input); //we attach it to our body element

const button = document.createElement("button");//we create our button the same way

button.innerText = "Submit"; //set a text for it

document.body.appendChild(button);//attach out button to the body

// next we add functionality to our page
button.addEventListener(
  "click",() => {
    const taskText = input.value;
    const taskElement = document.createElement("p");
    if(taskText != ""){
      taskElement.innerText = taskText;
      document.body.appendChild(taskElement);
    }
    input.value="";
  }
)

creating a todo-list with DOM:
level 2:

const input = document.createElement("input");
input.placeholder = "write your todo here";
input.id = "todoBox";
document.body.appendChild(input);

const button = document.createElement("button");
button.innerText = "Submit";
document.body.appendChild(button);

const todoList = document.createElement("ul");
document.body.appendChild(todoList);

button.addEventListener(
  "click",() => {
    const taskText = input.value;
    if(taskText !== ""){
      const toDo = document.createElement("li");
      toDo.innerText = taskText;
      todoList.appendChild(toDo);

      toDo.addEventListener(
        "click",() => {
          toDo.remove();
        }
      )

    }
    input.value = "";

});