javascript - DOM API -2

요소노드생성

class이름이 clock인 div의 아래쪽에 새로운 요소를 추가해보겠습니다.

 

 

createElement

createElement 메서드를 통해 새로운 요소노드를 생성할 수 있습니다. class이름이 season이고, div로 이루어진 요소를 추가 해보겠습니다.

const seasnsonElement = document.createElement("div");

이 createElement의 매개변수로는, 생성할 요소의 태그 이름을 넣어줍니다.

 

그 다음 classList를 사용해 season이라는 class이름을 생성해주겠습니다.

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

div태그에 class이름이 season인 원하는 요소를 생성했습니다.

이제 요소의 안에 텍스트를 넣어보겠습니다. textContent를 사용하면 됩니다.

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

seasonElement.textContent = "spring";

 

createTextNode라는 메서드를 사용해도 위에 처럼 텍스트 노드를 생성할 수 있습니다. 

createTextNode메서드도 매개변수로 원하는 텍스트를 전달받습니다.

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

//seasonElement.textContent = "spring";
const seasonText = document.createTextNode("spring");

모든 div요소들을 출력해보겠습니다. 

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

코드를 실행해보면 우리가 생성한 요소가 출력되지 않았습니다.

이유는 이렇게 생성한 요소와 텍스트 노드들은 생성만 되었을 뿐, 아직 DOM Tree에 추가되지 않았기 때문입니다.

 

 

appendChild

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

today-info의 요소의 자식요소로 추가해보겠습니다.

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

//seasonElement.textContent = "spring";
const seasonText = document.createTextNode("spring");
const todayInfoElement = document.querySelector("div.today-info");
todayInfoElement.appendChild(seasonElement);
seasonElement.appendChild(seasonText);

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

이렇게 자바스크립트에서는 직접 DOM Tree에 요소 노드와 텍스트 노드를 추가할 수 있습니다.

 

 

이번에는 class이름이 clock인 요소의 아래에 class이름이 button이고, "버튼"이라는 텍스트가 적혀있는 div를 추가해보겠습니다.

const buttonElement = document.createElement("div");  //div 요소추가
buttonElement.classList.add("button"); //div 이름 button
buttonElement.textContent="버튼"; 

const todayInfoElement=document.querySelector("div.today-info"); //부모요소찾기
todayInfoElement.appendChild(buttonElement);

 

 

addEventListener

이번에는 이 버튼이 정말 동작하게, 즉 버튼을 클릭하면 어떠한 작업이 실행되게 만들겠습니다.

DOM은 특정 요소들에 이벤트를 추가할 수 있는 addEventListener라는 DOM API를 제공합니다.

 

매개변수로 click이라는 이벤트를 사용하고, 또 다른 매개변수에는 앞에서 작성한 이벤트가 발생했을 때, 실행될 함수를 전달받습니다.

const buttonElement = document.createElement("div");
buttonElement.classList.add("button");
buttonElement.textContent = "버튼";
const todayInfoElement = document.querySelector("div.today-info");
todayInfoElement.appendChild(buttonElement);
buttonElement.addEventListener("click", () => {
  window.alert("클릭");
});

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

 

addEventListener에는 click과 같이 스크롤을 하면 이벤트를 발생시키는 scroll, mouseover 등 정말 많은 이벤트 종류들이 있습니다.

 

 

이제는 실제 버튼 모양처럼 만들어주겠습니다.

 

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

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