08. 문서객체모델(DOM)

with 문선경

1. 문서 객체 모델(DOM, Document Object Model) 이란?

: 웹 문서의 모든 요소들을 객체로 해석하는 것.

HTML문서 DOM

단순 텍스트 → 객체모델

<html>
	<head>
		<title>My first web page</title>
	</head>
	<body>
		<h1>Hello, world!</h1>
		<p>How are you?</p>
	</body>

DOM은 트리 구조로 표현되어 있다.(DOM 트리구조: 가지와 노드)

노드를 크게 두 가지로 분류하면,

Element 노드와 Element가 아닌 노드로 분류할 수 있다.

Element Node는 HTML요소(body, h1, p와 같은 HTML의 태그)를 말한다.

그 외에 Element Node가 아닌 노드로는,

태그에 담긴 텍스트나 이미지, 혹은 태그의 속성인 텍스트 노드, 이미지노드, 속성 노드가 있고 주석 노드(comment node)가 있다.

DOM Tree는 부모노드, 자식노드, 루트노드(다른 요소노드가 뻗어나가기 시작하는 노드)등으로 구성되어 있다.

위의 돔 트리에서 루트노드는 html노드이다.

⇒ DOM을 사용하면 자바스크립트로 웹 문서의 요소를 제어할 수 있다.

단순텍스트인 HTML문서를 객체모델인 DOM으로 구조화시킴으로써,

객체기반 언어인 자바스크립트를 통해 제어할 수 있게 된다.

이제 자바스크립트로

  1. DOM요소에 접근하는 법(가져오는 법),

  2. DOM요소의 속성 노드(attribute node)를 가져와 수정하는 법,

  3. DOM요소 가져와 이벤트 처리기 연결하는 법,

  4. DOM으로 CSS속성(스타일 속성) 가져와 수정하는 법,

  5. DOM에 새로운 노드 추가하는 법(웹 문서에 새로운 요소 추가),

  6. 추가한 노드 순서 바꾸거나 삭제하는 법

을 알아보자.

2. 자바스크립트로 DOM요소 다루기

1) DOM요소에 접근하기

ID나 Class 선택자가 있는 DOM요소 접근방법

  • ID 값으로 접근 : getElementById()

    id값은 한 문서 안에서 유일함.(중복x) 하나의 웹 요소에만 접근하는 함수.

  • Class 값으로 접근 : getElementsByClassName()

    class는 id와 다르게 한 문서 안에서 여러 번 사용할 수 있음.→ 두 개 이상의 웹 요소에 접근할 수 있는 함수.

    같은 class값을 가진 요소들은 배열과 비슷한 형태로 저장되어 있는데,

    만약 같은 class값을 가진 여러 요소 중 하나의 요소에만 접근하고 싶다면

    배열처럼 인덱스를 사용해 원하는 요소만 가져오면 됨.

ID나 Class 선택자가 없는 DOM요소 접근방법

  • 태그 이름으로 접근 : getElementsByTagName() 함수

    Element's'. 같은 태그 네임을 가진 여러 DOM요소를 모두 찾아 접근할 수 있기 때문. 하나의 요소에만 접근하고 싶다면 byclassname함수와 마찬가지로 인덱스 사용.

선택자의 존재여부와 관계없이 사용할 수 있는 접근방법

  • querySelecter(), querySelecterAll() : id, class값을 사용해도 되고 태그 이름을 사용해도 됨.

    (두 함수는 접근하는 DOM요소의 개수에 차이가 있음. class값이나 태그 이름으로 접근할 때는 All()을 사용해야함. *찾아보기)

    id값 앞에는 #, class값 앞에는 . 를 붙인다. 태그 이름은 기호없이 가져오면 됨.

getElementsBy-() VS querySelector()

get'Elements'는 이름에서도 알 수 있듯이 엘리먼트 노드에만 접근할 수 있지만,

querySelector는 요소 노드 뿐만 아니라 텍스트 노드와 속성 노드까지 접근할 수 있다.

*HTMLCollection과 NodeList의 차이

공통점 : DOM Nodes의 모음, 유사배열 자료형(인덱스로 값을 가져올 수 있고 length속성도 사용할 수 있다. )

차이점 :

HTMLCollection - Element 타입의 노드만 저장됨

NodeList - 모든 타입의 노드가 저장될 수 있음(Element노드, 텍스트노드, 속성노드 등)

2) DOM에서 속성 노드(attribute node) 가져와 수정하기

