DOM - Snippets

============================================
# TYPE OF NODES
----------------
1. Element Node
2. Attribure Node
3. Text Node

++++++++++++++++++++++++++++++++++++++++
## Target on Elements
++++++++++++++++++++++++++++++++++++++++

GET
* document.getElementsByTagName("tag");
* var myElement = document.getElementById("someId");
--------------------
CREATE / SET
* var paragraph = document.createElement("P");

++++++++++++++++++++++++++++++++++++++++
## Target on Elements - > Attribute Node
++++++++++++++++++++++++++++++++++++++++

GET
* myElement.getAttribute("align");
--------------------
SET
* myElement.setAttribute("align", "left");

++++++++++++++++++++++++++++++++++++++++
## Target on Elements - > Text Node
++++++++++++++++++++++++++++++++++++++++

GET
* var textVal = myElement.innerHTML;
--------------------
SET
* myElement.innerHTML("Some Text String");

============================================

ALTERNATIVE TO APPEND CHILD
 var newLi = document.createElement("li");
 var secondLi = document.getElementsByTagName("li")[1];
 document.insertBefore(newLi, secondLi); / creates newLi @ 2nd Position while innerHTML add @ last

===CREATE ELEMENT AND APPEND TO BODY EXAMPLE===

var paragraph = document.createElement("P");
paragraph.textContent = "Some Demo content"; <<OR OR>> paragraph.createTextNode("Some Demo Content"); BUT DONT USE innerHTML for this
document.body.appendChild(paragraph);

OR

document.myElement.appendChild(paragraph);

===============================================
Get the first element in the document with class="example":
document.querySelector(".example");

Get all elements in the document with class="example":
var x = document.querySelectorAll(".example");
===========================================
var div = document.createElement("DIV");
div.style.height("100vh");
document.body.appendChild(div);
 -- Add Event listener --
div.addEventListener('mousemove', function(event){
  console.log(event);
  var x = event.clientX;
  var y = event.clientY;
  
  div.textContent = x+" , "+y;
});
============================================