Document Object Model (DOM) is an programming interface for web document.
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
So that JavaScript can get access to change all the elements of the document.
Document will have methods and properties.
methods
are actions performed on document.properties
are values of document that can be set or change.
-
document.querySelector()
const paragraph = document.querySelector('p'); // html tag const paragraph = document.querySelector('.class-name'); // class const paragraph = document.querySelector('#id-name'); // id
- select the element based on the type of input given to the function.
- have to use CSS selector as input that includes html tags, class selectors or id selectors.
- in above example, html
<p>
tag will be selected and returns the it.
-
document.querySelectorAll()
const paragraph = document.querySelectorAll('p'); // html tag const paragraph = document.querySelectorAll('.class-name'); // class const paragraph = document.querySelectorAll('#id-name'); // id
- select all the elements based on the type of input given to the function.
- have to use CSS selector as input that includes html tags, class selectors or id selectors.
- in above example, all the html
<p>
tag will be selected and returns them asNodeList
. - we can easily traverse all the elements of the
NodeList
using any loop.
-
document.getElementById()
const paragraph = document.getElementById('para');
- select the element based on the name of the id.
- in above example,
para
id will be selected and returns the it.
-
document.getElementsByClassName()
const paragraph = document.getElementsByClassName('para');
- select the element based on the name of the class.
- in above example, all the
para
classes will be selected and returns them asHTMLCollection
. HTMLCollection
is a array but we cannot loop it throughfor-each
loop.- can be accessed through indexes.
-
documetn.getElementsByTagName()
const paragraph = document.getElementsByTagName('p');
- select the element based on the name of the html tag.
- in above example, all the html
p
tags will be selected and returns them asHTMLCollection
. HTMLCollection
is a array but we cannot loop it throughfor-each
loop.- can be accessed through indexes.
-
innerHTML
- used to set or return the whole element with html tags.
-
innerText
- used to set or return the text inside element.
- it return all its children except CSS hidden text spacing and tags.
-
textContent
- used to set or return the text inside element.
- it return all its children including CSS hidden text spacing and tags.
const element = `<p>Html block added by the innerHTML property</p>` const text = `sample text` paragraph.innerHTML += element; paragraph.innerText += text; paragraph.textContent += text;
createElement()
- function which takes input of which element has to be created.remove()
- function which will remove the element from the document object.const ul = document.querySelector('ul'); const item = document.createElement('li'); item.textContent = `This is the item added`; ul.append(item); const items = document.querySelectorAll('li'); items[3].remove();
getAttribute
- used to get the value of element's attribute.setAttribute
- used to set the value of element's attribute.hasAttribute
- used to check the element has particular attribute.hasAttributes
- used to check the element has attributes.removeAttribute
- used to remove the particular attribute.createAttribute
- used to create a new attribute.
We can modify or add the css styles to the element by two ways.
-
style
propertyconst paragraph = document.querySelector('.para'); para.style.border = '2px solid pink';
-
setAttribute
propertyconst paragraph = document.querySelector('.para'); para.setAttribute('style', 'display: inline-block');
-
Add classes:
- adding new classes to the element.
const paragraph = document.querySelectorAll('p'); paragraph.classList.add('success');
-
Remove classes:
- removing exsisting classes from the element.
const paragraph = document.querySelectorAll('p'); paragraph.classList.remove('success');
-
Toggle classes:
- turning on & off of the classes for the element.
const paragraph = document.querySelectorAll('p'); paragraph.classList.toggle('success');
children
- returns HTMLCollection of children.parentNode
- returns the parent element.previousElementSibling
- returns the previous sibling.nextElementSibling
- returns the next sibling.const paragraph = document.querySelector('p'); console.log(paragraph.children); console.log(paragraph.parentNode); console.log(paragraph.previousElementSibling); console.log(paragraph.nextElementSibling);
click
- event occurs when a click happens on elements.mouseover
- event occurs when a mouse pointer enters elements.mousemove
- event occurs when a mouse pointer moves on elements.copy
- event occurs when copy action happens on elements.const button = document.querySelector('.btn'); button.addEventListener('click', () => { console.log('clicked'); });
keydown
- event occurs when the key is pressed.keyup
- event occurs when the key is released.const input = document.querySelector('input'); input.addEventListener('keyup', () => { console.log('keyup event'); });
event-bubbling
- event propagates from the target to way up through the document object.event-capturing
- event propagates opposite of bubbling similar to top to bottom approach.event-delegation
- can provide performance benefits by assign the event listener to the parent elements.
- can be used to add or remove elements from the DOM.
const list = document.querySelector('ul'); list.addEventListener('click', (event) => { // listener to the parent if(event.target.tagName === 'LI') { event.target.remove(); // remove item from list } });