DOM API-2

4) 요소 노드 생성

 

<!-- index.html -->
<div class="today-info">
  <div class="date" id="date">
    02.10.금요일
  </div>
  <div class="clock" id="clock">
    15:03
  </div>
</div>

 

- createElement
createElement 메서드를 통해 새로운 요소 노드를 생성할 수 있다. createElement의 매개변수로는, 생성할 요소의 태그 이름을 넣어준다. createElement로 요소 노드를 생성한 다음 classList를 사용해 season 이라는 class 이름을 설정해준다.

 

// createElement
const seasonElement = document.createElement("div");
seasonElement.classList.add("season");

새로 생성한 요소에 안에 텍스트를 넣는 방법은 두 가지가 있다. textContent를 사용하는 것과 텍스트 노드를 생성하는 createTextNode라는 메서드를 사용하는 것이다. createTextNdoe 메서드도 매개변수로 원하는 텍스트를 전달받는다.

 

// 텍스트 넣기
// seasonElement.textContent = "spring";
const seasonText = document.createTextNode("spring");
console.log(document.getElementsByTagName("div")); // 출력 안됨

 

코드를 실행해보면, 생성한 요소가 출력되지 않는데, 그 이유는 이렇게 생성한 요소와 텍스트 노드들은 생성만 되었을 뿐, 아직 DOM Tree에 추가 된 것이 아니기 때문이다.

- appendChild
appendChild 메서드는 매개변수로 전달받은 노드를 특정 요소의 마지막 자식으로 추가하는 메서드이다. DOM Tree는 상하 관계를 한 눈에 볼 수 있는 트리 구조인데, 이 상하 관계는 보통 서로 부모와 자식 관계라고 부른다.
DOM Tree에서 class 이름이 date인 요소와 clock인 요소의 위쪽에 위치하고있는 요소노드, 즉 이들의 부모 요소인 today-info 라는 이름의 class를 가진 요소에 appendChild를 사용해 이 today-info 요소의 자식 요소로 seasonElement를 추가해본다.
그 다음, seasonText 라는 텍스트 노드는, seasonElement 요소의 내부에 들어가야 하는 텍스트이기 때문에 seasonElement의 자식 노드로 들어가야하므로, 동일하게 seasonElement에 appendChild를 사용해 seasonElement의 자식 노드로 넣어주도록 한다.

 

// appendChild
const todayInfoElement = document.querySelector("div.today-info");
todayInfoElement.appendChild(seasonElement);
seasonElement.appendChild(seasonText);
console.log(document.getElementsByTagName("div")); // <div class="season">spring</div>

가장 아래쪽에 추가한 <div class="season">spring</div> 이라는 값이 출력되는 것을 볼 수 있다.

동일하게 class 이름이 clock인 요소의 아래에 class이름이 button이고, "버튼" 이라는 텍스트가 적혀있는 div를 추가해본다.

 

// 응용
const buttonElement = document.createElement("div");
buttonElement.classList.add("button");
buttonElement.textContent = "버튼";
const todayInfoElement = document.querySelector("div.today-info");
todayInfoElement.appendChild(buttonElement);
console.log(document.getElementsByTagName("div")); // <div class="button">버튼</div>

5) 이벤트 추가
- addEventListener
DOM은 특정 요소들에 이벤트를 추가할 수 있는 addEventListener 라는 DOM API를 제공한다.
buttonElement에 addEventListener를 작성하며, "click" 이라는 이벤트를 사용한다. addEventListener는 이벤트의 종류 말고도 또 다른 매개변수를 받는데, listener 라는 매개변수로, 앞에 작성한 이벤트가 행해졌을 때, 실행될 함수를 전달받는다.

 

// addEventListener
buttonElement.addEventListener("click", () => {
  window.alert("클릭");
});
console.log(document.getElementsByTagName("div"));

window 객체는 현재 사용하고 있는 웹 브라우저의 창을 나타내는 객체로, 경고창을 띄우는 alert, 확인과 취소의 버튼이 있는 confirm과 같은 다양한 메서드들을 포함하고 있다.
작성한 코드를 실행한 다음, 브라우저를 통해 확인하면, 버튼 이라는 글자를 눌러보면, "클릭" 이라는 단어가 적혀있는 경고창이 실행되는 것을 볼 수 있다.

특정 요소에 이벤트를 추가 하고, 수행할 함수를 지정할 수 있는 addEventListener 에는 click 과 같이, 스크롤을 하면 이벤트를 발생시키는 scroll, 마우스를 특정 요소의 위에 올리면 이벤트가 발생하는 mouseover 등 정말 많은 이벤트 종류들이 있다. 이 이벤트들을 전부 다 알고있어야 한다기 보다는, 자주 사용되는 이벤트들을 위주로, 이벤트 리스너를 사용 할 때마다 검색해보면서 사용하는 것을 추천한다.

6) 스타일 추가
DOM API에는 특정 요소의 스타일을 추가하고 수정하는 API도 있다. style이라는 프로퍼티를 사용해 buttonElement에 스타일을 추가한다.

 

// style
const buttonElement = document.createElement("div");
buttonElement.classList.add("button");
buttonElement.textContent = "버튼";
buttonElement.style.color = "white";
buttonElement.style.backgroundColor = "gray";
buttonElement.style.width = "50px";
buttonElement.style.textAlign = "center";
buttonElement.style.cursor = "pointer";

const todayInfoElement = document.querySelector("div.today-info");
todayInfoElement.appendChild(buttonElement);
buttonElement.addEventListener("click", () => {
  window.alert("클릭");
});

console.log(document.getElementsByTagName("div"));

style 프로퍼티를 사용하면, 특정 요소에 이렇게 다양한 스타일을 적용할 수 있다.


참고강의 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의