getElementById
Coddy의 JavaScript DOM 메서드 코스 레슨 — 13개 중 3번째.
getElementById() 함수는 일치하는 id 속성을 가진 첫 번째 요소를 가져옵니다. 예를 들면 다음과 같습니다:
const element = document.getElementById("elementId"); 위 코드는 elementId라는 id를 가진 요소를 가져와서 element라는 변수에 저장합니다.
document접두사에 유의하세요. 이것은 HTML 파일 DOM입니다.
요소를 가져온 후에는 JavaScript를 사용하여 조작할 수 있습니다!
우리가 배울 첫 번째 속성은 요소의 텍스트 내용을 담고 있는 textContent입니다. 다음과 같이 텍스트를 수정할 수 있습니다:
const element = document.getElementById("elementId");
element.textContent = "some text";이 코드 실행 후, #elementId의 텍스트는 some text가 됩니다.
챌린지
쉬움ID가 포함된 제목(heading)이 있는 HTML 코드가 주어집니다.
JavaScript만 사용하여, 이 요소의 텍스트를 “Hello!”로 변경하세요:
getElementById함수를 사용하여 요소를 가져옵니다.textContent속성을 사용하여 요소의 텍스트를 수정합니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Welcome!</h1>
<script src="script.js"></script>
</body>
</html>