Javascript는 ID로 요소 가져오기

Michael Zippo

자바스크립트에서 웹페이지의 요소를 선택하시겠습니까? 이것은 JavaScript에서 소위 getters 요소의 왕이라고 불리는 getElementById 메소드의 특징입니다.

getElementById 를 사용하면 ID를 기반으로 요소를 선택할 수 있습니다. 생각해보면 꽤 자명한 메서드 이름입니다.

이 가이드에서는 getElementById가 무엇인지, 어떻게 작동하는지, 언제 코드에서 사용해야 합니다. document.getElementById 데모에서 "Show / Hide‚" 버튼 텍스트"의 예를 살펴보겠습니다.

Let에 대해 알아보겠습니다.

getElementById가 무엇인가요?

getElementById()는 지정된 요소 ID 속성을 기반으로 페이지에서 HTML DOM 요소를 선택하는 문서 메소드입니다.

다음 코드를 고려하십시오.

HTML 코드에서 ID가 mainButton인 Bootcamp 일치 찾기

 기사에 ID를 할당한 경우 이 방법을 사용할 수 있습니다. 특정 기준과 일치하는 첫 번째 요소 개체를 반환하는 querySelector 또는 getElementByClass와 같은 더 큰 getter를 사용하는 대신 다음을 사용하여 요소를 가져올 수 있습니다. getElementById().
getElementById()는 웹페이지에서 요소를 검색하는 데 사용되는 일반적인 방법입니다.
getElementById에 대해 알아야 할 사항
예를 들어보기 전에 초보자가 이 방법을 사용할 때 자주 저지르는 실수에 대해 이야기해 보겠습니다.
 새로운 것을 배우면 작동하지 않으므로 getElementById( ) 를 배우는 동안 저지를 수 있는 일반적인 실수에 대해 이야기해 보겠습니다.
먼저 getElementById() 는 대소문자를 구분합니다. 프로그래밍에서 ID라는 용어는 일반적으로 대문자이지만 이 방법을 사용할 때는 낙타의 경우 Id를 사용해야 합니다. 그렇지 않으면 이 방법이 작동하지 않습니다

 두 번째, ID 해시태그를 포함하지 않아야 합니다. 다음 코드를 고려하십시오.
 이 예는 ID가 mainButton인 요소를 가져오는 것처럼 보일 수 있지만 그렇지 않습니다. 검색하려는 항목:
이제 방해가 되지 않았으므로 예제 검토로 넘어갈 수 있습니다.
getElementById 사용 방법
웹을 검색할 때 "자세히 알아보기"라는 태그를 접할 수 있습니다. 웹 페이지에는 텍스트 조각의 몇 문장이 표시될 수 있으므로 나머지 텍스트를 볼 수 있도록 이 버튼을 누르라는 메시지가 표시됩니다.
getElementB yId () getter를 사용하여 이 함수를 빌드합니다. 이 튜토리얼의 최종 코드는  GitHub .
프론트엔드 생성 
 HTML과 CSS를 사용하여 간단한 프론트엔드 생성부터 시작합니다. index.html이라는 새 파일을 생성합니다. html에 다음 코드를 붙여넣습니다.
  JavaScript getElementById() 
 getElementById()에 대해 자세히 알고 싶으십니까? 제대로 찾아오셨습니다.
 자세히 알아보기   getElementById()는 요소를 선택할 수 있게 해주는 JavaScript 메소드입니다. 페이지 밴드. 이 메소드는 페이지의 요소를 "가져오기" 때문에 일반적으로 "게터"라고 합니다.