DOM 요약

다룰 내용

노드의 개념
간편한 DOM 사용법
- getElementById, getElementsByTagName, getAttribute, setAttribute

1. DOM

D는 문서입니다.
- 문서 객체 모델(Document Object Model)은 문서(document)가 없으면 움직이지 않음
- 웹 문서를 만들어 웹 브라우저에 띄우는 순간 DOM이 살아 움직이기 시작합니다. 작성된 문서가 객체로 변경되기 때문임
O는 객체입니다.
- 자바스크립트에는 세 종류의 객체가 있음
  - 사용자 정의 객체
  - 배열, 수학, 날짜와 같이 자바스크립트에서 이미 만들어진 객체
  - 웹 브라우저가 제공하는 주요 객체
- 자바스크립트 초기에는 중요한 몇 가지 주요 객체들이 스크립트 제작에 사용돼었음. 그 중 가장 기본적인 것이 윈도우 객체(window object)임
- 이러한 객체는 웹 브라우저 창 내부의 속성을 표현한 것으로 브라우저 객체 모델(BOM, Browser Object Model)이라고 부르기도 함
- 브라우저 객체 모델은 주로 window.open이나 window.blur 같은 것을 말한다.
- 이러한 내용은 DOM의 내용에서 벗어난 주제임. DOM은 브라우저 창 안의 웹 문서 내용을 다루는 문서(document) 객체가 대상임
M은 모델입니다.
- DOM에서 사용하는 가장 중요한 규칙은 문서를 나뭇가지(tree)형 구조로 표시한다는 것임
- 이러한 구조도는 (X)HTML에서 문서를 가장 잘 표현해주는 방법임
  1. //쇼핑 목록
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    1. <head>
      1. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      2. <title>쇼핑목록</title>
    2. </head>
    3. <body>
      1. <h1>쇼핑 목록</h1>
      2. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
      3. <ul id="purchase">
        
        <li>땅콩</li>
        
        <li>치즈</li>
        
        <li>우유</li>
      4. </ul>
    4. </body>
  5. <html>
- [그림]기본 웹페이지의 문서 구조
- 웹페이지 구조 표현 방식
  - doctype을 선언해 주고 난 후 문서는 <html>을 여는 것으로 시작. 웹 페이지 내의 모든 요소들이 <html>안에 있음. 즉 <html>은 모든 요소들의 부모라고 할 수 있음
  - <html> 바로 아래로 <head>와 <body>가 존재함. 이 둘은 형제 관계
  - 이런 식으로 부모/자식 관계를 맺어가는 것이 기본적인 document 구조임
  - 이러한 형태를 노드 트리라고 부른다.

2. 노드

노드(node) : 어떤 연결망에서 특정 지점과 지점을 연결하는 데 표시하는 것을 말함. 네트웍은 노드의 집합을 말한다.
현실 세계에서 모든 것은 원자로 구성되어 있다. 원자는 세상의 노드라고 할 수 있으며 원자보다 작은 양성자나 전자 등도 노드라고 부를수 있음
DOM도 마찬가지임. 문서는 노드의 집합으로, 문서라는 나무 위에 가지나 잎같은 노드를 갖고 있는 것이라 할 수 있음

요소 노드
- DOM에서 원자와 같은것이 요소(element) 노드임
- 앞서 쇼핑 목록 문서의 구조를 이야기 할 때<body>, <p>, 같은 요소로 표현을 했음. 요소는 웹상에서 제공되는 문서의 가장 기본적인 조각을 의미하며, 문서의 구조라 하면 이런 요소가 배열된 것을 의미함
- 태그는 요소의 이름을 붙인 것이라고 보면 됨.
- 요소는 다른 요소를 포함할 수 있음. 모든 <li> 요소는 <ul>요소 안에 포함되어 있음. 다른 요소에 포함되지 않는 유일한 요소는 <html>뿐이다. 이것이 문서 노드 트리의 시작이기 때문임
텍스트 노드
- 문서가 순수하게 요소로만 구성되어 있다면 구조는 갖겠지만 내용이 없게 됨. 웹 문서에는 내용이 들어 있어야 하며, 대부분 내용은 텍스트로 제공할 수 있다.
- 예를 들어 <p> 요소에는 "이 물건을 사는 것을 잊지 마세요."라는 내용이 들어 있음. 이것이 바로 텍스트(text) 노드임
- XHTML에서 텍스트 노드는 항상 요소 노드안에 포함됨. 하지만 모든 요소가 텍스트 노드를 포함하는 것은 아니다.
- 예를 들어 <ul> 요소는 텍스트를 직접적으로 포함하고 있지 않고, 단지 <li> 요소만을 포함하고 있다.
속성 노드
- 속성(attribute)이라는 것은 요소에 대한 좀더 정확한 정보를 표현할 때 사용한다. 예를 들어 title 속성을 보자면 요소가 포함하고 있는 것을 좀더 정확히 표현하는 수단으로 사용하고 있음
  1. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
  2. // 노드 구성
  3. 요소 노드 : p
  4. 속성 노드 : title = "a gentle reminder"
  5. 텍스트 노드 : 이 물건 사는 것을 잊지 마세요
