최신 웹 개발 튜토리얼
 

JavaScript HTML DOM 요소

❮ 이전 다음 장 ❯

이 페이지는 어떻게 찾을 HTML 페이지에 액세스 HTML 요소하도록 가르친다.

찾기 HTML 요소

종종, 자바 스크립트, 당신은 HTML 요소를 조작 할 수 있습니다.

이렇게하려면 먼저 요소를 찾을 수있다. 이 작업을 수행하는 몇 가지 방법이 있습니다 :

  • 하여 HTML 요소를 찾기 id
  • 태그 이름으로 HTML 요소를 찾기
  • 하여 HTML 요소를 찾기 class 이름을
  • CSS 선택기로 HTML 요소를 찾기
  • HTML 개체 컬렉션으로 HTML 요소를 찾기

에 의해 HTML 요소를 찾기 Id

는 DOM에서 HTML 요소를 찾을 수있는 가장 쉬운 방법은, 요소 사용하는 것입니다 id .

이 예 가진 요소 발견 id="intro" :

예

var myElement = document.getElementById("intro");
»그것을 자신을 시도

요소가 발견되면,이 방법은 (Object로서 요소를 반환 myElement ).

요소가 발견되지 않는 경우, myElement 널 (null)이 포함됩니다.

태그 이름으로 HTML 요소를 찾기

이 예는 모든 발견 <p> 요소를 :

예

var x = document.getElementsByTagName("p");
»그것을 자신을 시도

이 예와 요소를 찾아 id="main" , 다음 모든 발견 <p> 내부 요소 "main" :

예

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
»그것을 자신을 시도

하여 HTML 요소 찾기 Class 이름

같은 모든 HTML 요소를 찾으려면 class 이름을 사용 getElementsByClassName() .

이 예는 모든 요소의 목록을 반환 class="intro" .

예

var x = document.getElementsByClassName("intro");
»그것을 자신을 시도

클래스 이름으로 찾기 요소는 인터넷 익스플로러 8 이전 버전에서 작동하지 않습니다.

CSS 셀렉터에 의해 HTML 요소를 찾기

당신은 지정된 CSS 셀렉터와 일치하는 모든 HTML 요소 (찾으려면 id , 클래스 이름, 유형, 속성, 속성 값 등)를 사용 querySelectorAll() 메소드를.

이 예는 모든 목록을 반환 <p> 와 요소 class="intro" .

예

var x = document.querySelectorAll("p.intro");
»그것을 자신을 시도

querySelectorAll() 메서드는 인터넷 익스플로러 8 이전 버전에서 작동하지 않습니다.

HTML 개체 컬렉션으로 HTML 요소를 찾기

이 예는 양식과 요소 발견 id="frm1" 양식 컬렉션에서, 및 디스플레이 모든 요소 값을 :

예

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
»그것을 자신을 시도

다음 HTML 개체 (및 개체 컬렉션)도 액세스 할 수 있습니다 :

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5»


❮ 이전 다음 장 ❯