DOM Flashcards
What is a DOM?
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.
In the HTML document, we have p tag. How to read and set the value using DOM?
<div>
<p>
</p></div>
Dcoument.querySelector(‘.message’).TextContent.
In the HTML document, we have a input tag. How to read and set the value using DOM?
Document.querySelector(‘.message’).value
In HTML, when a button is clicked, I want to change the number in the input field.
use event listensers.
Document.querySelector(‘.button’).addEventListener(‘click’, function(){
Document.querySelector(‘.message’).value = 5;
}
In HTML, we need to change the color of body using DOM?
Document.querySelector(‘.body’).style.backgroundColor = white;
There is a div tag and I have 3 classes to that div. How do I add / remove classes?
const d = Document.querySelector(‘.divClass’).
d.classList.remove() or .add()
How to listen to an event when a keyboard key is pressed?
document.addEventListener(‘keyDown | keyUp | keyPress’ function(e){
console.log(e.key)
}
How to get/select IDs in theHTML docment?
document.getElementById(idnamewithout#)
How to get/select classes in theHTML docment?
document.getElementByClass(idnamewithout.)
How to get/selects the tags using DOM?
document.getElementsByTagName()
How to get entire HTML page in DOM?
document.documentElement
How to get the head section of a HTML page using DOM?
document.head
How to get the body section of a HTML page using DOM?
document.body
How to create the below HTML in DOM:
<div class=”cookie”></div>
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
The below code needs to be removed when the button is clicked. How can we do that in DOM?
<div class=”cookie”>
We dont care!
<button class=”btn”> Click here! <button>
</div>
const message = document.querySelector(‘.cookie’);
document.querySelector(‘.btn’).addEventListener(‘click’, function(){
message.remove();
});
What are event handlers?
Event handlers are the JavaScript code that invokes a specific piece of code when a particular action happens on an HTML element.
How do you add event listeners?
document.querySelector(‘.h1’).AddEventListener(‘Click’, function(event){
});
Old school way of doing:
h1.onmouseenter = function(event)…
The event should happen only once.. how?
document.querySelector(‘.h1’).RemoveEventListener(‘Click’, function(event){
});
What is capturing and bubbling phase in DOM?
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>
What is event delegation in JS?
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.