- 모든 요소는 속성을 포함하지 않지만 모든 속성은 요소 안에 포함된다.
CSS 와의 관계
- DOM은 웹 문서의 구조와 상호 작용하는 기술 중 하나임. 그러한 기술 중에 캐스케이딩 스타일 시트(Cascading Style Sheets), 간단히 CSS는 문서의 내용을 어떻게 표시할 것인가를 나타내는 데 사용하는 방법임
- 자바스크립트처럼 스타일은 문서의 <head>안에 <style> 태그로 선언하거나 외부 스타일 시트 파일을 포함할 수 있음. CSS를 표시하는 문법은 자바스크립트 함수와 매우 유사함
  1. // CSS 문법
  2. 선택자 {
    1. 속성 : 값;
  3. }
  4. //예를 들면 특정 색상이나 글꼴과 크기를 표현할 수 있다
  5. p {
    1. color : yellow;
    2. font-family : "arial",sans-serif;
    3. font-size : 1.2em;
  6. }
- 상속(Inheritance)은 CSS의 가장 강력한 기능이다. DOM처럼 CSS도 역시 노드 트리로 문서 내용을 볼 수 있다. 노드 트리 안에 요소들은 그들 부모의 스타일 속성을 그대로 전달 받습니다.
  1. // 예를 들어 body 요소의 글꼴과 색상을 선언하면 body가 포함하고 있는 모든 요소에 자동 적용됨
  2. body {
    1. color : white;
    2. background-color : black;
  3. }
- 이런식으로 전체에 동일한 스타일을 적용하지 않고 하나의 단락에만 스타일을 적용하기 위해서 클래스(class)와 아이디(id)를 지정하게 된다.
  - 클래스
    1. // class 속성은 원하는 요소에 여러 번 사용 할 수 있다
    2. <p class="special">이 단락은 특별한 내용이 있습니다.</p>
    3. <p class="special">특별한 내용을 담은 제목</p>
    4. // 스타일시트 내용은 아래와 같다
    5. .special {
      1. font-style : italic;
    6. }
    7. // 특정한 요소의 클래스를 지정해서 사용하고 싶은 경우
    8. h2.special {
      1. text-transform : uppercase;
    9. }
  - 아이디
    1. // id 속성은 웹 페이지에서 유일하게 한 번 특정 요소를 지정해서 사용할 수 있다
    2. <ul id="purchase">
    3. // 스타일 시트 내용
    4. #purchase {
      1. border : 1px solid white;
      2. background-color : #333;
      3. color : #ccc;
      4. padding : 1em;
    5. }
    6. // 특정 요소에 표함된 다른 요소들에 대한 스타일 지정
    7. #purchase li {
      1. font-weight : bold;
    8. }

3. getElementById

DOM은 이름만 봐도 역할을 알 수 있는 getElementById라는 메소드가 있음(대소문자 구별 주의)
이 메소드는 문서 객체와 함께 사용할 수 있는 함수임. 함수는 항상 인수(argument)를 표시하기 위한 괄호를 써서 표헌한다. getElementById는 id, 딱 하나의 인
수를 가짐
1. document.getElementById(id)
2. //id = purchase
3. document.getElementById("purchase")
이 메소드를 사용하면 HTML 문서에서 purchase라고 지정된 아이디 속성을 포함하는 단 하나의 HTML 요소를 참조하며, 이 요소는 하나의 객체가 된다.
문서내의 모든 요소는 객체이며, DOM을 사용해서 이런 요소들 중 필요한 하나를 얻어낼 수 있다.

4. getElementsByTagName

getElementById 메소드를 이용해서 특정 id를 가진 문서내 요소를 찾을 수 있지만 id가 없는 요소에 전부 id를 붙일 수는 없다.
getElementsByTagName 메소드를 사용하면 특정 태그를 사용하는 요소들을 배열로서 얻어낼수 있다.
이 함수도 역시 하나의 인수를 갖게 되는데, 인수는 바로 태그의 이름이 된다.
1. // 기본 문법
2. element.getElementsByTagName(tag) // element라는 사실을 이해해야 함
3. // 예제
4. document.getElementsByTagName("li")
5. alert(document.getElementsByTagName("li").length);
6. // 이렇게 하면 목록 항목의 개수를 볼수 있게 된다.
불필요한 코드를 줄여보면서 반환되는 type을 확인
1. var items = document.getElementsByTagName("li");
2. for (var i=0: i < items.length; i++) {
  1. alert(typeof items[i]);
3. }
4. // 세번 object라고 경고창이 뜨게 될 것임
5. // 특정한 요소 노드를 지정하지 않을 경우 인수에 별(*)을 넣어줄 수 있다
6. alert(document.getElementsByTagName("*").length);
기본 문법에서 doucment가 아닌 element를 이용한 이유
1. //document 로 문서객체를 사용하지 않고 특정 요소에 포함된 요소를 알아낼 수도 있음
2. var shopping = document.getElementById("purchase");
3. var items = shopping.getElementsByTagName("*");
4. alert(items.length);
5. for (var i=0; i < items.length; i++) {
  1. alert(typeof itmes[i]);
6. }

