[ 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 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

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

  • 최근 글

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

티스토리툴바