문서객체 모델(DOM)

 자바스크립트를 사용하여 웹 문서의 텍스트나 이미지 등의 요소를 제어하기 위해서는 문서 객체 모델(Document Object Model) 사용합니다.

 

DOM 요소에 접근하기

CSS에는 선택자(Selector) 개념이 있습니다. HTML 요소의 스타일을 선택하여 수정할 때 CSS 선택자를 사용합니다. 자바스크립트로 DOM 요소에 접근할 때도 주로 선택자를 사용합니다.

이해를 돕기 위한 미리 세팅한 예제 소스입니다.

 

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

id 속성을 사용하여 예제 소스 에디오피아 게뎁이라는 제목(h1)에 접근 합니다.

크롬 브라우저 화면에서 콘솔창을 열어 콘솔 창에 id 값이 heading인 요소 (id=heading)를 출력 합니다.

이 후 출력된 요소에 마우스를 올려보면 웹 브라우저 화면에 이 요소가 어느 부분을 가리키는지 표시됩니다.

이어서 다음은 제목을 누르면 접근한 요소의 글자크기가 커지도록 자바스크립트 함수를 만든 것입니다.  getElementById() 함수를 사용하여 DOM 요소에 접근하고, 이 요소를 누르면 onclick 함수 [function(){….}]가 작동합니다.

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

class 속성 값을 사용하여 DOM 요소에 접근하려면 getElementByClassName() 함수를 사용합니다.

class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있습니다. 그래서 getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근합니다.

HTMLCollection은 여러 개의 HTML 요소를 담고 있는(Collection)자료 형식으로, 배열과 비슷하다고 생각하면 됩니다.

여기서 getElementsByClassName() 함수로 접근한 DOM 요소 중 1개의 요소에만 접근하고 싶을 경우 배열의 인덱스를 사용하면 원하는 요소를 가져올수 있습니다.

위 그림과 같이HTMLCollection을 펼치면 원하는 요소 왼쪽에 인덱스(번호)가 있습니다. 이 번호를 참고하여 원하는 요소에 접근할 수 있습니다.

• getElementByTagName() : DOM 요소를 태그 이름으로 찾아내는 함수

id나 class 선택자가 있는 DOM 요소는 위의 두 방법으로 접근하면 됩니다. 하지만 id나 class 선택자가 없는 DOM 요소에는 getElementByTagName() 함수를 사용하여 태그 이름을 찾아 DOM 요소에 접근합니다.

다음은 h2 태그 이름으로 접근한 DOM 요소 중 첫 번째 요소의 배경색을 바꾼것입니다.

 

-querySelector(), querySelectorAll() : 두 함수를 사용할 때에는 id 값 앞에는 (#)샵 class 값 앞에는 (.)마침표를 붙이고 태그 이름은 기호 없이 태그 이름만 사용합니다.

id="heading"인 제목 요소를 querySelector() 함수로 접근한 것입니다.

이번에는 class 값이 accent DOM 요소에 접근해 보겠습니다. class 속성은 한 문서에서 여러 번 사용할 수 있기 때문에 querySelectorAll() 함수를 사용하여 접근한 것입니다. 그런데 이번에 반환 값은 HTMLCollection이 아니라 NodeList라고 표기 됩니다. 여기서 NodeList는 여러 개의 노드를 모아 놓은 것으로 배열과 비슷하다고 볼 수 있습니다.

 

자바스크립트 프로그램에서 웹 요소 정도만 변경한다면 getElementById(), getElementByClassName(), getElementByTagName() 함수를 사용하면 되고, 웹 요소뿐만 아니라 요소의 텍스트나 속성을 변경하거나 새로로운 노드를 추가하고 싶다면 querySelector, querySelectorAll 함수를 사용합니다. 물론 요소 노드만 필요한 경우데도 사용 가능합니다.

 

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

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

querySelector() 함수로 해당 요소에 접근합니다. 그리고 속성에 접근하려면 getAttribute() 함수를 사용하고, 접근한 속성의 값을 바꾸려면 setAttribute() 함수를 사용합니다.

미리 세팅한 소스와 이미지에 getAttribute() 함수와 setAttribute() 함수를 연습해 보겠습니다.

먼저 이미지 파일의 경로와 이미지에 접근하기 위해 사용한 소스입니다.

이미지에 id나 class를 사용하지 않았기 때문에 <img> 태그를 사용해서 접근 하였습니다. 웹 문서 안에 이미지가 여러 개일 수 있기 때문에 #prod-img > img 선택자를 사용해서 접근해 보겠습니다.

이미지를 다른 이미지로 표시하고 싶다면 <img> 태그의 src 속성을 바꾸면 됩니다. HTML 태그의 속성을 바꾸고 싶다면 setAttribute() 함수를 사용하고 괄호 안에 속성 이름과 속성값을 넣으면 됩니다. 이때 지정한 속성이 아직 없다면 새로 속성과 속성 값을 추가하고, 지정한 속성이 있다면 괄호 안에 넣은 속성 값으로 수정합니다.

콘솔 창에서 다음과 같이 입력해서 #prod-img > img의 파일 경로를 "images/coffee-blue.jpg" 로 지정합니다. 화면에 표시되는 그림이 바뀌는 것을 볼 수 있습니다.