Skip to content

DOM Concepts

DOM

Features:

  1. html > taken by browser > create DOM > used for rendering.
  2. If DOM element is manipulated > look will get changes.
  3. google chrome > developer tools > element > is DOM > can manipulate it as run time and see the changes.

pictorial desc - basic:

WINDOW object.

  1. console.log(window) --> it very complex object. Goal is not to cover all, but to learn how to use it. Few properties of it:

    innerheigth, outerHeigth, innerWidth, outerWidth

localStorage, SessionStorage - getItem(K), setItem(K,V)

location

document

  1. window method - eg
  2. window.open("url")
  3. window.navigate()
  4. window.alert("msg"), prompt("enter") and, window.confirm("sure ?") --> T/F

note: use JS modal for creating popup windows.

  1. its global object. we dont need to window.open(), and can use open() directly.

WINDOW object > Location Object

  1. navigate()
  2. replace()
  3. url, host,etc. check on chrome.

WINDOW object > Document Object

A. Traverse document object:

  1. document.url - can also be access from here instead of location.url.
  2. document.body
  3. document.body.children
  4. document.body.children[0].textContent
  5. document.body.children[0].style.backgrounColor.

change document object and see the changes in browser without refresh page. eg"

document object itself very complex for large html page. eg html having long list. There is another way to better traverse on DOM, will see later.

  1. Traverse more 
    <body>
    <ul>
        <li> link1 </li>
        <li> link2 </li>
        <li class="c1"> link3 </li>
    </ul>
</body>
  2. document.body.firstChild --> <body>
  3. document.body.firstElementChild --> <ul>
  4. document.body.firstElementChild.firstElementChild --> <li> link1
  5. document.body.firstElementChild.firstElementChild.nextElementSibling --> <li> link2
  6. document.body.firstElementChild.firstElementChild.parentElement --> <li> link1

B. Traverse document object effectively.

These are more perfect sddelector to get right elemet. 1. document.getElementByTagName('li') --> array of all li 2. document.getElementByClassName('c1') --> li link3
3. document.getElementByName('') 4. document.getElementById('')

C. Traverse document using QuerySelector.

  • uses CSS selector format

  • document.querySelector('h1') --> first h1

  • document.querySelectorAll('h1') --> list of all h1
  • .class1 --> element with class class1, etc. 4 check ! CSS selector

D. Insert element in DOM

  1. addChild
  2. insertBefore

E. Removing element in DOM

- a.remove() --> will not work in older bowser. _ a.parentElemet.remove(a); - a.parentNode.remove(a);

more

E. modify element attribute in DOM

  • modify/add/remove attributes
  • modify/add/remove inline style
  • modify classes more

Links: introduction-to-the-dom