[JavaScript] 내가 보려고 정리한 Do it 자바스크립트 기본편(5)

8장

 

🐠 문서 객체 모델 (DOM) 🐠

 

: 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

 

 

DOM 트리

- 구조가 나무🌳처럼 생겼다

 

• 태그를 요소 노드로 표현
• 태그가 품고 있는 텍스트는 자식 노드인 텍스트 노드로 표현
• 태그의 속성은 요소노드의 자식 노드인 속성 노드로 표현
• 주석은 주석 노드로 표현

DOM 트리 구조를 보여주는 사이트!

http://software.hixie.ch/utilities/js/live-dom-viewer/

Live DOM Viewer

 

 

DOM 요소에 접근

: 자바스크립트로 요소에 접근하는 것

 

• getElementById()

id 선택자로 접근하는 함수

document.getElementById("heading")

 

• getElementsByClassName()

class 값으로 접근하는 함수

여러 번 사용가능하고 여러 요소에 접근할 수 있음! 하나의 요소에만 접근하고 싶다면 인덱스 번호를 써서 접근

document.getElementsByClassName("accent")[0]

 

• getElementsByTagName()

태그 이름으로 접근하는 함수

여러 요소에 접근 가능

document.getElementsByTagName("h2")[0]

 

• querySelector(), querySelectorAll()

다양한 방법으로 접근하는 함수(#id, .class, 태그 이름으로 모두 접근 가능)

document.querySelector("#heading")

document.querySelectorAll(".accent") // 여러 요소에 접근하기 위해 querySelectAll 함수 사용

 

* getElement--- 함수들은 요소 노드까지만 접근 가능

* querySelctor--- 함수들은 텍스트 노드, 속성 노드까지 접근 가능

 

 

요소에 접근해서 스타일 수정

document.querySelector("#heading").style.color="white"

이런 식으로 수정 가능!

 

 

DOM 요소의 속성에 접근

 

• getAttribute(), setAttribute()

HTML의 태그 속성에 접근하는 함수

// getAttribute()
document.querySelector("#prod-pic > img").getAttribute("src")

//setAttribute()
document.querySelector("#prod-pic > img").setAttribute("src","images/coffee-blue.jpg")

 

 

DOM에서 이벤트 처리

 

이벤트 처리 방법 복습

 

HTML 태그 안에서 이벤트 처리기 연결

<img id="pic" src="images/girl.png" alt="" onclick="changePic()">

 

DOM 요소에 이벤트 처리기 연결

var pic = document.querySelector('#pic');
    pic.onclick = changePic;

-> 요소에 하나의 이벤트 처리기만 연결 가능

---

• addEventListener()

-> 요소에 여러 이벤트 처리기 연결 가능

pic.addEventListener("mouseover",changePic);
pic.addEventListener("mouseout",originPic);

이벤트 유형을 지정할 때는 'on'을 붙이지 않음!

 

오우,,, 네,,, 이제 실습해야지,, 하하,,, 8시에 피자 먹기로 했는데 1시간 20분 남아따!!