자바스크립트 문서 Getelementbyid

| | | | | | | | | | | | | | | | | |

getElementById JavaScript 메소드는 문서 개체 모델(DOM) HTML에서 요소를 선택합니다. 이 방법의 철자를 틀리면 프로그램에서 document.getElementById is not a function 오류가 발생합니다.

이 튜토리얼에서는 이 오류가 무엇을 의미하고 해결되었는지 설명합니다. 오류를 수정하기 위해 알아야 할 사항을 배울 수 있도록 이 오류의 예를 살펴보겠습니다.

document.getElementById는 함수

문서가 아닙니다. getElementById() 메서드 는 JavaScript 선택 메서드 중 하나입니다. 이 메서드는 HTML DOM에서 해당 ID를 기반으로 개체를 검색합니다.

이 메서드는 요소의 콘텐츠를 조작하거나 콘텐츠 또는 속성과 같은 특정 요소에 대한 정보를 검색하는 데 사용됩니다.

ID는 HTML로 정의됩니다. ID는 특정 요소에 대해 고유해야 합니다.


< header> 의 ID는 top_header입니다. 이 ID는

에 고유합니다. ID는 CSS를 사용하여 특정 요소의 스타일 지정 에 자주 사용됩니다.

문서. getElementById() 는 대소문자를 구분합니다. 이 방법은 다음과 같습니다.

  • . getElementById()
  • document.getElementById()
  • document.getElementById()

메소드 이름의 다른 변형은 허용되지 않습니다. JavaScript.

ID를 대문자로 작성하는 것이 유혹적이지만 다른 단어의 약어이므로 대문자 I 와 소문자 <를 사용해야 합니다. . strong> d .

getElementById 메소드에 대해 자세히 알아보려면 JavaScript getElementById 가이드를 읽으십시오.

예시 시나리오

우리는 사용자를 우리 애플리케이션으로 환영하는 코드 조각을 만들 것입니다. 환영 메시지는 페이지 상단에 표시되는 제목에 있습니다.

이 예에서는 데모 이름을 사용하겠습니다.

시작하려면 웹 페이지의 시작 섹션에 대한 본문 HTML 코드 정의 :

기본적으로

에는 Welcome 콘텐츠가 포함되어 있습니다.
태그는 상위 태그이며 제목에 있습니다. 다음으로
태그 . 환영 메시지에 대한 모든 JavaScript 코드가 포함됩니다.

스크립트에서 제목을 선택하고 내용을 수정합니다.

getElementById () 메소드는 제목을 선택합니다. 이 HTML 요소를 title 이라는 JavaScript 변수에 할당합니다. 제목의 내용이 "Welcome, Luke!"로 변경됩니다. " textContent 를 사용하여 제목을 변경합니다.

코드를 실행하고 어떤 일이 발생하는지 보겠습니다. < /a> JavaScript 콘솔에서 오류를 볼 수 있습니다.

 Screen Shot 2020 09 28 at 07.47. 35