HTML DOM의 id 속성은 HTML 요소의 id 값을 반환하거나 새로 설정할 수 있게 해주는 기능입니다. 이 속성을 활용하면 자바스크립트만으로 특정 요소의 식별자를 동적으로 읽어오거나 수정할 수 있습니다.
문법(Syntax)
id 속성의 사용 문법은 다음과 같습니다.
1. id 값 반환하기
object.id
2. id 값 설정하기
object.id = "value"
여기서 value는 해당 요소에 지정하고자 하는 id 값을 의미합니다.
예제(Example)
id 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 단락(p) 요소의 현재 id를 화면에 표시하거나, 새로운 id로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color:#347924;
color:#fff;
padding:8px;
}
.show{
margin:8px;
color:#347924;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>id 속성 예제</h1>
<p id="Awesome-para">이 단락에는 텍스트가 포함되어 있으며, id는 "Awesome-para"입니다.</p>
<button onclick="getId()">ID 보기</button>
<button onclick="changeId()">ID 변경</button>
<div class="show"></div>
<script>
function getId() {
var paraId = document.querySelector('p').id;
document.querySelector(".show").innerHTML = paraId;
}
function changeId() {
document.querySelector('p').id = "ID-Changed";
document.querySelector(".show").innerHTML = '새로운 id는 "ID-Changed"입니다';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
초록색 배경의 단락과 두 개의 버튼이 화면에 나타납니다.
ID 보기 버튼 클릭
ID 보기 버튼을 클릭하면 초록색 단락의 현재 id인 Awesome-para가 아래 영역에 표시됩니다.
ID 변경 버튼 클릭
이제 ID 변경 버튼을 클릭하면 단락의 id가 Awesome-para에서 ID-Changed로 변경되고, 그 결과가 화면에 출력됩니다.
개발자 도구에서 확인하기
브라우저의 요소 검사(Inspect Element) 기능을 통해서도 실제로 id 값이 변경된 것을 직접 확인할 수 있습니다.
이처럼 HTML DOM의 id 속성을 사용하면 자바스크립트 코드 한 줄로 요소의 식별자를 손쉽게 조회하고 수정할 수 있습니다. 특히 CSS 스타일 적용 대상을 바꾸거나, 특정 id를 기준으로 동작하는 스크립트 로직을 제어해야 할 때 유용하게 활용됩니다.