Document Object Model (DOM) Flashcards
What is DOM (Document Object Model)? And what are it’s functions? No
Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
It is representation of HTML document in the browser.
How do we breakdown accessing DOM Elements?
document.getElementById(‘’).textContent
In above function we access the document object.
Use getElementById method
Which returns another DOM object, that has a property textContent (getElementById is the most optimized method)
If we want to access the class, we need to write .className or .classList
We can also access DOM elements by:
document.querySelector(‘.description’) (using selectors like in CSS)
Accessing document object
document. documentElement
document. body
document. images
We can also access all elements according to selector query: document.querySelectorAll(‘’), but then we need to work with a node list (węzły)
How can you access computed style properties of elements, such as fontsize?
simple .style.fontSize might not work, because the style property only contains inline styles (not calculated styles or styles from the stylesheet). This will result in an empty string “” even though the element has a style.
window.getComputedStyle ()
How do you access images in the DOM?
You can easily create an array for images. For the whole document: const imgs = Array.from(document.images); or const imgs = [...document.images];
What are the methods that allow to access single dom element?
document. querySelector(‘li:nth-child(2)’);
document. getElementById(‘first’);
Both methods will find the first element in the document or return null.
What are the methods that allow accesing all matching elements?
document. querySelectorAll(‘ul>li’);
document. getElementsByTagName(‘li’)
document. getElementsByClassName(‘even’)
querySelectorAll is better supported and has more array methods.
getElementsByTagName and getElementsByClassName allows for search in other DOM objects than document. For instance, you can search in ul element.
Spread operator might also be useful to access the array methods, if they are needed.
How can you modify elements?
You can either assign values directly to the attributes or add/remove classes.
firstLi.textContent = “Nowa zawartość tekstowa”;
firstLi.innerHTML = ‘<strong>Pogrubienie</strong> i normalnie’;
firstLi.style.backgroundColor = “#ccc”
firstLi.classList;
firstLi.className;
It is important to know that all the elements we change from JS are added linearly to HTML (not to the outer Css file)
What are the methods to manipulate classes of elements?
classList.add(‘myClass’);
classList.contains(‘myClass’);
classList.remove(‘myClass’);
classList.toggle(‘myClass’);
className = “one two”; (will overwrite old values with new value)
How do you listen and handle DOM events?
element. addEventListener(‘click’, function () {})
window. addEventListener(‘‘scroll’, function () {})
document.querySelector(‘h1’).addEventListener(‘click’, function () {
this.textContent = “”;
}
What are the methods to add elements to a page?
First, we need to create an element Li
const liElement = document.createElement('li');
liElement.textContent = "Ostatni"; //add classList etc.
ul.appendChild(liElement);
ul.insertBefore(newLi,secondLi) (will insert the element befor secondLi in the ul element).
firstLi.insertAdjacentElement(‘beforebegin’,liElement) - Interesting method
append, prepend are new methods(that do not work in IE) Allow to insert multiple elements like: firstP.append(i, newLi);
What are the basic properties of mousemove event?
Whenever we add event listener, we are given an event object. Some of mousemove event object basic properties are:
e. clientX, e.clientY (position from start of the window)
e. pageX, e.pageY
e. offsetX, e.offsetY
What is the difference between key capturing events in the DOM
there are 3 methods to capture key events.
‘keyup’
‘keydown’
‘keypress’
keypress is meant to be event that captures letters that are put into an input. (so it does not capture keys like arrow up, tab etc.) (what is interesting delete and backspace will not be considered as a key press too.)
keyup and keydown capture all kinds of keys.
How do you get number of pixels that the document has been scrolled horizontally or vertically
window.pageXOffset, window.pageYOffset;
What does Element.getBoundingClientRect() method do?
It returns the size and position of an element relative to the viewport.
getBoundingClientRect().top, will return its position from the top of the viewport.
