DOM

Question 1

What is a DOM?

Answer 1

DOM is called as Document Object Model. Using DOM we can access the web elements. I mean the HTML elements can be accessed. It iwll have a DOM tree internally.

DOM is not part of the JS. It is web APIs inerface provided by the browser.

Question 2

In the HTML document, we have p tag. How to read and set the value using DOM?

<div>
<p>
</p></div>

Answer 2

Dcoument.querySelector(‘.message’).TextContent.

Question 3

In the HTML document, we have a input tag. How to read and set the value using DOM?

Answer 3

Document.querySelector(‘.message’).value

Question 4

In HTML, when a button is clicked, I want to change the number in the input field.

Answer 4

use event listensers.

Document.querySelector(‘.button’).addEventListener(‘click’, function(){
Document.querySelector(‘.message’).value = 5;
}

Question 5

In HTML, we need to change the color of body using DOM?

Answer 5

Document.querySelector(‘.body’).style.backgroundColor = white;

Question 6

There is a div tag and I have 3 classes to that div. How do I add / remove classes?

Answer 6

const d = Document.querySelector(‘.divClass’).

d.classList.remove() or .add()

Question 7

How to listen to an event when a keyboard key is pressed?

Answer 7

document.addEventListener(‘keyDown | keyUp | keyPress’ function(e){
console.log(e.key)
}

Question 8

How to get/select IDs in theHTML docment?

Answer 8

document.getElementById(idnamewithout#)

Question 9

How to get/select classes in theHTML docment?

Answer 9

document.getElementByClass(idnamewithout.)

Question 10

How to get/selects the tags using DOM?

Answer 10

document.getElementsByTagName()

Question 11

How to get entire HTML page in DOM?

Answer 11

document.documentElement

Question 12

How to get the head section of a HTML page using DOM?

Answer 12

document.head

Question 13

How to get the body section of a HTML page using DOM?

Answer 13

document.body

Question 14

How to create the below HTML in DOM:

&ltdiv class=”cookie”>&lt/div&gt

Answer 14

const message = document.createElement(‘div’);

message. classList.Add(‘cookie’);
messgae. textContent = “we dont care”;
message. innerHTML =
const. header = document.querySelector(‘header’);
header. prepend(message)

we also have append

we can either append or prepend

Question 15

The below code needs to be removed when the button is clicked. How can we do that in DOM?

&ltdiv class=”cookie”&gt
We dont care!
&ltbutton class=”btn”&gt Click here! &ltbutton&gt
&lt/div&gt

Answer 15

const message = document.querySelector(‘.cookie’);

document.querySelector(‘.btn’).addEventListener(‘click’, function(){
message.remove();
});

Question 16

What are event handlers?

Answer 16

Event handlers are the JavaScript code that invokes a specific piece of code when a particular action happens on an HTML element.

Question 17

How do you add event listeners?

Answer 17

document.querySelector(‘.h1’).AddEventListener(‘Click’, function(event){
});

Old school way of doing:

h1.onmouseenter = function(event)…

Question 18

The event should happen only once.. how?

Answer 18

document.querySelector(‘.h1’).RemoveEventListener(‘Click’, function(event){
});

Question 19

What is capturing and bubbling phase in DOM?

Answer 19

Consider below example:

  <p> hey!  <a> body->section->p->. This is called capturing.

then again it will traverse from below to up. This is called bubbling.

Consider navigation link.

It will have parent nav then menus as nav–links. When we add event listerner to nav–links, then the event listener will also be called for parents DURING BUBBLING phase.

we can stop this navigation by calling e.stopPropogation

We can also enforce during capturing phase using setEventListner(‘click’, function(){

}, true);</a></p>

Question 20

What is event delegation in JS?

Answer 20

Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the .target property of the event object.

example, in the navigation bar, instead of listening to the each navigation menu we can listen to we main parent. using e.target we can find the target element and take the action.