HTML DOM이란 무엇입니까?
HTML DOM 은 HTML 용 객체 모델 입니다 . 다음을 정의합니다.
- HTML 요소를 객체 로
- 모든 HTML 요소의 속성
- 모든 HTML 요소에 대한 메소드
- 모든 HTML 요소에 대한 이벤트
HTML DOM 은 JavaScript 용 API (프로그래밍 인터페이스)입니다 .
- JavaScript는 HTML 요소를 추가/변경/제거할 수 있습니다.
- JavaScript는 HTML 속성을 추가/변경/제거할 수 있습니다.
- JavaScript는 CSS 스타일을 추가/변경/제거할 수 있습니다.
- JavaScript는 HTML 이벤트에 반응할 수 있습니다.
- JavaScript는 HTML 이벤트를 추가/변경/제거할 수 있습니다.
HTML DOM(문서 개체 모델)
웹 페이지가 로드 되면 브라우저 는 페이지의 문서 객체 모델 을 생성 합니다 .
HTML DOM 모델 은 Objects 트리로 구성됩니다 .
HTML DOM 객체 트리
HTML 요소 찾기
JavaScript로 HTML 요소에 접근하려면 먼저 요소를 찾아야 합니다.
이를 수행하는 몇 가지 방법이 있습니다.
- ID로 HTML 요소 찾기
- 태그 이름으로 HTML 요소 찾기
- 클래스 이름으로 HTML 요소 찾기
- CSS 선택기로 HTML 요소 찾기
- HTML 개체 컬렉션으로 HTML 요소 찾기
ID로 HTML 요소 찾기
DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 ID를 사용하는 것입니다.
이 예는 id="intro"인 요소를 찾습니다.
예시
var myElement = document.getElementById("intro");
요소가 발견되면 메서드는 요소를 객체로 반환합니다(myElement에서).
요소를 찾을 수 없으면 myElement에 null이 포함됩니다.
태그 이름으로 HTML 요소 찾기
이 예에서는 모든 <p> 요소를 찾습니다.
예시
var x = document.getElementsByTagName("p");
이 예는 id="main"인 요소를 찾은 다음 "main" 내부의 모든 <p> 요소를 찾습니다.
예시
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
클래스 이름으로 HTML 요소 찾기
동일한 클래스 이름을 가진 모든 HTML 요소를 찾으려면 getElementsByClassName()을 사용하십시오.
이 예는 class="intro"인 모든 요소의 목록을 반환합니다.
예시
var x = document.getElementsByClassName("intro");
클래스 이름으로 요소를 찾는 것은 Internet Explorer 8 및 이전 버전에서 작동하지 않습니다.
CSS 선택기로 HTML 요소 찾기
지정된 CSS 선택자와 일치하는 모든 HTML 요소(id, 클래스 이름, 유형, 속성, 속성 값 등)를 찾으려면 querySelectorAll() 메서드를 사용합니다.
이 예는 class="intro"인 모든 <p> 요소의 목록을 반환합니다.
예시
var x = document.querySelectorAll("p.intro");
querySelectorAll() 메서드는 Internet Explorer 8 및 이전 버전에서 작동하지 않습니다.
HTML 개체 컬렉션으로 HTML 요소 찾기
HTML 개체 컬렉션에도 액세스할 수 있습니다.
HTML DOM 튜토리얼
전체 HTMLDOM 튜토리얼
이것은 HTMLDOM에 대한 짧은 소개였습니다.
전체 HTMLDOM 튜토리얼을 보려면 W3Schools HTMLDOM 튜토리얼로 이동하십시오 .