# Javascript DOM ### Video - [JS DOM](https://youtu.be/t5HqIaobRT0) ### Warm up a little bit ```javascript document.getElementById(“id”); ``` ```javascript document.getElementsByClassName(“class”); ``` ```javascript document.getElementsByTagName(“tag”); ``` ```javascript document.querySelectorAll(“”); ``` - `tag` `p > child` `p.class` `p#id` <hr/> ### Some useful object Collection ```javascript document.forms[index] ``` ```javascript document.forms[“id”] ``` ```javascript document.forms[“id”].elements.id.value ``` <hr/> ### Changing the content of HTML ```javascript document.getElementById(“id”).innerHTML = “NEW STUFF”; ``` ```javascript document.getElementsByTagName(“img”)[index].src = “./123.jpg”; ``` <hr/> ### Changing the style of HTML ```javascript document.getElementById(“id”).style.property = NewStyle; ``` ```javascript document.getElementsByTagName(“p”).style.color = red; ``` ```javascript document.getElementById(“id”).style.visibility = “hidden” / “visible” ``` <hr/> ### Cooperate with Event - `onclick=”function()”` - `onchange` - `onmouseover` - `onmouseout` - Quick Review about CSS <hr/> ### Review: The use of this in function <hr/> ### Small Exercise <hr/> ### Event Listener ```javascript element.addEventListener(“click”, function(){}, useCapture) ``` - The difference between Capture and bubble - Capture: parent -> child - Bubble: child -> parent ### What is Node ![](https://i.imgur.com/SmFILig.png) ### Creating new node ```javascript= const para = document.createElement(“p”); const txt = document.createTextNode(“this is new node”); para.appendChild(txt); ```