[TIL] #DAY - 046 - getElementbyId (내일배움캠프AI 3기)

---

---

getElementbyId 사법을 자세히 알아보자.

 

---

---

---

 

getElementbyId 

태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수

 

사용법

document.getElementById(id);에 해당 element의 id를 넣음으로 사용합니다

반환값

주어진 id와 일치하는 dom 요소를 나타내는 Element 객체를 반환하거나 주어진 id와 일치하는 dom 요소가 없으면 null을 return 합니다

예시

버튼을 누르면 버튼 글자가 바뀌는 스크립트입니다.

HTML

<button id="jsmode">바뀌기 전 text</button>

JS

const mode = document.getElementById("jsmode");
mode.addEventListener("click", function() {
  if (mode.innerText === "바뀌기 전 text") {
    mode.innerText = "바뀐 text!";
  } else {
    mode.innerText = "바뀌기 전 text";
  }
});

위와 같이 버튼은 "jsmode"라는 Id를 찾도록 getElementById 함수를 사용합니다.

mode라는 return 값을 이용하여 이후 addEventListener 함수를 통해 클릭시 innerText가 "바뀐 text!"로 바뀌도록 합니다.