생활코딩

Coding Everybody

Document 객체

토픽 생활코딩 > 클라이언트 > JavaScript > 웹브라우저 자바스크립트

소개

Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다.

<script>
//document 객체는 window 객체의 소속이다.
console.log(window.document);
//document 객체의 자식으로는 Doctype과 html이 있다. 
console.log(window.document.childNodes[0]);
console.log(window.document.childNodes[1]);
</script>

주요 API

노드 생성 API

document  객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.

  • createElement()
  • createTextNode()

문서 정보 API

  • title
  • URL
  • referrer
  • lastModified

 

댓글

댓글 본문
  1. Sansol Park
    document 객체는 웹 브라우저에서 전체 HTML 문서를 표현하는 객체이며, 이는 전역 객체인 window 객체의 속성으로 존재합니다. 즉, window.document는 HTML 문서 자체를 가리킵니다.
    브라우저 환경에서 JavaScript 코드는 기본적으로 window 객체의 컨텍스트 내에서 실행됩니다. 따라서 document 객체도 사실상 window.document라는 표현의 약어입니다. 이 때문에 전역 컨텍스트에서 document를 참조하면 자동으로 window.document가 참조되는 것입니다.

    반면, Node 객체는 DOM의 모든 요소(문서의 각 구성 요소)를 나타내는 객체입니다. DOM 트리에서 모든 HTML 요소는 Node 객체의 자식 노드입니다. document 역시 하나의 Node이지만, 특별히 전역 객체인 window에서 제공되므로 window.document로 참조되는 것입니다.
    대화보기
    • Sansol Park
      window 객체와 Node 객체는 서로 다른 개념을 담당합니다. 이들의 관계는 다음과 같습니다:

      window 객체: 웹 브라우저 환경에서 모든 자바스크립트 코드의 최상위 객체입니다. window 객체는 브라우저의 창 또는 탭을 나타내며, 전역 범위에서 접근할 수 있는 모든 자바스크립트 함수와 변수를 관리합니다. 또한, HTML 문서를 표현하는 document 객체와 관련된 여러 DOM API도 window 객체에 포함되어 있습니다.

      Node 객체: DOM(Document Object Model) 트리의 기본 단위입니다. 모든 HTML 요소, 텍스트, 속성 등은 Node 객체입니다. document 객체도 하나의 Node이며, DOM 트리의 루트 역할을 합니다. Node 객체는 트리 구조에서 각 요소 간의 부모/자식 관계를 정의하는 역할을 합니다.

      관계: window 객체는 브라우저 창을 나타내고, 그 속에 포함된 HTML 문서의 구조는 document 객체로 표현됩니다. 그리고 이 document는 DOM 트리의 최상위에 위치하는 Node 객체로, 모든 DOM 요소의 부모입니다. 다시 말해, document는 하나의 Node 객체이며, window 객체가 이 document를 전역적으로 관리하는 역할을 합니다.

      따라서 window는 브라우저 환경을 나타내고, 그 안에 document 객체가 있으며, 이 document는 DOM 트리의 루트로서 Node 객체입니다.
      대화보기
      • 코리니
        20230104
      • azkjhg
        Node.document 가 아니라 왜 window.document인가요?
      • 헤밍웨이
        220825 Document 객체!
      • 임앤강
        2022-02-12 수강하였습니다~
      • 드림보이
        2021.12.28. Document 객체 파트 수강완료
      • labis98
        20210912 좋은 강의 감사합니다.
      • 박병진
        완료 2020.12.09
      • Byungsoo Kim
        감사합니다. 2020.09.29
      • 이준호
        앞서 설명을 들었을 때, Dom의 상위 객체에는 Window 객체도 있는 것으로 알고 있습니다. 여기서 궁금한 점은, Node 객체와 Window 객체와의 관계는 어떻게 되는지 궁금합니다. 내용을 아시는 분 있나요?
      • anne
        완료
      • 정승옥
        완료
      • 한강
        Document 객체 잘 배웠습니다~!!!
        200707
      • Gritter
        감사합니다. 머리속에 그림이 그려진다!
      • ㅎㅅㅁ
        200211
      • 굼벵이
        완료
      • 모든일이일사천리
        Done ; 19/11/24 7PM
      • jess
        감사합니다!!!
      • 김수
        20180901 감사합니다
      • 김수
        20180901 감사합니다...ㅠㅠ
      • 생선과고양이
        20180427 감사합니다
      • 박인호
        12-30
        수강완료.
        document 객체는 문서자체를 의미하는 객체
      • 이댕댕
        감사합니다. 잘보고있어요
      • orez
        감사합니다! 잘 보고 있습니다.
      • crable
        감사합니다
      • Byeong Heon Lee
        정말 감사합니다~
      • 망고
        var a = document.childNodes;
        for(var i in a){
        console.log(i);
        console.log(a[i]);
        }
        이렇게 해서 보면 어떨까 했는데 편하네요.
      • codeX
        감사합니다.
      • hyuna
        늘 감사해요
      • DOM DOM DOM!!!
      • tachyon
        감사합니다
      • JustStudy
        2016.07.08 금
        고맙습니다 3.
      • JustStudy
        2016.007.30금
        고맙습니다 2.
      • 온달장군
        강좌 잘보고 갑니다. 감사합니다.
      • 이주환
        2016. 04. 27
        잘보고 갑니다~!
      • JustStudy
        고맙습니다
      • egoingBack
        조쿠요!
      • 초보웹 개발자
        egoing님 수고 많으셨습니다...
      • WayneKing
        파이팅!!!!
      • 코딩!
        DOM
      • flack3r
        Document vs document
        Document 객체는 Node 객체의 자식클래스이고 document객체는 모든 노드들을 소유하는 루트노드에 해당하는걸로 보입니다.
        http://zetawiki.com......%B4
      • will
        Document 객체와Element는 상속관계가아닌데

        document.getElementByID( )
        위와같이 어떻게 ㅇocument객체 프로퍼티로 Element관련 메소드를 쓸수 있는지 이해가 안갑니다.

        Document객체가 Element객체에게 상속해줘야 되는거 아닌가요?
      • quki
        1. Document vs document
        Document(시작점이 대문자)는 객체의 이름이고 document(시작점이 소문자)는 객체로 이해하는 것이 맞나요???
        혹시 Document의 경우 class를 말하는건가요?

        2. Document는 Node의 자식객체인데 document의 경우 window의 자식이라고는 할 수 없는건가요? 전역객체와 부모객체는 다름개념으로 이해하는 것이 맞나요?

        구조도에서 애매한 부분이 있어 질문올립니다 ^^
      • quki
        Document 객체가 DOM의 시작점이라고 하셨는데 ,
        그렇다면 Node객체의 경우 DOM에 해당되지 않는건가요?
        개념이 다소 헷갈리네요 ㅠ
      • gohu517
        감사합니다 (__)=b
      • 규빈이아빠
        잘봤습니다^^