DOM 요약

jQuery/DOM&jQuery

DOM 요약

샷타이거 2008. 10. 22. 17:40

다룰 내용

노드의 개념
간편한 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 내용의 변화를 확인 할 수 있음)