[12/12] DAY8 자바스크립트 공부

8일 차 진도

 

 

 

 

 

DOM

 

 

웹

인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간

 

 

웹사이트란? 

주소 URL에 접속해서 볼 수 있는 웹페이지들을 통틀어 말하는 말로, 흔히 말하는 ‘홈페이지’라고 할 수 있다.

 

 

HTML(Hyper Text Markup Language)

브라우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할

 

 

CSS(Cascading Style Sheets)

웹 사이트 요소들을 꾸며주는 역할

 

 

DOM(Document Object Model)

HTML을 자바스크립트가 이해할 수 있게 브라우저가 객체로 변환한 것

 

 

웹 브라우저는 HTML 문서를 불러온 뒤, 상하관계를 한눈에 볼 수 있는 DOM Tree 구조로 나타낸다. DOM Tree에서는 아이템 하나하나를 노드라고 부르며, 노드들은 전부 하나의 객체로 이루어져 있고, 웹 브라우저는 DOM트리를 통해 웹요소를 웹 페이지에 나타낼 수 있다.

 

 

DOM API

DOM이 제공하는 DOM을 조작하고 수정할 수 있는 방법

 

 

 

 

DOM API를 이용해 요소에 접근하기 위해, 해당 요소를 찾을 때,  [문서 -> 요소 -> 속성 -> 텍스트] 순서로 각각의 노드에 접근해야 한다. 또한 어떤 요소에 접근하든지 항상 문서 노드를 거쳐서 다른 요소에 접근해야 한다.

 

 

 

 

요소 노드에 접근

 

getElementByID

특정요소를 아이디 값으로 가져온다는 의미이고, 실제로 그 특정 요소 객체를 반환하는 API이다. 동일한 id를 갖고 있는 요소가 여러 개 있을 경우 첫 번째 요소만 반환한다.

 

 

querySelector

CSS 선택자로 요소노드를 반환하는 API

 

 

querySelectorAll 

CSS 선택자로 여러 요소들을 반환하는 API

 

 

getElementsByClassName

동일한 클래스 이름을 갖고 있는 모든 요소를 반환하는 API

 

 

getElementsByTagName

특정 태그의 이름을 갖는 모든 요소들을 가져올 수 있음

 

 

 

 

속성에 접근

<div class =“date” id=“date”>

</div>

const dateElement = document.getElementById(“date”)

dateElement.className = “change”;

console.log(dateElement); // <div class =“change” id=“date”> </div>

class명이 바뀐 것을 확인할 수 있다.

 

 

 

<div class =“date” id=“date”>

</div>

const dateElement = document.querySelector(“div.date”);
dateElement.id = “change”

console.log(dateElement); //  <div class =“date” id=“change”> </div>

 

id값이 바뀐 것을 확인할 수 있다.

 

class name과 비슷하게 요소의 class값에 접근 가능한 classList. classList는 add, remove, item, toggle, contains, replace 메서드를 제공한다.

 

 

 

 <div class =“date” id=“date”>

</div>

const dateElement = document.getElementById(“date”);
dateElement.classList.add(“change”);

console.log(dateElement); //   <div class =“date change” id=“change”> </div>

 

className은 요소에 무언가를 대입하면 클래스 이름 전체가 변경되지만, classList는 기존의 값에 특정 값을 추가하거나 제거하고 변경가능한 속성

 

 

 

 <div class =“date” id=“date”>

</div>

const dateElement = document.getElementById(“date”);
dateElement.classList.add(“change”);
dateElement.classList.remove(“date”);

console.log(dateElement); //   <div class =“change” id=“change”> </div>

 

change값 추가 이후 remove를 통해 date를 지워주니 class명으로 change만 남게 되었다.

 

 

 

 

text 변경

<div class=“clock” id=“clock”>
	15:03
</div>

const clockElement = document.getElementById(“clock”);
clockElement.textContent = “12:00”;

 

15:03이 12:00으로 바뀌는 것을 확인할 수 있다.

 

 

 

 

새로운 요소노드 생성

 

CreateElement

const seasonElement = document.createElement(“div”);

seasonElement.classList.add(“season”);

seasonElement.textContent = “spring”;

div 요소를 새로 생성하고, class 명으로 "season"을, 텍스트로 "spring"를 넣어줬다.

 

 

 

 

텍스트 노드 생성

CreateTextNode

const seasonText = document.createTextNode(“spring”)

텍스트 노드를 생성하는 방법이다.

 

 

 

 

DOM Tree에 추가

 

이렇게 생성한 노드들은 생성만 되었을 뿐 아직 DOM Tree에 추가된 것은 아니다. appendChild를 사용해 DOM Tree에 추가할 수 있다.

const 부모요소 = document.quertSelector(“div”)

부모요소.appendChild(자식요소);

 

appendChild 메서드는 매개변수로 전달받은 노드를 특정 요소의 마지막 자식으로 추가하는 메서드

 

 

 

 

이름이 버튼이고 한글로 버튼이라는 텍스트가 적혀있는 div 생성

const buttonElement = document.createElement(“div);
buttonElement.classList.add(“button”);
buttonElement.textContent = “버튼”

// 이후 부모 요소를 querySelector로 가져오고 appendChild로 추가하면된다.

 

 

 

 

특정 요소들에 이벤트를 추가할 수 있는 addEventListener

buttomElement.addEventListener(“clock”, ()=>{
	window.alert(“클릭”);
})

매개변수로 이벤트와, 이벤트가 작동했을 때 실행할 함수를 받는다.

 

 

 

 

특정 요소에 스타일을 추가하고 수정하는 Style

buttonElement.style.backgroundColor = “gray”;

buttonElement.style.color = “white”;

buttonElement.style.width = “50px”;

buttonElement.style.textAlign = “center”;

buttonElement.style.cursor = “pointer”;

 

 

 

 

 

[8일 차 QUIZ]

8일 차 문제

 

 

8일 차 정답