DOM | BOM

DOM represents the page content as HTML 
  
console.log(document.title);
console.log(document.body);
document.body.style.backgroundColor="green";
document.body show null if script is placed in the head tag before the DOM is loaded .
So always place the script at the end, letting the DOM load completely.
Placing in the end is similar to having the defer keyboard

BOM

Browser Object Model is the one that takes care of the objects in the browser.
For instance check window then window.document.
Therefore the page is the windows space.
and other operations like - opening a new tab href etc are BOM.
window is the global object.

Tree-like

It does follow a tree like structure
where every space inside is considered as text node
call it using body.childNode
if you only want elements to be displayed then console ElementChild camel case is what is always used
call it using body.firstElementChild

    DOM Tree

  1. body.childNodes
  2. body.childNodes[2]
  3. body.children // only elements
  4. body.firstChild
  5. body.lastChild
  6. body.firstElementChild
  7. body.parentElement
  8. body.firstElementchild.children.previousElementSibling // gives error since children is a collection and hence you cannot call `previousElementSibling` to a collection , either use `children[0].previousElementSibling`
  9. body.firstElementchild.children.nextElementSibling
  10. body.firstElementchild.children.nextSibling
  11. table.rows
  12. table.thead
  13. table.caption
  14. table.tfoot
  15. table.rows
  16. table.cells


DOM methods

  1. document.getElementById()
  2. document.getElementsByClassName()
  3. document.getElementsByTagName()
  4. document.getElementsByName() // selects the elements that are named - for example using the name property for an input form
  5. document.querySelector() // selects the first element of that query [ css selector ]
  6. document.querySelectorAll() // selects all elements of that query
  7. element.matches() // used to return boolean for matching the element with the specified CSS selector , for ex: element.matches(".box1") or element.matches("#redbox") // note that element needs to be defined
  8. element.closest() // looks for the closest parent that has the specified CSS selector [ including the element itself -
    if the element itself has that selector ,
    else looks for the parent
    else looks for the grandparent]
  9. element.contains() // return boolean on searching the descedants on the specified element. For ex: boxes.contains(div)
    ifThe boxes element contains an element div
  10. element.innerHTMl
  11. element.outerHTML
  12. element.innerText
  13. element.outerText
  14. element.tagName // for all HTML tags
  15. element.nodeName // for all nodes - i.e including comments text etc
  16. element.textContent
    textContent innerText
  17. element.hidden // returns a boolean value on checking if the div is given hidden property
  18. element.hasAttribute() // returns a boolean value on checking if the specified attribute is present
  19. element.getAttribute() // returns the specified attribute for that element
  20. element.setAttribute() // sets a particular attribute to the specified value
  21. element.removeAttribute() // removes that attribute for that element
  22. element.attributes // shows all the attributes that are used for that element
  23. node.append() // append to the ending of the node - a speicifed HTML element like DIV
  24. node.prepend() // at the begining of the node
  25. node.before() // BEFORE the node
  26. node.after() // AFTER the node
  27. node.replaceWith(e) // replace the node with the element specified
  28. element.insertAdjacentHTML() // "beforebegin" "afterend" "afterbegin" "beforeend"
  29. element.insertAdjacentText()
  30. element.insertAdjacentElement()
  31. element.remove()
  32. element.classList // provides the name and the length separately as a DOMTokenList
  33. element.className // only provides the name
  34. element.classList().add() // adds the specified class in the class list
  35. element.classList().remove() // removes the specified class from the class list
  36. element.classList().toggle() // removes if existing , adds if not existing
  37. document.createElement("div") // creates an element
Events