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

2021. 2. 8. 20:02·Archive/Develop
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
'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 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

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

  • 최근 글

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

티스토리툴바