[ JavaScript ] 자바스크립트 기본 문법 | Document 객체

2021. 2. 8. 20:02·Archive/Develop
목차
  1. 자바스크립트 기본 문법  ::  Document 
  2.  
  3. 자바스크립트 기본 문법  ::  Document 주요 API
  4.  
  5.  
728x90
반응형

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 


 

 

 

이미지 출처 : https://opentutorials.org/course/1375/6740

 

 

 

 

자바스크립트 기본 문법  ::  Document 

 

 

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>

 

 

 

 

document 는 node 를 상속받았기 때문에, childNodes를 사용가능합니다.

 

 

 

위의 결과는 document 의 첫번째 자식은 <!DOCTYPE html> 이고,

 

 

두번째 자식은 html 태그 전체라는 것을 보여줍니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  Document 주요 API

 

 

 

노드 생성 API

 

 

document  객체의 주요 임무는 새로운 노드를 생성해주는 역할입니다.

 

이에 대한 내용은 노드 변경 API 포스팅에서 다뤘기 때문에 여기서는 언급하지 않도록 하겠습니다.

 

 

  • createElement()
  • createTextNode()

 

 

문서 정보 API

 

 

  • title
  • URL
  • referrer
  • lastModified

 

 

 

<!DOCTYPE html>
<html>
<head>
	<title>halo~!</title>
</head>
<body>
<script>
	console.log(document.title);
</script>
</body>
</html>

 

 

위와 같은 코드를 실행했을 때,

 

 

 

 

 

 

문서의 title 이 출력되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

728x90
반응형

'Archive > Develop' 카테고리의 다른 글

[ JavaScript ] 자바스크립트 기본 문법 | 문서의 기하학적 특성(스크롤 제어, Viewport, getBoundingClientRect())  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | Text 객체 API(appendData,deleteData, insertData, nodeValue...)  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | 문자열로 노드제어(innerHTML, outerHTML,innerText, outerText)  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | jQuery 노드 변경 API(before,after,prepend,append,remove,empty...)  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | 노드 변경 API(appendChild, createElement, createTextNode, removeChild, replaceChild)  (0) 2021.02.08
  1. 자바스크립트 기본 문법  ::  Document 
  2.  
  3. 자바스크립트 기본 문법  ::  Document 주요 API
  4.  
  5.  
'Archive/Develop' 카테고리의 다른 글
  • [ JavaScript ] 자바스크립트 기본 문법 | 문서의 기하학적 특성(스크롤 제어, Viewport, getBoundingClientRect())
  • [ JavaScript ] 자바스크립트 기본 문법 | Text 객체 API(appendData,deleteData, insertData, nodeValue...)
  • [ JavaScript ] 자바스크립트 기본 문법 | 문자열로 노드제어(innerHTML, outerHTML,innerText, outerText)
  • [ JavaScript ] 자바스크립트 기본 문법 | jQuery 노드 변경 API(before,after,prepend,append,remove,empty...)
코뮤(commu)
코뮤(commu)
코딩으로 커뮤니케이션하는 코뮤입니다 😎
  • 코뮤(commu)
    코뮤(COMMU)
    코뮤(commu)
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Archive
        • Hacking
        • Develop
        • ETC
      • Algorithm
      • DB&Infra
      • ETC
      • Node
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • IT지식보따리
    • IT가 맛있다
    • IT 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

    파이썬 기초
    Python
    자바스크립트 API
    자바스크립트
    코드업 파이썬 기초 100제
    docker
    자바스크립트 객체
    Git
    C++
    파이썬
    장고
    백준 풀이
    파이썬 알고리즘
    백준 파이썬
    비박스
    코드업 기초
    백준
    Oracle
    오라클
    javascript
    코드업
    파이썬 기초 문제
    보안뉴스
    파이썬 백준
    백준 문제풀이
    파이썬 문제
    oracle db
    Codeup
    카카오 100일 프로젝트
    Django
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
코뮤(commu)
[ JavaScript ] 자바스크립트 기본 문법 | Document 객체
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.