DOM - NeverGiveUp143/JS GitHub Wiki

DOM (Document Object Model)

DOM Methods

getElementById

 Returns a reference to the element with the specified id.

image

getElementsByTagName

 Returns a collection of elements with the specified tag name.

image

getElementsByClassName

Returns a collection of elements with the given class name.

image

querySelector and querySelectorAll

The 'querySelector' method is used to select the first element that matches a specified CSS selector within the document. It returns the first matching element or null if no matches are found.

The 'querySelectorAll' method is used to select all elements that match a specified CSS selector within the document. It returns a NodeList containing all matching elements or an empty NodeList if no matches are found.

image

createElement and appendChild

The 'createElement' Creates a new HTML element with the specified tag name. 

The 'appendChild' Appends a node as the last child of a parent node.

image

removeChild

Removes a child node from its parent.

<!DOCTYPE html>
<html>
 <head>
   <title>Hello, World!</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
     <div id = 'parentElement'>
       <ul>
         <li>Item 1</li>
         <li>Item 2</li>
       </ul>
     </div>
 </body>
 <script>
 
 const parentElement = document.getElementsByTagName('div')
 
 const childElementToRemove  = document.getElementsByTagName('ul')
 
 console.log(parentElement)
 
 console.log(childElementToRemove)
 
 parentElement[0].removeChild(childElementToRemove[0])
 
 console.log(parentElement)
 
 </script>
</html>

image

insertBefore

The insertBefore method is used to insert a node (an existing node) before a reference node as a child of a specified parent node. It is a method of the parent node in the Document Object Model (DOM). The syntax is as follows:

 parentNode.insertBefore(newNode, referenceNode);
  • 'parentNode': The node to which you want to append the new node.
  • 'newNode': The node to be inserted.
  • 'referenceNode': The node before which the new node will be inserted.

image

DOM Properties

innerText :

image

innerHTML :

image

Key Differences:

  1. HTML Tags: * innerText treats content as plain text and does not parse or render HTML tags. * innerHTML parses and renders HTML tags, allowing for the inclusion of HTML elements.

  2. Performance: * In general, innerText is faster than innerHTML because it doesn't involve parsing and rendering HTML.

DOM Nodes

  • The entire document is a document node
  • Every HTML element is an element node
  • The text inside HTML elements are text nodes
  • Every HTML attribute is an attribute node (deprecated)
  • All comments are comment nodes

image

With the HTML DOM, all nodes in the node tree can be accessed by JavaScript.

New nodes can be created, and all nodes can be modified or deleted.

Node Relationships

The nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships.

  • In a node tree, the top node is called the root (or root node)
  • Every node has exactly one parent, except the root (which has no parent)
  • A node can have a number of children
  • Siblings (brothers or sisters) are nodes with the same parent

image

Navigating Between Nodes

we can use the following node properties to navigate between nodes with JavaScript:

parentNode childNodes[nodenumber] firstChild lastChild nextSibling previousSibling

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div id = 'parentElement'>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
  </body>
  <script>
  
  const parentElement = document.getElementsByTagName('div')
  
  const childToAppend = document.createElement('P')
  
  childToAppend.innerText = 'One Piece'
  
  parentElement[0].insertBefore(childToAppend,parentElement[0].firstChild)
  
  const listElement = document.getElementsByTagName('ul')
  
  console.log(listElement[0])
  console.log('parentNode',listElement[0].parentNode)
  console.log('childNodes',listElement[0].childNodes)
  console.log('children',listElement[0].children)
  console.log('firstChild',listElement[0].firstChild)
  console.log('lastChild',listElement[0].lastChild)
  console.log('nextSibling',listElement[0].nextSibling)
  console.log('previousSibling',listElement[0].previousSibling)
  
  let nodeIndex = 0
  
  const redButton = document.createElement('Button')
  
  redButton.innerText = 'Red'
  
  redButton.id = 'redBtn'
  
  parentElement[0].insertBefore(redButton, parentElement[0].lastChild)
  
  const greenButton = document.createElement('Button')
  
  greenButton.innerText = 'Green'
  
  greenButton.id = 'greenBtn'
  
  parentElement[0].insertBefore(greenButton, parentElement[0].lastChild)
  
  const nextButton = document.createElement('Button')
  
  nextButton.innerText = 'Next'
  
  nextButton.id = 'nextBtn'
  
  parentElement[0].insertBefore(nextButton, parentElement[0].lastChild)
  
  document.getElementById('redBtn').addEventListener('click', function (){
    const currentNode = listElement[0].children[nodeIndex];
    
    currentNode.style.color = 'red'
  })
  
  document.getElementById('greenBtn').addEventListener('click', function (){
    const currentNode = listElement[0].children[nodeIndex];
    
    currentNode.style.color = 'green'
  })
  
    document.getElementById('nextBtn').addEventListener('click', function (){
    if(nodeIndex >= listElement[0].children.length-1)
    {
      nodeIndex = 0
      return
    }
    
    nodeIndex++
  })
  
  </script>
</html>

image

image

⚠️ **GitHub.com Fallback** ⚠️