[Javascript] 문서 객체 모델(DOM) 1 - DOM 요소에 접근하기, addEventListener() 함수 사용하기

DOM의 정의

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

DOM 트리는 웹 문서 요소를 다음과 같이 표현합니다.

• 웹 문서의 태그는 요소(Element) 노드로 표현합니다.
• 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드(#text:)로 표현합니다.
• 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현합니다.
• 주석은 주석(Comment) 노드로 표현합니다.

 

DOM 트리가 만들어지는 것을 실시간으로 확인할 수 있는 사이트

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

 

DOM 요소에 접근하기

 

DOM 요소를 ID 선택자로 접근하는 함수 - getElementById()

> document.getElementById("heading")
< <h1 id = "heading"> 에디오피아 게뎁</h1>

콘솔창에 document.getElementById("heading") 을 입력하면 id 값이 heading인 요소를 출력합니다.
접근한 요소에 텍스트가 있다면 자바스크립트를 사용해 글자 색이나 크기 등 스타일을 수정할 수도 있습니다.

 

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

 

getElemetById() 함수를 사용해 DOM 요소에 접근하고, 이 요소를 누르면(onclick) 함수[function() {}] 가 작동합니다.

 

 

DOM 요소를 class 값으로 찾아내는 함수 - getElementsByClassName()

 

css에서 class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있습니다. 그래서 getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근합니다. 콘솔 창에서 getElementsByClassName() 함수를 사용하면 id 속성 값으로 DOM 요소에 접근했던 것과 다르게 HTMLCollection 값을 출력합니다. 이는 여러 개의 HTML 요소를 담고 있는 자료 형식으로 , 배열과 비슷한 형식입니다.

> document.getElementsByClassName("accent")
< HTMLCollection(2) [span.accent, span.accent]

 getElementsByClassName() 으로 접근한 DOM 요소 중 1개의 요소의 접근할 수도 있습니다. 배열의 인덱스를 사용하면 원하는 요소를 가져올 수 있습니다.

 

> document.getElementsByClassName("accent")[0]
< <span classs="accent">방울농장</span>

 

DOM 요소를 태그 이름으로 찾아내는 함수 - getElementsByTagName()

id나 class 선택자가 없는 DOM 요소에 접근하는 방법. 이 함수도 여러 DOM 요소를 모두 찾아 접근합니다.

 

 

DOM 요소를 다양한 방법으로 찾아주는 함수 - querySelector(), querySelectorAll()

 

id, class 값을 사용해도 되고 태그 이름을 사용해도 되는 함수.  CSS 선택자를 사용한 방법을 그대로 사용합니다.

class 값 앞에는 마침표(.) 를, id 값 앞에는 샵(#) 을 붙입니다. 태그 이름은 기호 없이 태그 이름만 사용하면 됩니다.

 

document.querySelector("#container")

querySelector() 함수와 함께 class 선택자나 태그 이름을 사용할 때는 여러 요소 중 첫번째 요소에만 접근할 수 있습니다.

querySelectorAll() 함수를 사용했을 때, 반환되는 값은 HTMLCollection 이 아니라 NodeList입니다. NodeList는 HTMLCollection 과 같은 방법으로 다룰 수 있습니다. (인덱스를 사용해서 특정 요소에 접근 가능)

 

> document.querySelectorAll(".accent")[1].style.backgroundColor = "yellow"
< "yellow"

 

자식 선택자를 사용할 수 있습니다.

querySelector("#prod-img > img")

 

 

getElementById() 와 querySelector() 함수의 차이

 

getElementById() 함수를 비롯한 getElementsByClassName(), getElementsByTagName() 함수들은 DOM의 노드 중에서 요소 노드까지만 접근할 수 있습니다. 반면에 querySelector() 함수와 querySelectorAll() 함수는 요소 노드 뿐만이 아니라 텍스트 노드와 속성 노드까지 접근할 수 있습니다. 웹 요소 정도만 변경한다면 getElementById()를 사용하고, 웹 요소 뿐만이 아니라 요소의 텍스트나 속성을 변경하거나 새로운 노드를 추가하고 싶다면 querySelector(), querySelectorAll() 함수를 사용하면 됩니다.

 

 

HTML 태그 속성을 가져오거나 수정하는 함수 - getAttribute(), setAttribute() 함수

 

이미지 태그에는 src나 alt 등의 속성이 있습니다.

이미지 요소에 접근하려면 querySeleector() 함수를 사용하면 됩니다. 그리고 이미지의 주소 등 속성에 접근하려면 getAttribute() 함수를 사용하고, 접근한 속성의 값을 바꾸려면 setAttribute() 함수를 사용하면 됩니다.

 

> document.querySelector("prod-img > img").getAttribute("src")
< "images/coffee-pink.jpg"

 

 

addEventListener() 함수 사용하기

 

한 요소에 여러 이벤트가 발생했을 때, 이를 동시에 처리하려면 addEventListner() 함수를 사용해야 합니다. addEventListner() 함수는 웹 문서에서 이미지나 텍스트 등 특정 요소뿐만 아니라 document 객체나 window 객체 어디에서든 사용할 수 있습니다.

 

pic.addEventListener("mouseover", changePic, false")

 

매개변수 1 : 이벤트 유형

처리할 이벤트 유형을 지정합니다. 단 이 함수에서 이벤트 유형을 지정할 때는 'on' 을 붙이지 않고 'click' 이나 'mouseover' 처럼 이벤트 이름만 사용합니다.

 

매개변수 2 : 함수

이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정합니다.

 

매개변수 3 : 캡처 여부

이벤트를 캡처링하는지 여부를 지정하는데 생략할 수 있습니다. true면 캡처링, false면 버블링한다는 의미인데, 기본 값은 false입니다. 이벤트 캡처링은 DOM의 부모 노드에서 자식 노드로 이벤트가 전달되는 것이고, 이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 이벤트가 전달되는 것입니다.