document.getelementbyid 예제

Cód: --- | Fabricante: ---
Publicado em: Sem categoria

지정된 숫자의 큐브를 인쇄하는 document.getElementById() 메서드의 간단한 예제를 살펴보겠습니다. 이 HTML 파일 access.html을 자신의 프로젝트에 저장하여 이 문서와 함께 예제를 작업할 수 있습니다. 자바 스크립트와 HTML을 로컬로 작동하는 방법을 잘 모르는 경우 HTML 자습서에 자바 스크립트를 추가하는 방법을 검토하십시오. 이 예제 파일에는 데모 쿼리-모든 클래스가 적용된 두 가지 요소가 있습니다. 다음은 우리가 위에서 한 작업의 전체 스크립트입니다. 예제 페이지의 모든 요소에 액세스하는 데 사용할 수 있습니다. 파일을 access.js로 저장하고 닫는 본문 태그 바로 앞에 HTML 파일에 로드합니다. 이제 둘 이상의 요소에 액세스하려고 하며, 예제에서는 데모 클래스가 있는 두 개의 요소가 있습니다. 이 시점에서 ID 예제와 동일한 방식으로 요소를 수정할 수 있다고 생각할 수 있습니다. 그러나 다음 코드를 실행하고 클래스 데모 요소의 테두리 속성을 주황색으로 변경하려고 하면 오류가 발생합니다. 쿼리선택자()를 사용하면 쉼표로 구분된 값이 OR 연산자로 작동합니다.

예를 들어 쿼리 선택자(`div, 아티클`)는 div 또는 아티클과 일치합니다(문서에서 처음 나타나는 것 중). querySelectorAll()을 사용하면 쉼표로 구분된 값이 AND 연산자로 작동하며 쿼리SelectorAll(`div, 아티클`)은 문서의 모든 div 및 아티클 값과 일치합니다. DOM을 공부할 때 학습한 정보를 이해하고 유지하도록 자신의 컴퓨터에 예제를 입력하는 것이 중요합니다. 클래스 특성에 대한 선택기는 마침표 또는 전체 중지(.)이므로 .demo-query-all을 사용 하 고 클래스에 액세스할 수 있습니다. 자바 스크립트 배열은 인덱스 번호로 액세스해야합니다. 따라서 0의 인덱스를 사용하여 이 배열의 첫 번째 요소를 변경할 수 있습니다. 해당 클래스에서 요소에 액세스하는 것과 마찬가지로 getElementsByTagName()은 배열과 같은 요소 의 객체를 반환하고 for 루프를 통해 문서의 모든 태그를 수정할 수 있습니다. ID는 페이지 내에서 고유해야 합니다. 그러나 지정된 ID가 있는 요소가 두 개 이상 있는 경우 getElementById() 메서드는 소스 코드의 첫 번째 요소를 반환합니다. id=”demo”로 요소를 얻고 색상을 변경합니다: 문서에 없는 요소는 getElementById()에 의해 검색되지 않습니다.

요소를 만들고 ID를 할당할 때 getElementById()로 액세스하기 전에 Node.insertBefore() 또는 유사한 방법을 사용하여 문서 트리에 요소를 삽입해야 합니다. 데모 클래스. 이제 데모 클래스가 있는 페이지의 모든 요소를 선택하고 테두리 속성을 주황색으로 변경했습니다. 지정된 ID와 일치하는 DOM 요소 개체또는 문서에서 일치하는 요소가 없는 경우 null을 설명하는 Element 개체입니다. getElementById()를 사용하여 div 및 단추 요소에 대한 참조를 얻습니다. 우리는 버튼에 수신기를 추가합니다. 버튼을 클릭하면 div의 이름과 텍스트 내용이 출력됩니다. 루프는 모든 아티클 요소의 테두리 속성을 파란색으로 변경했습니다. getElementById 함수를 사용할 때 모든 것이 원활하게 진행되도록 몇 가지 사항을 기억해야 합니다. 당신은 항상 getElementById 문서 개체의 메서드 (또는 기능)는 기억 해야 합니다. 즉, document.getElementById를 사용하여만 액세스할 수 있습니다.

위의 스크립트가 수행하는 작업을 수행하는 다른 방법이 있지만 이것은 확실히 간단하고 브라우저 호환 접근 방식입니다. document.getElementById() 메서드는 지정된 ID의 요소를 반환합니다. 이 메서드의 이름으로 “Id”의 대소문자는 코드가 작동하려면 정확해야 합니다. getElementByID()는 유효하지 않으며 작동하지 않지만 자연스럽게 보일 수 있습니다. HTML 입력의 값에 빠르게 액세스하려면 ID를 제공하여 인생을 훨씬 쉽게 만듭니다. 아래의 이 작은 스크립트는 텍스트 필드 “myText”에 텍스트가 있는지 확인합니다. getElementById가 요구하는 인수는 활용하려는 HTML 요소의 ID입니다.

Compartilhe