DOM Manipulations

1. Selecting Using get Element

   a. getElementbyId()

   b. getElementsbyName()

   c. getElementsbyTagName()

   d. getElementsbyClassName()

2. Selecting Using query Selectors

   a. querySelector()

   b. querySelectorAll()

3. Traversing

   a. parentNode: get the parent node of a specified node in DOM tree

   b. childNodes: get child element

   c. previousElementSibling : get the previous sibling

   d. nextElementSibling: get the next sibling

4. Manipulating Elements

   a. createElement() : create a new html element

   b. appendChild(): append an element as a child. gets added as last child

   c. textContent: add/get text to elements

   d. innerHTML: add/get the inner text including html tag and style

5. Manipulations Part 2

   a. after(): add a node after the selected element. Can accept multiple nodes

   b. append(): similar to appendChild(). but here we can add multiple nodes

   c. prepend(): appends to first position. first child

   d. insertAdjascentHTML(position, text)

   e. replaceChild(newchild, oldchild)

   f. cloneNode()

   g. removeChild()

   h. insertBefore()

6. Attributes Methods

   a. getAttribute()

   b. setAttribute()

   c. hasAttribute()

   d. removeAttribute()

7. Manipulating Styles

   a. style

   b. cssText

   c. getComputedStyle()

   d. className

   e. classList

8. JS Events

   a. onClick ==> event, event.type, event.target, this keyword.

   b. binding and event handling

   c. addEventListener()

   d. removeEventListener()

   e. mousemove

   f. mousedown

   g. mouseup

   h. mouseover

   i. mouseout

   j. keydown

   k. keyup

   l. keypress

   m. scroll