1) How to Manipulate Elements in the DOM?
1. How to create elements?
2. How to set the innerHTML/ text content of an element?
3. How to append an element?
<div id="parent">
<div id="firstchild">I am the first child</div>
<p id="secondchild">I am the second child</p>
<h1>I am alive</h1>
<h2>Hello World</h2>
<p>I am the last child</p>
</div>
<script>
let createEle = document.createElement("div");
createEle.innerHTML = "I am a frontend developer";
let parent = document.getElementById("parent");
parent.appendChild(createEle);
console.log(parent);
</script>
The newly created div element will be appended in the last place after the p "I am the last child".
4. How to insert one element before another?
<div id="parent">
<div id="firstchild">I am the first child</div>
<p id="secondchild">I am the second child</p>
<h1>I am alive</h1>
<h2>Hello World</h2>
<p>I am the last child</p>
</div>
<script>
let createEle = document.createElement("div");
createEle.innerHTML = "I am a frontend developer";
createEle.id = "frontenddeveloper";
let parent = document.getElementById("parent");
let secondchild = document.getElementById("secondchild");
//let secondHeader = document.getElementsByTagName("h2");
parent.insertBefore(createEle, secondchild);
//parent.insertBefore(createEle, secondHeader[0]);
console.log(parent);
</script>
5. How to replace a child element
<div id="parent">
<div id="firstchild">I am the first child</div>
<p id="secondchild">I am the second child</p>
<h1>I am alive</h1>
<h2>Hello World</h2>
<p>I am the last child</p>
</div>
<script>
let createEle = document.createElement("div");
createEle.innerHTML = "I am a frontend developer";
createEle.id = "frontenddeveloper";
let parent = document.getElementById("parent");
let headerOnes = document.getElementsByTagName("h1");
parent.replaceChild(createEle, headerOnes[0]);
console.log(parent);
</script>
6. How to remove a child element
<div id="parent">
<div id="firstchild">I am the first child</div>
<p id="secondchild">I am the second child</p>
<h1>I am alive</h1>
<h2>Hello World</h2>
<p>I am the last child</p>
</div>
<script>
let parent = document.getElementById("parent");
let secondchild = document.getElementById("secondchild");
parent.removeChild(secondchild);
console.log(parent);
</script>
2) How to Add Styling with CSS?For an element to have a style we have to add a CSS class to it.
<button id="master">Click Me</button>
<style>
body {
background-color: hotpink;
display: flex;
align-items: center;
}
.button {
background-color: blueviolet;
width: 200px;
border: none;
font-size: 2rem;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
}
</style>
<script>
let buttonEle = document.getElementById("master");
buttonEle.addEventListener("click", addFunction);
function addFunction() {
buttonEle.classList.add("button");
console.log(buttonEle.classList);
}
</script>
Before clicking the button.
After clicking the button.
3) How to Remove Styling with CSS?
<button class="button" id="master">Click Me</button>
<style>
body {
background-color: hotpink;
display: flex;
align-items: center;
}
.button {
background-color: blueviolet;
width: 200px;
border: none;
font-size: 2rem;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
}
</style>
<script>
let buttonEle = document.getElementById("master");
buttonEle.addEventListener("click", removeFunction);
function removeFunction() {
buttonEle.classList.remove("button");
console.log(buttonEle.classList);
}
</script>
Before clicking the button.After clicking the button.
4) How to Toggle Styling with CSS?<button id="master">Click Me</button>
<style>
body {
background-color: hotpink;
display: flex;
align-items: center;
}
.button {
background-color: blueviolet;
width: 200px;
border: none;
font-size: 2rem;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
}
</style>
<script>
let buttonEle = document.getElementById("master");
buttonEle.addEventListener("click", toggleFunction);
function toggleFunction() {
buttonEle.classList.toggle("button");
console.log(buttonEle.classList);
}
</script>
See the output yourself.
5) Event Handling:
Event handling:
What are HTML events?
HTML events are "things" that happen to HTML elements like the click of a button, input in a text area, and so on. When an event occurs like the ones above, you can write JavaScript code which we call an event handler that will be executed. These event handlers are JavaScript functions. So when an event occurs on an element, the handler function is executed.
Event listeners: Important in manipulating the DOM. To add an event listener to an element or any DOM object, we need a method which is addEventListener(). This method is preferred to the old one where we include the event to be handled in the html markup.
With this the JavaScript is separated from the html markup which makes it cleaner and more readable.
An event listener accepts 3 parameters: -
1. type of event, like "click" and so on.
2. function to be executed.
3. boolean value specifying whether to use event bubbling or event capturing. This parameter is optional.
You can add many event handlers to one element.
You can also add many event handlers of the same type to one element, like two "click" events.
6) Callback Function:
CallBack Function: In JavaScript, you can also pass a function as an argument to a function. This function that is passed as an argument inside of another function is called a callback function.
Benefit of Callback Function:
The benefit of using a callback function is that you can wait for the result of a previous
function call and then execute another function call.
Note: The callback function is helpful when you have to wait for a result that takes time.
For example, the data coming from a server because it takes time for data to arrive.
function print(name, callback) {
console.log("Hi" + " " + name);
callback();
}
function callMe() {
console.log("I am a callback function");
}
print("Swati", callMe);
7) Without Callback function - async behaviour
function greet() {
console.log("Hello World");
}
function sayName(name) {
console.log("Hello" + " " + name);
}
setTimeout(greet, 2000); //2000 ms or 2 sec
sayName("Swati");
8) With Callback function - support sync behaviour
function greet(name, callback) {
console.log("Hello World");
callback(name);
}
function sayName(name) {
console.log("Hello" + " " + name);
}
setTimeout(greet, 2000, "Swati", sayName); //2000 ms or 2 sec
When we fetch data from a server we get it after some delay. The browser doesn't stay idle for that time and it moves to execute the next statement in the javascript program. To execute a block of code or provide the fetched data to the next function in the program we use the asynchronous callback function.
9) JavaScript is both synchronous and asynchronous.
By default, JavaScript is synchronous, which means that it executes code in a single thread, and each line of code is executed one after the other in the order that they appear in the program.
However, JavaScript also provides mechanisms for writing asynchronous code, such as callbacks, promises, and async/await. Asynchronous code allows tasks to be executed independently of the main program flow, which can be useful for tasks that may take some time to complete, such as fetching data from a server or performing a complex calculation.
In asynchronous JavaScript, instead of blocking the main thread while a task is being executed, the program can continue running, and the result of the task is handled later when it becomes available.
Overall, JavaScript can be used in both synchronous and asynchronous programming paradigms, depending on the needs of the application.
Comments
Post a Comment