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 as NodeList.
  • 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 as HTMLCollection.
  • HTMLCollection is a array but we cannot loop it through for-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 as HTMLCollection.
  • HTMLCollection is a array but we cannot loop it through for-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.

1. style property

   const paragraph = document.querySelector('.para');
   para.style.border = '2px solid pink';

2. setAttribute property

   const 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 
      }
  });