#TIL (April 29th, 열다섯번째 이야기)

Web development bootcamp in Udemy

DOM 재정리 하기!

DOM

1. Properties -(innerHTML,style.firstChild)

2. Methods - (click(), appendChild(),setAttribute() )

simply thinking if it's a car ...

properties : color, # of seats, # of doors
methods : break, drive

car.color; red// Get Property 
car.numberOfDoors=4; //Set Property

<li class=​"item">​…​</li>​
document.querySelectorAll("#list .item");
NodeList(3) [li.item, li.item, li.item]
 document.querySelectorAll("#list .item")[2].style.color = "white";
"white"
 document.querySelectorAll("#list .item")[2].style.color = "pink";

"pink"




document.querySelector("#list .item");




document.querySelector("h1").style.fontSize = "10rem";
value는 string으로 표현해야함, 숫자나 padding이라도 


document.querySelector("button").classList.add("invisible");


undefined
document.querySelector("button").classList.remove("invisible");


undefined
document.querySelector("button").classList.toggle("invisible");




document.getElementById("title").textContent ="DDD"
그냥 text만 바꿀수 있음 

document.getElementById("title").innerHTML = "<em>DDD</em>" 도 포함가능해서 바꿀수 있음 
ddd로 바꾼당 


attribute are orange colors in atom


document.querySelector("a").setAttribute("href", "https://www.bing.com");

document.querySelector("a");
<a href=​"https:​/​/​www.google.com">​Google​</a>​
document.querySelector("a").getAttribute("href");
"https://www.google.com"
document.querySelector("a").setAttribute("href");