[인터랙티브 자바스크립트] 03. id로 태그 선택하기

JavaScript를 배울 때 가장 많이 사용했던 console.log처럼 그냥 Javascript에서 미리 만들어져있는 document라는 객체의 getElementById라는 메소드를 사용합니다.

메소드 이름 그대로 id 속성을 통해서 어떤 요소를 가져오겠다는 의미입니다.

그래서 이 메소드의 파라미터로 접근하고자 하는 태그의 id값을 문자열로 전달해 주게 되면 해당되는 태그가 선택되는 원리입니다.

콘솔에 출력해보면 딱 그 태그만 보여주는 것이 아니라 해당 태그 내부에 있는 모든 내용들이 표시된다는 점을 확인할 수 있습니다.

document.getElementById라는 메소드를 활용해서 id 속성을 가지고 태그를 선택합니다.

HTML 태그에서 id 속성은 코드 전체에서 봤을 때 다른 태그들과 구분하기 위해 붙여주는 고유한 값입니다.

그래서 id 속성을 활용하면 필요한 태그를 명확하게 선택할 수 있다는 장점이 있습니다.

그렇기 때문에 JavaScript로 딱 하나의 요소만을 선택할 때는 HTML 태그에 id 속성을 부여하고 이번 시간에 배운 getElementById라는 메소드를 활용할 수 있습니다.

만약 이 메소드를 통해서 존재하지 않는 태그를 선택하게 되면 undefined가 아니라 null이라는 값이 리턴됩니다.