[Preparation for Interview Basic 1] DOM Element

Overlook

this article will focus on theory and technique related to DOM which may be asked in interview.

Let's Go

What is event delegation?

Event delegation is a technique which in used of the behavior of bubbling and capturing.

As you can see, when we click one element, samultaneously we also click on the it's parent element. Based on this behavior, we can put eventlistener on the top element, so that we have no need to add event listener to every element which build on this top element.

what is the pros and cost?

DOM traversal

To manipulate the DOM element, we have to be able to find the DOM element. And there is several ways to achieve this goal.

1. getElementbyId

2. getElemantByClassName

3. querySelector

I use this method in most of the situation. The reason why I used this method is that this method can select element by all kinds of properties.
id, className, attribute, whatever it is.

No need to memorize a lot of method.

But there is one behavior we have to be really cautious about:

It only return the first element which match to the condition.

//example HTML
<div class="hallo"></div>
<div class="hallo"></div>
<div class="hallo"></div>
<div class="hallo"></div>

//example Script
document.querySelector(".hallo");
//only select the first <div>

4. querySelectorAll

This methos aims to solve the problem of querySelector. This will select all the element which match the condition and would return an array.

Array method with querySelectorAll:

//example HTML
<div class="hallo"></div>
<div class="hallo"></div>
<div class="hallo"></div>
<div class="hallo"></div>

//example Script
array = document.querySelectorAll(".hallo");

//take specific div
array[0]//return the first div with hallo class

//add/remove class to all the elements with hallo class
array.forEach((element)=>{element.classList.add(classname)})

DOM manipulation

Control DOM elements:

//example HTML
<div class="hallo"></div>

//create DOM　element
const element = document.createElement("div);

//add html into element
element.innerHTML = `
 <h1>hallo world</h1>
`
//append element to <div> with hallo class
const hallo = document.querySelector(".hallo");
hallo.append(element)

//remove element 
elment.remove();

//add class
element.classList.add(classname)

//remove class
element.classList.remove(classname)

//edit textcontent
element.textContent = "type_any_text"

Form validation and submit

Before the appearance of AJAX, webpage were processed by the server and send to the client side. As a result, <form> would submit the data in dafault.

However, as front end kept growing in the past ten years. We will like to get the data in front end, instead sending it to the server immediately.

To achieve this goal, all we have to do is get the data before they been send, or, prevent the sending process. Here is the method to solve this problem.

//Example HTMl
<form>
    <input type="text" />
    <input type="submit" />
</form>

//get data

const form = document.querySelector("form");
const text = document.querySelector("text");

form.addEventListener("submit", (e)=>{
    e.preventDefault()//this will prevent submit
    const value = text.value// this could get the input data.
    if(vale === ""){
        //do something for validation
    }
})

Conclusion

Above is my note about DOM, hope you guys understand it easily!