차례:
- getElementById
- getElementsByTagName
- 이 텍스트는 사라집니다.
- 이 코드는 덮어 쓰기됩니다.
- JavaScript는 this
- getElementsByClassName
비디오: CSS3 - 04 [ 필수 선택자 14종] PART 1 태그, 전체, CLASS, ID, 자손 선택자 2024
JavaScript에서는 getElementBy 메서드를 사용하면 쉽게 액세스 할 수 있습니다 노드의 부모 / 자식 관계에 의존하지 않고 문서의 요소 또는 요소 그룹에 전달할 수 있습니다.
-
getElementById
-
getElementsByTagName
-
getElementsByClassName
getElementById
getElementById는 요소를 선택하는 데 가장 널리 사용되는 방법으로 현대 웹 개발에 필수적입니다. 이 간단한 도구를 사용하면 고유 한 id 속성을 참조하여 모든 요소를 찾고 사용할 수 있습니다. HTML 문서에서 어떤 일이 일어나더라도 getElementById는 항상 사용자를 위해있을 것이고 원하는 정확한 요소를 안정적으로 선택할 것입니다.
이 예제는 getElementById의 놀라운 기능을 보여줌으로써 모든 자바 스크립트를 문서에 보관하거나 코드를 모듈화 할 수있게 해줍니다. getElementById를 사용하면 ID를 아는 한 문서의 어느 위치에서나 모든 요소로 작업 할 수 있습니다.
getElementById 함수 사용하기 calculateMPG (miles, gallons) {document. getElementById ("displayMiles"). innerHTML = parseInt (마일); 문서. getElementById ("displayGallons"). innerHTML = parseInt (갤런); 문서. getElementById ("displayMPG"). innerHTML = 마일 / 갤런;}당신은 ___
마일을 운전했습니다.
___
갤런의 가스를 사용했습니다.
MPG가 ___입니다. var milesDriven = 프롬프트 ("Enter miles driven"); var gallonsGas = 프롬프트 ("사용 된 가스 갤런을 입력하십시오"); calculateMPG (milesDriven, gallonsGas);
getElementsByTagName
getElementsByTagName 메소드는 지정된 태그 이름을 가진 모든 요소의 노드 목록을 리턴합니다. 예를 들어, getElementsByTagName은 모든 h1 요소를 선택하고 innerHTML 특성을 순차적 번호로 변경하는 데 사용됩니다.
getElementsByTagName 함수 사용하기 numberElements (tagName) {var getTags =문서. getElementsByTagName (tagName); for (i = 0; i
이 텍스트는 사라집니다.
이 코드는 덮어 쓰기됩니다.
JavaScript는 this
numberElements ("h1");
getElementsByClassName
getElementsByClassName 메소드는 getElementsByTagName과 거의 같은 방식으로 작동하지만 class 속성 값을 사용하여 요소를 선택합니다. 이 함수는 "error"클래스의 요소를 선택하고 innerHTML 속성의 값을 변경합니다.
getElementsByClassName 함수 사용 checkMath (result) {var userMath =문서. getElementById ("answer1"). 값; var errors =
문서. getElementsByClassName ("error"); if (parseInt (userMath)! = parseInt (result)) {오류 [0]. innerHTML = "그건 틀렸어. "+ userMath +"를 입력했습니다. 대답은 "+ result;} else {errors [0]입니다. innerHTML = "맞습니다! ";}} 4 + 1 = 수학을 확인하십시오!(계속)
이 코드를 웹 브라우저에서 실행하고 잘못된 대답을 입력 한 결과가 여기에 표시됩니다.
getElementsByClassNa getElementsByClassName을 사용하여 오류 메시지를 표시 할 요소를 선택하십시오.위의 코드는 button 요소 내에서 onclick 특성을 사용합니다. 이것은 DOM 이벤트 핸들러 속성의 예입니다.