DOM Flashcards
How to handle event bubbling in JavaScript?
Event bubbling is a concept in the Document Object Model (DOM) that describes the way in which events propagate or “bubble up” through the hierarchy of nested elements in the DOM.
When an event, such as a mouse click, occurs on a DOM element, the event will be handled by the element first, then its parent element, and so on, until the event reaches the root element. This behavior is called event bubbling.
const parent = document.querySelector(‘.parent’);
const child = document.querySelector(‘.child’);
// Scenario of clicking on the child element
parent.addEventListener(‘click’, () => {
console.log(‘Handled Last’);
});
child.addEventListener(‘click’, () => {
console.log(‘Handled First’);
});
In the above example, when you click on the child element, the event will be handled by the child element first, then its parent element, and so on, to the root element unless you stop the propagation (event.stopPropagation()) of the event.
Difference between appendChild() and insertBefore()?
You can add a new element to the DOM using the appendChild or insertBefore method.
appendChild
The appendChild method adds a new element as the last child of the specified parent element.
const roadmapWrapper = document.querySelector(‘.roadmap-wrapper’);
const roadmap = document.createElement(‘div’);
roadmap.id = ‘javascript-roadmap’;
roadmapWrapper.appendChild(roadmapTitle);
In the example above, the roadmap element is added as the last child of the roadmapWrapper element.
insertBefore
The insertBefore method adds a new element before the specified child element.
const roadmapWrapper = document.querySelector(‘.roadmap-wrapper’);
const roadmap = document.createElement(‘div’);
roadmap.id = ‘javascript-roadmap’;
const roadmapTitle = document.querySelector(‘#roadmap-title’);
roadmapWrapper.insertBefore(roadmap, roadmapTitle);
In the example above, the roadmap element is added before the roadmapTitle element.
What is Event Capturing in JavaScript?
Event capturing is the first phase of event propagation. In this phase, the event is captured by the outermost element and propagated to the inner elements. It is also known as trickling. It is the opposite of event bubbling.
How to handle error in Promise?
In order to handle errors in promises, we can use the catch method or the second argument of the then method.
Rejecting a promise
const promise = new Promise((resolve, reject) => {
reject(new Error(‘Something went wrong’));
});
Catch method
In this method, we can pass a callback function that will be called when the promise is rejected.
promise
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error.message);
});
Second argument of the then method
In this method, we can pass two callback functions as arguments. The first one will be called when the promise is resolved and the second one will be called when the promise is rejected.
promise.then(
(result) => {
console.log(result);
},
(error) => {
console.log(error.message);
}
);
How to scroll to the top of the page using JavaScript?
In order to scroll to the top of the page, we can use the scrollTo method.
window.scrollTo(0, 0);
What is preventDefault() method in JavaScript?
The event.preventDefault() method is used to prevent the default action of an event. For example, when you click on a link, the default action is to navigate to the link’s URL. But, if you want to prevent the navigation, you can use event.preventDefault() method.
const link = document.querySelector(‘a’);
link.addEventListener(‘click’, (event) => {
event.preventDefault();
console.log(‘Clicked on link!’);
});
How to remove an Element from DOM?
To remove a DOM element, you can use the remove or removeChild method of the Node interface.
const roadmapWrapper = document.querySelector(‘.roadmap-wrapper’);
const roadmapTitle = document.querySelector(‘#roadmap-title’);
roadmapWrapper.removeChild(roadmapTitle);
roadmapWrapper.remove();
How to select DOM elements using querySelector() and querySelectorAll()?
For selecting elements in the DOM, the querySelector and querySelectorAll methods are the most commonly used. They are both methods of the document object, and they both accept a CSS selector as an argument.
querySelector
The querySelector method returns the first element that matches the specified selector. If no matches are found, it returns null.
const roadmapWrapper = document.querySelector(‘.roadmap-wrapper’);
const roadmapTitle = document.querySelector(‘#roadmap-title’);
querySelectorAll
The querySelectorAll method returns a NodeList of all elements that match the specified selector. If no matches are found, it returns an empty NodeList.
const roadmapItems = document.querySelectorAll(‘.roadmap-item’);
How to create a new Element in DOM?
To create a new DOM element, you can use the document.createElement method. It accepts a tag name as an argument and returns a new element with the specified tag name. You can set attributes to the element.
const div = document.createElement(‘div’);
div.id = ‘roadmap-wrapper’;
div.setAttribute(‘data-id’, ‘javascript’);
console.log(div); // <div id="roadmap-wrapper" data-id="javascript"></div>
What is DOM?
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.
How to measure dimensions of an Element?
You can use getBoundingClientRect method to get the dimensions of an element.
const roadmapWrapper = document.querySelector(‘.roadmap-wrapper’);
const dimensions = roadmapWrapper.getBoundingClientRect();
console.log(dimensions); // DOMRect { x: 8, y: 8, width: 784, height: 784, top: 8, right: 792, bottom: 792, left: 8 }
How to get viewport dimensions in JavaScript?
You can use window.innerWidth and window.innerHeight to get the viewport dimensions.
