DOM 요약

jQuery/DOM&jQuery 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">
            1. <li>땅콩</li>
            2. <li>치즈</li>
            3. <li>우유</li>
          4. </ul>
        4. </body>
      5. <html>
    • [그림]기본 웹페이지의 문서 구조
    • 웹페이지 구조 표현 방식
      • doctype을 선언해 주고 난 후 문서는 <html>을 여는 것으로 시작. 웹 페이지 내의 모든 요소들이 <html>안에 있음. 즉 <html>은 모든 요소들의 부모라고 할 수 있음
      • <html> 바로 아래로 <head>와 <body>가 존재함. 이 둘은 형제 관계
      • 이런 식으로 부모/자식 관계를 맺어가는 것이 기본적인 document 구조임
      • 이러한 형태를 노드 트리라고 부른다.

2. 노드

  • 노드(node) : 어떤 연결망에서 특정 지점과 지점을 연결하는 데 표시하는 것을 말함. 네트웍은 노드의 집합을 말한다.
  • 현실 세계에서 모든 것은 원자로 구성되어 있다. 원자는 세상의 노드라고 할 수 있으며 원자보다 작은 양성자나 전자 등도 노드라고 부를수 있음
  • DOM도 마찬가지임. 문서는 노드의 집합으로, 문서라는 나무 위에 가지나 잎같은 노드를 갖고 있는 것이라 할 수 있음
  1. 요소 노드
    • DOM에서 원자와 같은것이 요소(element) 노드임
    • 앞서 쇼핑 목록 문서의 구조를 이야기 할 때<body>, <p>,  같은 요소로 표현을 했음. 요소는 웹상에서 제공되는 문서의 가장 기본적인 조각을 의미하며, 문서의 구조라 하면 이런 요소가 배열된 것을 의미함
    • 태그는 요소의 이름을 붙인 것이라고 보면 됨.
    • 요소는 다른 요소를 포함할 수 있음. 모든 <li> 요소는 <ul>요소 안에 포함되어 있음. 다른 요소에 포함되지 않는 유일한 요소는 <html>뿐이다. 이것이 문서 노드 트리의 시작이기 때문임
  2. 텍스트 노드
    • 문서가 순수하게 요소로만 구성되어 있다면 구조는 갖겠지만 내용이 없게 됨. 웹 문서에는 내용이 들어 있어야 하며, 대부분 내용은 텍스트로 제공할 수 있다.
    • 예를 들어 <p> 요소에는 "이 물건을 사는 것을 잊지 마세요."라는 내용이 들어 있음. 이것이 바로 텍스트(text) 노드
    • XHTML에서 텍스트 노드는 항상 요소 노드안에 포함됨. 하지만 모든 요소가 텍스트 노드를 포함하는 것은 아니다.
    • 예를 들어 <ul> 요소는 텍스트를 직접적으로 포함하고 있지 않고, 단지 <li> 요소만을 포함하고 있다.
  3. 속성 노드
    • 속성(attribute)이라는 것은 요소에 대한 좀더 정확한 정보를 표현할 때 사용한다. 예를 들어 title 속성을 보자면 요소가 포함하고 있는 것을 좀더 정확히 표현하는 수단으로 사용하고 있음
      1. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
      2. // 노드 구성
      3. 요소 노드 : p
      4. 속성 노드 : title = "a gentle reminder"
      5. 텍스트 노드 : 이 물건 사는 것을 잊지 마세요
    • 모든 요소는 속성을 포함하지 않지만 모든 속성은 요소 안에 포함된다.
  4. 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);
    7.  
  • 기본 문법에서 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 내용의 변화를 확인 할 수 있음)

설정

트랙백

댓글