# Document Object Model (DOM)

**What is DOM**
Document Object Model (DOM) is a programming interface that represents the structure of a web page in a way that programming languages like JavaScript can understand and manipulate. In simple term, DOM is a programming interface for web document. Programs can alter the document's structure, design, and content by using it as a representation of the page. The DOM allows programming languages to interact with the page by representing the document as nodes and objects.

**HTML DOM**
The HTML DOM is a specific implementation of the Core DOM that represents HTML documents. It provides objects, methods, and properties specifically designed to interact with and manipulate HTML elements. The main purpose of the HTML DOM is that it allows for dynamic changes to the content, structure, and style of a webpage using scripting languages like JavaScript.

**DOM METHODS**
HTML DOM methods are actions we can perform on HTML elements. While the HTML DOM properties are values that we can set or change. An example of HTML DOM method and properties is:

<script>
document.getElementById(id).innerHTML = "Welcome";
</script>

where: getElementById is the method and
innerHTML is the property

There are other DOM methods, element and selector. These are listed and briefly explained below in no particular order:

1. createElement: This is used to create a new element. It exists on document element. For instance, document.createElement takes in the name of the element you want to create; you can also add any attribute such id or class to it.
An example:

let div = document.createElement ("div");
    div.id = "header";
    div.class = "header-class"

2. {parent/element}.appendChild: This helps to add a new child to the element.

3. querySelector : This will return the first matching element on the passed selector string

4. querySelectorAll: This will return all the matching elements on the list.

5. getElementById: This selects an element by its ID. It can only return one item because an ID is unique per page.

6. getElementsByClassName: This returns a list of elements with given class name. Note that two elements can have the same class name.
Example:
`document.getElementByclassName ("text-white");` This will return all elements with class name "text-white".

7. getElementsByTagName: This returns a list of elements with the given tag name. For example, when you want to target a div, you pass the tag name as ("div").
For instance, `document.getElementByTagName("h2")`, returns all theh h2 elements in the document page.

8. getElementsByName: The getElementsByName is a special attribute. It is the attribute you add to your form element. Examples are button, input, etc. document.getElementsByName ("gender") when the
`<input name = "gender" type ="radio" value ="F">`
`<input name = "gender" type ="radio" value ="M">` will return the name attribute in the form (input) element.
10. {element}.setAttribute: The setAttribute helps us to create an attribute that does not exist with a vlaue or create an attribute that exists with a value. The setAttribute takes two parameters which are the class and value.
Example:

let a = document.querySelector("text-white");
    a.setAttribute ("id", "header");
    a.setAttribute ("class", "nav");

10. {element}.getAttribute: The getAttribute helps the user get the value of the attribute specified.
Example:

let id = div.getAttribute ("id"); 
    console.log(id);

11. {element}.classList.add: This adds to already existing classes. That is, it is a method used to add one or more CSS classes to an HTML element.
Example:

let students = document.querySelectorAll("student");
    students[1].classList.add ("new-class");

Note that you can add multiple classes to an element at the same time.

12. {element}.classList.remove: The classList.remove is used to remove one (a target element's class) or more classes from an HTML element.
Example:

let students = document.querySelectorAll("student")
    students[0].classList.remove ("student");

17. {element}.classList.toggle: The classList.toggle method either adds or removes. Toggle checks if the class exists and removes it, but if it doesn't exist it will add the class. In other words, it can add a new class or remove an existing class.
Example:

let section = document.getElementById("mySect");
    div.addEventListener("click", () => {
    div.classList.toggle("display");
  });

Note, if display class exists, it will remove it but if it doesn't, it will add it.

19. {element}.classList.replace: This basically replaces an existing class with a new class. It uses two arguments: the class to be removed and the class used to replace it.
Example:
To change student class to profile

let students = document.querrySelectorAll("student")
    students.forEach ((student)=>{
    student.classList.replace("student", "profile");
});

DOM is a broad topic and it is worth noting that there are many other HTML DOM methods aside the ones mentioned above.

**Conclusion**

I learnt that with DOM, you can transform a static HTML page into one that is smart, dynamic, and interactive through the Javascript. As a developer, you must acknowledge the imprtance of DOM techniques to dynamically interact with and manipulate web pages.