본문 바로가기
Programming/JavaScript

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

by 코뮤(commu) 2021. 2. 8.
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
반응형