08. HTML DOM과 Document

JinStory77·2023년 5월 17일

DOM html this 천재교육

프런트엔드_공부

목록 보기

8/11

1. 3가지 유형의 객체

1) HTML DOM(Document Object Model)

간단히 DOM, 웹 페이지에 작성된 HTML태그 당 객체(DOM 객체) 생성
HTML 태그가 출력된 모양이나 컨텐츠를 제어하기 위해 사용
- DOM 객체를 통해 각 태그의 CSS3 스타일 시트 접근 및 변경
- HTML 태그에 의해 출력된 텍스트나 이미지 변경

2) DOM 트리

HTML 태그의 포함관계에 따라 DOM 객체의 트리(tree) 생성

(1) DOM 트리의 특징

DOM 트리의 루트는 document 객체
DOM 객체의 종류는 HTML 태그 종류만큼
HTML 태그 당 DOM 객체가 하나씩 생성
HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식관계

(2) 브라우저가 HTML 태그를 화면에 그리는 과정

브라우저가 DOM 트리의 틀(document 객체) 생성
브라우저가 HTML 태그를 읽고 DOM 트리에 DOM 객체 생성
브라우저는 DOM 객체를 화면에 출력
HTML 문서 로딩이 완료되면 DOM 트리 완성
DOM 객체 변경 시, 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신

(3) DOM 트리는 부모 자식 관계

(+) HTML 태그의 요소

엘리먼트(element)로도 불림
HTML 태그의 구성 요소
1. 엘리먼트 이름
2. 속성
3. CSS3 스타일
4. 이벤트 리스너
5. 콘텐츠(innerHTML)

3) DOM 객체

DOM 트리의 한 노드
HTML 태그 당 하나의 DOM 객체 생성
- DOM 노드(Node), DOM 엘리먼트(Element) 라고 함

(1) DOM 객체의 구성 요소

프로퍼티(property)
- HTML 태그의 속성(attribute) 반영
메소드(method)
- DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
컬렉션(collection)
- 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
이벤트 리스너(event listener)
- HTML 태그에 작성된 이벤트 리스너 반영
- 약 70여 개의 이벤트 리스너를 가질 수 있음
CSS3 스타일
- HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영
- DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능

(2) DOM 객체의 프로퍼티와 DOM 객체의 관계

<!DOCTYPE html>
<html>

<head></head>

<body>
  <h3>DOM 객체 P의 프로퍼티, 스타일, 이벤트 리스터</h3>
    <hr>
    <p id="firstP" style="color: blue; background: yellow" onclick="this.style.color='teal'">
      이것은 <span style="color: red">문장입니다.</span>
    </p>
    <script>
      var p = document.getElementById("firstP");
      var text = "p.id" = p.id + "\n";
      text += "p.tagName = " + p.tagName + "\n";
      text += "p.innerHTML = " + p.innerHTML + "\m"
      text += "p.style.color = " + p.style.color + "\m"
      text += "p.onclick = " + p.onclick + "\m"
      text += "너비 = " + p.offsetWidth + "\m"
      text += "높이 = " + p.offsetHeight + "\m"
      alert(text);
    </script>
</body>

</html>

3_1) DOM 객체 다루기

<!DOCTYPE html>
<html>

<head>
  <script>
    function change() {
      var span = document.getElementById("mySpan");
      span.style.color = "green"; // 글자색 green
      span.style.fontSize = "30px"; // 글자 크기 30px
      span.style.display = "block"; // 블록 박스로 변경
      span.style.width = "6em"; // 박스의 폭, 6글자 크기
      span.style.border = "3px dotted magenta" // 3픽셀 점선 magenta 테두리
      span.style.margin = "20px";
    }
  </script>
</head>

<body>
  <h3>CSS 스타일 동적 변경</h3>
  <hr>
  <p style="color: blue"> 이것은
    <span id="mySpan" style="color: red">문장입니다.</span>
  </p>
  <input type="button" value="스타일변경" onclick="change()">
</body>

</html>

2. this

객체 자신을 가르키는 자바스크립트 키워드
DOM 객체에서 객체 자신을 가르키는 용도로 사용

종합 연습 1

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div if="contents">
    <img src="../images/apple.png">
    <ul>
      <li>
        <label for="oPrice">원래 가격</label>
        <input type="text" id="oPrice">원
      </li>
      <li>
        <label for="rate">할인율</label>
        <input type="text" id="rate">%
      </li>
      <li>
        <button onclick="showPrice()">할인 가격 계산하기</button>
      </li>
    </ul>
    <div id="showResult"></div>
  </div>
  <script>
    function showPrice() {
      var originPrice = document.querySelector('#oPrice').value; // 원래 가격
      var rate = document.querySelector('#rate').value;
      var savedPrice = originPrice * (rate / 100);
      var resultPrice = originPrice - savedPrice;
      document.querySelector('#showResult').innerHTML
        = "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "% 입니다.<br>" + savedPrice + "원을 절약한 " + resultPrice + "원에 살 수 있습니다.";
    }
  </script>
</body>

</html>

3. document 객체

1) document

(1) HTML 문서 전체를 대변하는 객체

프로퍼티 : HTML 문서의 전반적인 속성 내포
메서드 : DOM 객체 검색, DOM 객체 생성, HTML 문서 전반적 제어

(2) DOM 객체를 접근하는 경로의 시작점

(3) DOM 트리의 최상위 객체

브라우저는 HTML 문서 로드 전 document 객체를 먼저 생성
document 객체를 뿌리로 하여 DOM 트리 생성

2) document 객체 접근

window.document 또는 document 이름으로 접근
document 객체는 DOM 객체가 아님
- 연결된 스타일 시트가 없음

4. DOM 트리에서 DOM 객체 찾기

5. document.write()와 document.writeln()

6. document의 열기와 닫기, open()과 close()

1) document.open()

현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지 시작. 즉 document 객체에 담긴 DOM 트리를 지우고 새로 시작

2) document.close()

현재 브라우저에 출력된 HTML 페이지 완성
더이상 document.write() 할 수 없음

<!DOCTYPE html>
<html>

<head>
  <script>
    var win = null;
    function showHTML() {
      if (win == null || win.closed)
        win = window.open("", " outWin", "width = 300, height = 200");

      var textArea = document.getElementById("srcText");
      win.document.open();
      win.document.write(textArea.value);
      win.document.close();
    }
  </script>
</head>

<body>
  <h3>HTML 문서 작성기 만들기</h3>
  <hr>
  <p>아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요.
    새 윈도우에 HTML 문서가 출력됩니다.</p>
  <textarea id="srcText" rows="10" cols="50"></textarea>
  <br>
  <br>
  <button onclick="showHTML()">HTML 문서 출력하기</button>
</body>

</html>