JavaScript로 HTML 요소에 ID 속성 추가하는 방법

아주 간단한 코드 스니펫 하나만 있으면 JavaScript를 사용해 기존 HTML 요소에 ID 속성을 손쉽게 추가할 수 있습니다.

코드

let featuredTitle = document.querySelector("h1");
featuredTitle.id = "featured-title";

위 영상에서 진행되는 과정을 단계별로 살펴보겠습니다.

• 먼저 document.querySelector("h1")을 사용해 웹 페이지에서 h1 요소를 찾아낸 뒤, 이를 featuredTitle이라는 변수에 할당합니다.
• 그다음 점 표기법(변수명.속성)을 활용해 해당 변수에 ID 속성을 부여합니다. 여기서는 featuredTitle.id 형태로 작성하고, 값으로 'featured-title'을 지정합니다.

이 방법은 DOM에 존재하는 어떤 요소에든 동일하게 적용할 수 있습니다. 참고로 setAttribute() 메서드를 사용해도 같은 결과를 얻을 수 있습니다.

featuredTitle.setAttribute("id", "featured-title");

이렇게 동적으로 생성된 ID는 두 가지 방식으로 활용할 수 있습니다. 첫째, CSS에서 해당 ID를 선택자로 사용해 요소의 스타일을 지정할 수 있습니다. 둘째, JavaScript에서 클릭 이벤트 처리와 같은 인터랙티브한 동작을 구현할 때 유용하게 쓸 수 있습니다.