DOM
웹 페이지가 로드되면 브라우저는 DOM(Document Object Model) 을 생성한다.
DOM이 왜 필요한가? HTML 요소를 가져오고 , 변경하고 , 추가하고 , 삭제할 방법이 필요해서 그렇다. DOM은 브라우저가 HTML과 CSS를 수정할 수 있도록 만드는 것이다.
개발자 도구에 들어가서 document를 쳐보자.
우리는 Javascript를 사용해서 document 객체를 조작할 수 있다.
다음과 같은 html이 있다고 가정하자
<!DOCTYPE html>
<html>
<head>
<title>JavaScript + DOM</title>
<link rel = "stylesheet" type = "text/css" href ="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id = "first"> Get it done today</p>
<p class = "second">No excuses</p>
<ul>
<li random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
</body>
</html>DOM Selectors
1. getElementsByTagName
해당 TagName을 갖는 요소를 반환
2. getElementsByClassName
해당 class을 갖는 요소를 반환
3. getElementsById
해당 id를 갖는 요소를 반환
4. querySelector
해당 태그를 갖는 첫 번째 요소를 반환
5. querySelectorAll
해당 태그를 갖는 요소를 전부 반환
여러개를 가져오는것도 가능하다.
6. getAttribute
해당 요소에 지정된 값을 반환 (이미지 src 등을 알아내는데 사용)
7. setAttribute
해당 요소에 지정된 값을 변경
8. style.{property}
해당 property를 변경 (추천하지 않음)
다음에 나올 방식처럼 class에 해당하는 css를 만들어두고 class를 변경하는 방식으로 사용하는 것이 범용성이 좋다.
9. classList / class
//classList에 a 클래스를 추가한다
document.querySelector("li").classList.add("a");
//classList에 a클래스를 제거한다.
document.querySelector("li").classList.remove("a");
//classList에 a클래스가 있으면 제거 , 없으면 추가한다.
document.querySelector("li").classList.toggle("a");10. innerHTML (위험)
//해당 요소를 다음과 같은 요소로 대체한다.
document.querySelector("h1").innerHTML = "<strong> !!!!! </strong>";11. parent(children)Element
//상위 요소를 반환
document.querySelectorAll("li")[1].parentElement;DOM Event
var button = document.getElementsByTagName("button")[0];
//버튼 클릭시 콘솔에 CLICK 출력
button.addEventListener("click", function(){
console.log("CLICK");
}}//ex) todo List에 추가하기
var button = document.getElementsById("enter");
var input = document.getElementsById("userinput");
var ul = document.getElementsById("ul");
button.addEventListener("click" , function(){
//새로운 li 요소 만들기
var li = document.createElement("li");
//새로운 TextNode 만들기 (DOM 트리에 있는 TEXT)
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
})
FE 개발자가 되자