[Do it! 자바스크립트 입문] 18 - 8장 문서 객체 모델(DOM)로 요소 접근하기, 태그 속성 가져와서 수정하기 / getElementById(), querySelctor(), getAttribute() 등

 

문서 객체 모델(DOM) 정의 및 DOM 트리 설명과

DOM 요소 접근 방법 및 수정 방법, 이벤트 처리방법을 배워보겠습니다.

 

1. 문서 객체 모델(DOM) 이란? 

 

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

 

DOM 트리

DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하기 때문에

이 구조 모습이 나무처럼 생겼다고 해서 DOM 트리라고 불립니다.

 

출처 : poiemaweb.com

 

DOM 트리는 가지와 노드로 표현합니다.

노드(Node)는 그림에서 body, div와 같은 네모상자를 가르키고,

가지는 말 그대로 그림에 보여지는 얇은 선을 가리키며 노드와 노드 사이의 연결 관계를 나타냅니다.

 

div는 h1의 부모 노드이고,

h1은 body의 자식 노드 입니다.

 

DOM 트리의 웹 문서 요소 표현

웹 문서의 태그 = 요소(Element) 노드
태그가 품고 있는 텍스트 = 텍스트(Text) 노드
태그의 속성 = 속성(Attribute) 노드
주석 = 주석(Comment) 노드

 

2. DOM 요소에 접근하기

 

자바스크립트로 프로그램에 사용할 요소에 접근하는 것을 'DOM 요소에 접근한다' 라고 합니다.

 

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

 

 

<h1 id = "heading"> 요소를 클릭하면 스타일 속성을 바꿔주도록 하겠습니다.

 

 

document.getElementById("heading").onclick = function(){

    this.style.fontSie = "5em"

}

=> 문서에 있는 heading이라는 id 태그를 가져와서,

클릭하면 fontsize가 5em으로 바뀌는 함수를 실행합니다.

 

 

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

 

getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근합니다.

HTMLCollection은 여러 개의 HTML 요소를 담고 있는 자료 형식입니다.

 

 

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

=> .accent 인덱스 번호 0번째 요소에 textdecoration을 underline을 줍니다.

 

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

 

 

getElementsByTagName()은 id나 class 선택자가 없는 태그 요소에 접근하는 방법입니다.

이것 또한 2개 이상의 DOM요소에 접근이 가능합니다.

 

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

 

 

querySelector()와 querySelectorAll()은 앞에 소개한 것들과 사용방법은 같습니다.

그대신 id, class 값과 태그 이름은 자유롭게 사용해도 되며,

주의할 점은 id 앞에는 샾(#)을, class 앞에는 마침표(.) 붙여야 합니다.

위 코드는 앞에 주석으로 한 getElementById()와 getElementByClassName()과 동일하며

기호 유무만 주의해 주면 됩니다.

 

3. 웹 요소의 태그 속성 가져와서 수정하기

 

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

 

getAttribute()는 해당 요소의 속성을 접근하고,

setAttirbute()는 접근한 속성 값을 바꾸는데 사용합니다.

 

 

문서에서 "#prod-img"의 img의 속성 값인 src에 접근하고, 이미지를 바꿔보겠습니다. 

 

 

getAttribute()를 이용하여 img의 src 값을 가져왔고,

setAttribute()를 이용하여 img의 파일 경로를 변경하여 다른 이미지로 바꿔보았습니다.

 

다음 게시물에서 예제 문제를 풀어보도록 하겠습니다! :)