JavaScript getElementById 메서드는 HTML DOM(문서 개체 모델)에서 요소를 선택합니다. 이 방법의 철자를 틀리면 document.getElementByID is not a function가 표시됩니다. 프로그램에 오류가 있습니다.
이 튜토리얼에서는 이 오류의 의미와 발생 이유에 대해 설명합니다. 이 오류를 해결하기 위해 알아야 할 사항을 알아볼 수 있도록 이 오류의 예를 살펴보겠습니다.
document.getElementByID는 함수가 아닙니다.
document.getElementById() 메소드는 JavaScript 선택기 메소드 중 하나입니다. 이 메서드는 HTML DOM에서 해당 ID를 기반으로 개체를 검색합니다.
이 메서드는 요소의 내용을 조작하거나 내용이나 속성과 같은 특정 요소에 대한 정보를 검색하는 데 사용됩니다.
ID는 HTML로 정의됩니다. ID는 특정 요소에 대해 고유해야 합니다.
<header id=“top_header”></header>
<header> 태그의 ID는 top_header입니다. . 이 ID는 <header>에 고유합니다. 꼬리표. ID는 종종 CSS를 사용하여 특정 요소에 스타일을 적용하는 데 사용됩니다.
document.getElementById() 대소문자를 구분합니다. 이 방법은 다음이 아닙니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
- 문서.getelementbyid()
- 문서.getElementByID()
- 문서.GetElementById()
메소드 이름의 다른 변형은 JavaScript에서 허용되지 않습니다.
ID는 다른 단어의 약칭이기 때문에 대문자로 작성하고 싶지만 대문자 I를 사용해야 합니다. 및 소문자 d .
getElementById 메서드에 대해 자세히 알아보려면 JavaScript getElementById에 대한 가이드를 읽어보세요.
예시 시나리오
우리는 사용자를 우리 애플리케이션으로 환영하는 코드 조각을 만들 것입니다. 환영 메시지는 페이지 상단에 표시되는 제목에 있습니다.
이 예에서는 데모 이름을 사용합니다.
시작하려면 웹 페이지의 시작 섹션에 대한 본문 HTML 코드를 정의하십시오.
<html> <body> <header> <h1 id="welcome_title">Welcome</h1> </header> </body> </html>
기본적으로 <h1> 태그에는 Welcome 내용이 포함됩니다. . <header> tag는 제목이 있는 부모 태그입니다. 다음으로 <script>를 추가하겠습니다.
… </header> <script> </script> </body> ...
스크립트 내에서 제목을 선택하고 내용을 변경합니다.
var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";
getElementById() 메소드는 우리의 제목을 선택합니다. 이 HTML 요소를 title이라는 JavaScript 변수에 할당합니다. . 제목의 내용이 "Welcome, Luke!"로 변경됩니다. textContent를 사용합니다. 제목을 변경하는 방법입니다.
코드를 실행하고 무슨 일이 일어나는지 봅시다. JavaScript 콘솔을 열면 오류가 표시됩니다.
코드가 제대로 작동하지 않습니다. 우리의 제목은 변경되지 않았습니다:
해결책
document.getElementByID에 잘못된 대소문자를 사용했습니다. 선택자. 대문자 I를 사용하는 대신 및 소문자 d , 대문자 I를 사용했습니다. 및 D .
JavaScript는 getElementById 호출로 프로그램을 등록하지 않습니다. 함수 이름은 대소문자를 구분하기 때문입니다.
우리는 우리의 함수에 올바른 대소문자를 사용하도록 코드를 변경해야 합니다.
var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";
지금 Id를 사용하고 있습니다. ID 대신 우리의 함수 호출에서. 새 코드를 실행해 보겠습니다.
우리 프로그램은 사용자의 이름을 포함하도록 제목의 내용을 성공적으로 변경합니다.
결론
document.getElementById() 메소드는 웹 페이지에서 요소를 선택합니다. 이 방법을 사용하면 요소의 내용을 보고 변경할 수 있습니다.
이 방법을 사용할 때는 올바른 대소문자를 사용해야 합니다. 아이디가 모두 대문자가 아닙니다. 대문자 I를 사용해야 합니다. 및 소문자 d 방법이 작동하도록 합니다.