Manav Goyal

D O M - Javascript

  • Theory
    • DOM tree refers to the HTML tree where all the nodes are objects
      • Text node
        • Always leaf of the tree
      • Element node
      • Comment node
      • Sibling Node
        • Nodes that are children of same parent
    • Auto Correction
      • Browser tends to correct wrong HTML written if encountered
    • DOM Collections
      • Read-only, Live changes, Iterable using for of loop
  • Basic
    • innerHeight => Height
    • innerWidth
    • scrollX => Returns how much you scrolled in x direction
    • scrollY
    • window.location.reload => Reloads the page
    • location.href => Returns href
    • window.requestAnimationFrame(main)
    • history
    • history.length
    • history.go(-1) => Takes you 1 page before in your history
    • variable.matches(css) => Checks if element matches given css selector
    • variable.closest(css) => Looks for nearest ancestor that matches given css selector including given element
    • variable.contains(variable1) => Returns true if element contains (Descendent) other element or when both are equal
  • DOM Navigation
    • document => Object in a tree like structure
    • var = document.all => Creates HTMLCollection with all nodes
    • document.documentElement => Returns whole html document
    • document.head => Returns <head>
    • document.body => Returns <body>
      • Returns null sometimes if js is written after <body>
    • document.title => Returns string inside <title>
    • document.location
    • document.URL
    • document.scripts
    • document.images
    • document.domain
    • document.links => Returns all links in the HTML
    • document.links[0].herf => Returns herf from the first link
  • DOM Selectors
    • variable.getElementById("idName") => Access tag by its ID
    • variable.getElementsByClassName("className") => Can access different classes with var[N]
      • var[n].getElementsByClassName("className") => Can access child node class of var
    • document.getElementsByTagName("tagName")
    • document.getElementsByName("name") => Searches element by name attribute
    • variable.querySelector("selector")
      • Selector can be "#idName"/".className"/"tag", Selects the first occurrence of the element
      • Selector can be ('tag[property="value"]:checked'), If you want to select radio buttons
      • variable.querySelectorAll("selector")[0] => Gives same result but not as efficient
    • variable.querySelectorAll("selector") => Returns a NodeList of all matching elements with this selector
    • variable.className => Returns all class of the element
    • variable.firstChild => Returns 1st child of the node, Considers space as a text node
      • variable.firstChild.nodeName => Returns name of the element
      • variable.firstChild.nodeType => 1=element, 2=attribute, 3=text, 8=comment, 9=document, 10=docType
      • variable.firstChild.nodeValue => Returns content inside the tag
      • variable.firstChild.data => Returns content inside the tag
    • variable.firstElementChild => Returns first element of the children
    • variable.lastChild
    • variable.lastElementChild
    • variable.nextSibling
    • variable.nextElementSibling
    • variable.childNodes => Returns node list (Collection) of all child nodes of the element including newlines, comments, text
    • variable.children => Returns child node tags of the element
    • variable.children[n].children
    • variable.childElementCount => Returns the number of children
    • variable.parentNode => Returns parent nodes of the element
    • variable.parentElement => Returns valid parent elements of the element
    • variable.hasChildNodes() => Returns true if the element has any child nodes
  • Manipulating Classes/ID
    • variable.style.property = "value" => Add/Change CSS of the element
    • variable.id = "idName" => Add an ID
    • variable.className = "className" => Add class to the tag
    • variable.classList.add("value") => Adds value given to the class
    • variable.classList.remove("value") => Remove value given from the class
    • variable.classList.toggle("value") => Adds/Remove
    • variable.classList.contains("className") => Returns boolean value
  • Insertion
    • variable.innerText = 'value' => Change/Add inner text of the selected element
    • variable.innerHTML = "<tag>value</tag>" => Add HTML in the element, Valid only for element nodes
    • variable.outerHTML => Returns HTML including the element
    • document.createlement("tag") => Create a element in DOM
    • variable.createTextNode("value")
    • variable.createElement("variable") => Creates an element in DOM
    • variable.nodeValue ="value"
    • document.createTextNode('value') => Create a text and then append it in var as child
    • variable.append(variable1) => Appends at the end of node
    • variable.prepand(variable1) => Insert at the beginning of node
    • variable.before(variable1) => Insert before node
    • variable.after(variable1) => Insert after node
    • variable.replaceWith(variable1) => Replaces node with given node
    • variable.appendChild(variable1) => Appends variable1 as child node in variable
    • variable.insertBefore(variable1, variable2) => Insert variable1 in variable before variable2
    • document.write("value") => Adds text in DOM
    • Insert Adjacent
      • variable.insertAdjacentHTML("beforeend", "html")
      • variable.insertAdjacentHTML("beforebegin", "html")
      • variable.insertAdjacentHTML("afterbegin", "html")
      • variable.insertAdjacentHTML("afterend", "html")
  • Removal
    • variable.remove() => Removes node
    • variable.replaceChild(variable1, variable2) => Replace var2 child by var1 child of var element
    • variable.removeChild(child) => Remove child from var
  • Table Navigation
    • <table>
      • variable.rows => Returns HTML collection of table rows
      • variable.caption
      • variable.tHead
      • variable.tFoot
      • variable.tBodies
    • <tbody>
      • variable.rows
    • <tr>
      • variable.cells
      • variable.sectionRowIndex
      • variable.rowIndex
    • <td>
      • variable.cellIndex
  • Attributes
    • variable.getAttribute("property") => Returns value of the property of variable
    • variable.hasAttribute("property") => Returns boolean value true if variable has property
    • variable.removeAttribute('property') => Remove the attribute from variable
    • variable.setAttribute('property', 'value') => Add attribute
    • variable.attributes => Returns all attributes
    • variable.dataset => Returns all custom data properties if written in the format data-variable
  • Conditional Code Running
    • setTimeout(() => {statement}, N) => Function executes after N milliseconds
      • setTimeout with 0 time is executed at the end of the event
      • Returns a timer ID
      • setTimeout(functionName, N)
      • setTimeout(functionName, N, arguments)
    • clearTimeout(variable) => Used to stop setTimeout
      • variable should be id received by setTimeout when stored in a variable
    • setInterval(functionName, N) => Function keeps on running after each n milliseconds
    • clearInterval(variable) => Used to stop setInterval, variable is equal to setInterval
  • Dom Events
    • variable.eventName = () => {statement}
    • variable.addEventListener("eventName", function functionName() {statement})
    • variable.addEventListener('eventName', variable2) => Create an event listener on var with name var2
    • variable.removeEventListener("eventName", variable1) => variable1 references to the function
    • Event Object => Passed as argument to the handler
      • e.preventDefault() => To bypass any default behavior
      • e.target => Returns the target element
      • e.target.className => Returns the class of the target element
      • e.offsetX => Returns the amount of offset that was clicked on the element
      • e.clientX => Like offset but calculated based on window width
      • e.target.append() => Appends to the selected DOM
      • e.type
Share: