document는 네이티브 함수가 아니라 브라우저 환경에서 제공되는 JavaScript 객체입니다.
javascript 에서 document 는 네이티브 함수가 맞아?
document ?? 네이티브 함수?? 무엇인지 정확하게 알아봅시다.
위의 목차를 클릭하면 해당 글로 자동 이동 합니다.
document란?
- document는 DOM(Document Object Model)의 일부로, 브라우저에서 웹 페이지를 조작하기 위해 제공되는 전역 객체입니다.
- 이 객체는 웹 페이지의 구조와 내용을 트리 형식으로 표현하며, JavaScript를 통해 HTML 문서를 동적으로 수정하거나 액세스할 수 있도록 합니다.
예를 들어서 아래 코드와 같이
console.log(document.title); // 현재 페이지의 <title> 요소 내용
document.body.style.backgroundColor = "blue"; // 페이지 배경색 변경
document의 기원
- W3C DOM 표준에서 정의된 객체입니다.
- 브라우저 환경에서 JavaScript 엔진과 함께 제공되며, V8 같은 JavaScript 엔진 자체에는 포함되지 않습니다.
- Node.js와 같은 비(非)브라우저 환경에서는 document 객체가 존재하지 않습니다.
네이티브 함수와 document의 차이
(1) 네이티브 함수란?
- JavaScript 엔진(V8 등)에 의해 기본적으로 제공되는 함수들로, ECMAScript 표준에 정의된 함수들입니다.
- 예: Math.random(), parseInt(), Array.prototype.map() 등
(2) document는 브라우저 환경에서만 제공
- document는 브라우저의 호스트 객체입니다. 즉, 브라우저가 JavaScript 환경에 추가로 제공하는 객체입니다.
- ECMAScript 표준에 포함되지 않으며, DOM 표준에 의해 정의된 객체입니다.
브라우저에서의 document 객체 기능
HTML 문서 구조 접근: DOM 트리를 탐색하고 조작할 수 있습니다.
let header = document.querySelector('h1'); // <h1> 요소 선택
header.textContent = "새 제목입니다!"; // 텍스트 변경
새로운 요소 생성 및 추가
let div = document.createElement('div'); // 새로운 <div> 요소 생성
div.textContent = "Hello, world!";
document.body.appendChild(div); // <div>를 <body>에 추가
document는 Node.js 등에서 사용 불가
document는 브라우저 전용 객체이므로 Node.js 환경에서는 사용할 수 없습니다.
만약 Node.js에서 DOM 조작이 필요하다면 **jsdom**과 같은 라이브러리를 사용해야 합니다.
// jsdom을 사용한 예:
const { JSDOM } = require("jsdom");
const dom = new JSDOM(`<!DOCTYPE html><p>Hello, world!</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello, world!"
결론
- document는 브라우저 환경에서 제공되는 호스트 객체입니다.
- JavaScript의 네이티브 함수는 아니며, DOM API의 일부로 제공됩니다.
- 브라우저 환경에서만 동작하며, Node.js와 같은 환경에서는 사용할 수 없습니다.
반응형
'기록하고 싶은 모든 것 > 지식' 카테고리의 다른 글
| 탄핵이란 무엇인가? (1) | 2024.12.18 |
|---|---|
| 노드JS 와 크롬브라우저의 엔진은 같은거니? (0) | 2024.11.22 |
| ISO 국제표준화기구 세탁기호 (한국 외 다른나라) (1) | 2024.11.05 |
| 구글애드센스 무효클릭(티스토리 블로그) 신고하기 (0) | 2022.05.23 |
| 티스토리 구글애드센스(google AdSense) 계좌 등록 방법 (0) | 2022.04.06 |