Michael Zippo
자바스크립트에서 웹페이지의 요소를 선택하시겠습니까? 이것은 JavaScript에서 소위 getters 요소의 왕이라고 불리는 getElementById 메소드의 특징입니다.
getElementById 를 사용하면 ID를 기반으로 요소를 선택할 수 있습니다. 생각해보면 꽤 자명한 메서드 이름입니다.
이 가이드에서는 getElementById가 무엇인지, 어떻게 작동하는지, 언제 코드에서 사용해야 합니다. document.getElementById 데모에서 "Show / Hide‚" 버튼 텍스트"의 예를 살펴보겠습니다.
Let에 대해 알아보겠습니다.
getElementById()는 지정된 요소 ID 속성을 기반으로 페이지에서 HTML DOM 요소를 선택하는 문서 메소드입니다.
다음 코드를 고려하십시오.
HTML 코드에서 ID가 mainButton인 Bootcamp 일치 찾기
기사에 ID를 할당한 경우 이 방법을 사용할 수 있습니다. 특정 기준과 일치하는 첫 번째 요소 개체를 반환하는 querySelector 또는 getElementByClass와 같은 더 큰 getter를 사용하는 대신 다음을 사용하여 요소를 가져올 수 있습니다. getElementById().
getElementById()는 웹페이지에서 요소를 검색하는 데 사용되는 일반적인 방법입니다.
예를 들어보기 전에 초보자가 이 방법을 사용할 때 자주 저지르는 실수에 대해 이야기해 보겠습니다.
새로운 것을 배우면 작동하지 않으므로 getElementById( ) 를 배우는 동안 저지를 수 있는 일반적인 실수에 대해 이야기해 보겠습니다.
먼저 getElementById() 는 대소문자를 구분합니다. 프로그래밍에서 ID라는 용어는 일반적으로 대문자이지만 이 방법을 사용할 때는 낙타의 경우 Id를 사용해야 합니다. 그렇지 않으면 이 방법이 작동하지 않습니다
두 번째, ID 해시태그를 포함하지 않아야 합니다. 다음 코드를 고려하십시오.
이 예는 ID가 mainButton인 요소를 가져오는 것처럼 보일 수 있지만 그렇지 않습니다. 검색하려는 항목:
이제 방해가 되지 않았으므로 예제 검토로 넘어갈 수 있습니다.
웹을 검색할 때 "자세히 알아보기"라는 태그를 접할 수 있습니다. 웹 페이지에는 텍스트 조각의 몇 문장이 표시될 수 있으므로 나머지 텍스트를 볼 수 있도록 이 버튼을 누르라는 메시지가 표시됩니다.
getElementB yId () getter를 사용하여 이 함수를 빌드합니다. 이 튜토리얼의 최종 코드는 GitHub .
HTML과 CSS를 사용하여 간단한 프론트엔드 생성부터 시작합니다. index.html이라는 새 파일을 생성합니다. html에 다음 코드를 붙여넣습니다.
getElementById()에 대해 자세히 알고 싶으십니까? 제대로 찾아오셨습니다.
자세히 알아보기