getAttribute()로 속성에 접근할 수 있고

setAttribute()로 속성을 설정하거나, 속성 값을 수정할 수 있다.

getAttribute() 예시

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

id값이 "prod-img"인 태그의 자식 태그 중에서 img태그에 접근한 후,

src속성의 값을 가져옴.

(img태그가 여러 개 사용된 문서일 경우, 어떤 이미지인지 정확히 지정하기 위해 자식 선택자(>) 사용 / 혹은 인덱스를 통해 전체 이미지 태그 중 몇번째 이미지태그인지 지정함)

setAttribute() 예시

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

img태그에 "src"속성을 새로 추가하고, "src"속성 값으로 "images"폴더의 "coffee-blue.jpg"파일을 입력함.

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

  • HTML문서에서 HTML태그 안에 직접 이벤트 처리기를 추가하기

    : 하나의 요소에 하나의 이벤트 처리기만 사용할 수 있음.

    HTML과 자바스크립트 소스가 섞여있는 형태라 이벤트를 바꾸거나 연결함수를 바꾸려면 HTML소스를 수정해야함.

    → 작업이 간단하고 소스가 짧을 때만 사용하는 것이 좋음.

      <img id="pic" src="girl.jpg" onclick="changePic()">

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

    : 하나의 요소에 하나의 이벤트 처리기만 사용할 수 있음.

      document.querySelector("#pic").onclick = changePic;

  • addEventListener() 함수 사용하기

    : 하나의 요소에 여러 개의 이벤트가 발생했을 때 동시에 처리 가능.

      document.querySelector("#pic").addEventListener("click", changePic, originPic)

4) DOM에서 스타일 속성 가져와서 수정하기

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

요소 다음에 .style예약어를 쓰고 css속성을 적는다.

*이 때, background-color와 같이 하이픈(-)이 포함된 css속성은 하이픈을 없애고 낙타표기법(두 단어를 합치고 두번째 단어의 첫글자를 대문자로 쓰는 표기법)으로 입력한다.

ex)background-color → backgroundColor

display: none과 visibility: hidden의 차이

display: none; 은 요소와 요소를 담고 있는 공간이 보이지 않게 되고,

visibility: hidden;은 요소만 숨겨지고 요소를 담고있는 공간은 그대로 보이게 됨.

5) DOM에 새로운 노드 추가하기(웹 문서에 새로운 요소 추가하기)

(1) 새로운 노드 만들기

createElement() : 새 요소 노드 추가

createTextElement() : 요소에 텍스트 노드 추가

createAttribute() : 요소에 속성 노드 추가

(2) 부모 노드에 연결하기

appendChild() : 새로 만든 노드를 부모 노드에 추가

*새로운 노드를 만든 후에는 반드시 기존 노드에 연결해야 함.

6) 추가한 노드 순서 바꾸기/삭제하기

DOM 트리를 활용해 원하는 노드 다루기

가계도처럼 구성된 DOM트리에서 노드 간의 관계를 이용해 원하는 노드에 접근할 수 있다.

자식 노드가 있는지 확인하기

hasChildNodes() 함수 : 특정 노드에 자식 노드가 있는지를 확인하는 함수. 자식노드가 있다면 true, 그렇지 않다면 false를 반환함.

자식 노드가 있다면, 자식 노드에 접근하기

childNodes 속성 : 특정 노드의 모든 자식 노드에 접근할 수 있음.

children 속성 : 특정 노드의 자식 노드 중 요소 노드(Element Node)에만 접근.

원하는 위치에 노드 삽입하기, 순서바꾸기

연결하려는 부모 노드에 이미 자식 노드가 있을 경우

appendChild() : 마지막 자식 노드로 추가됨.

insertBefore(추가하는 노드, 기준이 되는 노드) : 추가하는 노드가 기준이 되는 노드 바로 앞에 추가됨.

특정 노드 삭제하기

노드는 스스로 자신을 삭제할 수 없다. 따라서 부모 노드에 접근한 후, 부모 노드를 통해 삭제해야 함.

→ 특정 노드를 삭제하려면, 그 노드의 부모 노드를 먼저 찾아야 한다.

parentNode 속성 : 현재 요소의 부모 요소 노드를 반환.

removeChild() 함수 : 부모 노드에서 자식 노드를 삭제하는 함수.

부모노드.removeChild(삭제하려는 자식노드)

Previous07. Array 객체Next09. 폼과 자바스크립트

Last updated