DOM

챌린지 일지. Day3. 2021 03 10
vsc에서 실습

---

DOM = document Object Model

• 자바스크립트에서 html을 객체로 바꾸어서 저장하여 객체로 활용할 수 있게 해줌.

---

HTML과 자바스크립트를 함께 쓰려고 하면 어떻게 해야할까?

우선 html과 css를 먼저 떠올려보자.
우리는 html에서 태그를 입력한다.

<div id="text"> Hi </div>

그리고 div에 해당되는 컬러를 모두 변경하고 싶다.
그러려먼 css에서 html 태그를 불러와야한다.
css로 들어가 div에 할당된 id를 불러오고 컬러를 수정한다.

#text: {
	color: white;
    	background-color: black;
    }

그러면 html에 있는 "Hi"는 컬러가 변경되게 된다.
이와 같이 자바스크립트에서도 html의 div 태그를 선택할 수 있고 컨트롤할 수 있다.

const text = document.getElementById("text");
console.log(text); // Hi

document.queryselector()

• 정의 : queryselector는 특정 name이나 id를 제한하지 않고 css선택자를 사용하여 요소를 찾을 수 있다. css선택자와 동일.
  id로 찾고싶다면 "#title" / class로 찾고 싶다면 ".title"

---