[7일차] Do it! 자바스크립트 기본편 - 문서객체모델(1)

---

* WARNING ! 책 및 인터넷을 통해 공부한 내용으로 정확한 정보가 아닐 수 있으니 주의해주세요! *

 

---

공부범위

- 8강

 

공부내용

문서객체모델(DOM)

 

 

1. 문서객체모델 정의

 

: DOM(Document Object Model)

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

 

---

2. 문서객체모델 구조

 

: DOM 구조 = DOM 트리(tree)

- 가지와 노드로 구성

   

   (1) 노드

 

   - 요소(Element) 노드 : 태그

   - 텍스트(Text) 노드 : 텍스트

   - 속성(Attribute) 노드 : 속성

   - 주석(Comment) 노드 : 주석

 

   - Root Node : 요소 노드이면서 다른 노드가 뻗어 나가기 시작하는 노드

      ex) html

---

3. DOM 요소에 접근하는 방법

 

   (1) getElementById( )

 

   : id 선택자로 접근하는 함수

   - 괄호 안에 # 또는. 을 붙이지 X

 

document.getElementById("heading").onclick = function {
	this.style.fontSize = "5em"
}

 

 

   (2) getElementsByClassName( )

 

   : class값으로 접근하는 함수

   - class값은 id값과 달리 중복으로 쓸 수 있기 때문에 Elements로 s가 붙음

   - 위의 함수를 쓸 경우 class값은 여러 개일 수 있기 때문에 배열이 불러와짐

   - 배열에서 인덱스 번호를 써서 자신이 원하는 값을 가져올 수 있음

 

document.getElementsByClassName("accent")[0].style.textDecoration = "underline"

 

 

   (3) getElementsByTagName( )

 

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

   - id 또는 class값이 없을 때 접근하는 방법

   - 이 함수 또한 태그가 중복해서 쓰일 수 있기 때문에 Elements로 s가 붙음

 

document.getElementsByTagName("h2")[2].style.backgroundColor = "tomato"

 

 

   (4) querySelector( ), querySelectorAll( )

 

   : id, class, tag에 다 접근할 수 있는 함수

   - id값에는 #, class값에는 .을 붙여줘야함

 

      1) id

 

document.qeurySelector("#heading")

 

      2) class

 

      - querySelector 함수를 사용할 경우, 첫 번째 요소에만 접근 가능

      - querySeletorAll 함수를 사용할 경우, 모든 요소에 접근 가능

 

document.querySelector(".accent")
// 이 경우, accent라는 class 배열에 들어있는 요소 중 인덱스 번호0 = 첫 번째 요소에만 접근

document.querySelectorAll(".accent")[1].style.backgroundColor = "yellow"
// 이 경우, 배열의 모든 요소에 접근하므로 인덱스 번호를 붙여서 요소 지정해줘야함

 

 

   (5) getAttribute( ), setAttribute( )

 

     1) getAttribue( ) 

 

      : HTML 태그 속성을 가져오는 함수

 

document.querySelector("#heading > img").getAttribute("src", "images/coffee-blue.jpg")

 

      2) setAttribute( )

 

      : HTML 태그 속성을 수정하는 함수

 

// 클릭 시, 이미지가 바뀌게 하기

var bigPic = document.querySelector("#cup");
var smallPics = document.querySelectorAll(".small");

for(var i = 0; i<smallPics.length; i++) {
	smallPics[i].onclick = showBig;
}

function showBig( ) {
	var newPic = this.src;
    bigPic.setAttribute("src", newPic);
}

 

 

   (6) addEventListener( )

 

   : 한 요소에 여러 이벤트가 발생했을 때 동시에 처리할 수 있게 해주는 함수

   - 어디든 사용할 수 있는 함수 (Document, text 등)

 

var pic = document.querySelector("#pic");
pic.addEventListener("mouseover", changePic, false);
pic.addEventListener("mouseout", originPic, false);

function changePic() {
	pic.src = "images/boy.png";
}
function originPic() {
	pic.src = "images/girl.png";
}