중간 정리

문서 내에 모든 요소 노드는 개체임
또한 이러한 객체 하나 하나 모두 DOM이라는 마당에 세워지 저장 창고 속에 있는 메소드임
재정리
1. 문서는 트리 구조를 지닌 객체들의 모음임
2. 요소, 속성, 텍스트 등 다양한 형식의 노드가 있다
3. getElementById를 사용하면 특정 아이디를 가진 요소에 바로 접근할 수 있다.
4. getElementsByTagName을 사용하면 특정 태그를 가진 요소에 바로 접근할 수 있다.
5. 이러한 노드들은 모두 객체다.

5. getAttribute

요소 노드에 접근하기 위해서 getElementById나 getElementsByTagName이라는 두 가지 방법을 사용함
일단 원하는 요소에 접근하게 되면 각 속성 값들을 알 수 있어야 하는데, 이때 사용하는 것이 getAttribute임
getAttribute 역시 함수로, 속성명을 인수로 갖게 된다.
1. // 기본 문법
2. object.getAttribute(attribute)
3. // 예제 : <p> 요소의 title 속성을 얻는 방법
4. var paras = document.getElementsByTagName("p");
5. for (var i=0; i < paras.length; i++) {
  1. alert(para[i].getAttribute("title"));
6. }
위의 예제 코드를 실행하면 "a gentle reminder" 경고창이 나타남
이때는 <p> 요소가 하나 있기 때문에 그러한데, 속성이 없을 경우 null이 반환된다.
1. // null 반환의 경우를 감안해서 코드 정리
2. var paras = document.getElementsByTagname("p");
3. for (var i=0; i < paras.length; i++) {
  1. var title_text = paras[i].getAttribute("title");
  2. if (title_text != null) {
    1. alert(title_text);
  3. }
4. }
5. // null 체크 간단하게
6. var paras = document.getElementsByTagname("p");
7. for (var i=0; i < paras.length; i++) {
  1. var title_text = paras[i].getAttribute("title");
  2. if (title_text) alert(title_text); // 변수에 값이 있으면 참이고 없으면 거짓임
8. }

7. setAttribute

지금까지의 메소드들은 정보를 뽑아 내는 용도였음
setAttribute는 성격이 조금 다른데. 이것은 특정 속성 노드의 값을 바꿀 수 있다.
이 메소드도 당연히 함수이므로 인수를 갖게 되고, 다른점은 인수가 두개인데, 하나는 바꾸고 싶은 속성이고, 나머지 하나는 바꿀 값이 된다.
1. // 기본 문법
2. object.setAttribute(attribute,value)
3. // 예제
4. var shopping = document.getElementById("purchases");
5. alert(shopping.getAttribute("title"); // 빈창이나 null
6. shopping.setAttribute("title","a list of goods");
7. alert(shopping.getAttribute("title"); // a list of goods
8. // <p> 요소의 title 수정 코드
9. var paras = document.getElementsByTagName("p");
10. for (var i=0; i < paras.length; i++) {
  1. var title_text = paras[i].getAttribute("title");
  2. if (title_text) {
    1. paras[i].setAttribute("title", "brand new title text");
    2. alert(paras[i].getAttribute("title");
  3. }
11. }
setAttribute를 써서 값을 바꿨더라도 이런 변화를 웹브라우저의 HTML 소스보기로는 알수 없음. DOM을 통해서 이미 표시된 웹 페이지 내용을 동적으로 바꾼것이기 때문임(FF의 firebug나 IE의 IE DOM explorer를 사용하면 DOM 내용의 변화를 확인 할 수 있음)

샷타이거's Simple Blog

DOM 요약

다룰 내용

1. DOM

2. 노드

3. getElementById

4. getElementsByTagName

5. getAttribute

7. setAttribute

댓글

티스토리툴바

DOM 요약

다룰 내용

1. DOM

2. 노드

3. getElementById

4. getElementsByTagName

5. getAttribute

7. setAttribute

관련글

댓글

티스토리툴바