자바스크립트 DOM과 이벤트

DOM(Document  Object Model) 문서 객체 모델

구조화된 문서를 표현하는 형식

 

HTML DOM

HTML 문서를 조작하고 접근하는 표준화된 방법

모든 HTLM 요소는 HTML DOM을 통해 접근 가능함

 

Document 객체

웹페이지

 

Document 메소드

HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공

1) HTML 요소의 선택

2) HTML 요소의 생성

3) HTML 이벤트 핸들러 추가

4) HTML 객체의 선택

 

반응형

---

1) HTML 요소의 선택

document.getElementById() 해당 아이디의 요소를 선택

document.getElementByClassName() 해당 클래스에 속한 요소를 모두 선택

document.getElementByName() 해당 name 속성값을 가지는 요소를 모두 선택

document.querySelectorALL() 해당 선택자로 선택되는 요소를 모두 선택

document.querySelector() 해당 선택자로 선택되는 요소를 1개 선택

 

 

2) HTML 요소의 생성

document.createElement() 지정된 HTML 요소를 생성

document.write() HTML 출력 스트림을 통해 텍스트를 출력

 

 

3) HTML 이벤트 핸들러 추가

요소.onclick = function(){} 마우스 클릭 이벤트와 연결될 이벤트 핸들러

 

---

DOM의 트리 구조 (HTML -> DOM)

                                 HTML

HEAD                                                        BODY

TITLE                                                       ARTICLE

자바스크립트                                header               SECTION

                                                                        header 1      section 1

---

DOM 요소의 스타일 변경

아이디가 "구운고기"인 요소를 선택

var selectedItem = document.getElementById("구운고기");

 

선택된 요소의 텍스트 색상 변경

selectedItem.style.color = "red";

 

선택된 요소의 내용을 변경

selectedItem.innerHTML = "요소 내용 변경";