자바스크립트 - 문서 객체
안녕하세요, 야심勃勃한 프로그래머 여러분! 오늘 우리는 자바스크립트의 Document Object에 대해 흥미로운 세상으로 뛰어들어 보겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 수년간 수많은 학생들을 가르치면서 이 여정을 단계별로 안내해 왔습니다. 이 모험을 함께 시작해 보겠습니다!
Window Document Object
웹 브라우저에서 자바스크립트를 사용할 때 가장 중요한 것 중 하나와 상호작용할 것입니다: Document Object. 하지만 그 전에, 그의 부모를 이해해 보겠습니다: Window 객체.
당신의 웹 브라우저를 집으로 상상해 보세요. Window 객체는 전체 집을 대표하며, Document 객체는 대부분의 행동이 일어나는 주요 생활실과 같습니다. 브라우저 창에서 볼 수 있는 모든 것은 Window 객체의 일부이며, 웹 페이지 콘텐츠는 특히 Document 객체의 일부입니다.
다음은 이를 설명하는 간단한 예제입니다:
console.log(window.document === document); // 출력: true이는 document가 실제로 window 객체의 프로퍼티이지만, 편의상 직접 document로 접근할 수 있음을 보여줍니다.
자바스크립트 Document Object 프로퍼티
이제 Document 객체가 어디에 자리 잡고 있는지 이해했으므로, 그의 몇 가지 프로퍼티를 탐구해 보겠습니다. 이 프로퍼티들은 우리가 웹 페이지의 다양한 부분에 접근하고 조작할 수 있게 해줍니다.
1. document.title
이 프로퍼티는 웹 페이지의 제목을 가져오거나 설정할 수 있게 해줍니다 - 그东西이 브라우저 탭에 나타나는 텍스트를 아시겠죠.
console.log(document.title); // 현재 페이지 제목을 출력
document.title = "내 멋진 페이지"; // 페이지 제목을 변경2. document.body
이것은 HTML 문서의 <body> 요소에 접근할 수 있게 해줍니다.
document.body.style.backgroundColor = "lightblue";이 줄은 전체 페이지의 배경색을 푸른색으로 변경합니다. 꽤 멋지죠?
3. document.URL
이 읽기 전용 프로퍼티는 현재 페이지의 완전한 URL을 제공합니다.
console.log(document.URL); // 예를 들어 "https://www.example.com/page.html"와 같이 출력자바스크립트 Document Object 메서드
메서드는 우리 Document 객체의 슈퍼파워입니다. 이들은 우리가 웹 페이지에서 다양한 흥미로운 일을 할 수 있게 해줍니다.
1. document.getElementById()
이 메서드는 아마 가장 자주 사용할 것입니다. 이는 HTML에서 ID를 사용하여 요소를 가져오는 것입니다.
let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "안녕하세요, 자바스크립트에 의해 변경되었습니다!";이 예제에서 우리는 ID가 "mySpecialDiv"인 요소를 찾아 그 내용을 변경합니다.
2. document.createElement()
이 메서드는 새로운 HTML 요소를 완전히 새로 만들어 줍니다!
let newParagraph = document.createElement("p");
newParagraph.textContent = "저는 새로운段落이며, 만나서 반갑습니다!";
document.body.appendChild(newParagraph);여기서 우리는 새로운段落 요소를 만들고, 텍스트를 설정하고, 문서의 body에 추가합니다.
3. document.querySelector()
이 강력한 메서드는 CSS 선택자를 사용하여 요소를 선택합니다.
let firstButton = document.querySelector("button");
firstButton.style.color = "red";이것은 페이지의 첫 번째 버튼을 찾아 텍스트 색상을 빨간색으로 변경합니다.
Document Object 프로퍼티 목록
Document 객체의 몇 가지 중요한 프로퍼티를 편리한 표로 요약해 보겠습니다:
| 프로퍼티 | 설명 |
|---|---|
| document.title | 현재 문서의 제목 |
| document.body |
<body> 요소 |
| document.head |
<head> 요소 |
| document.URL | 문서의 완전한 URL |
| document.domain | 문서 서버의 도메인 이름 |
| document.lastModified | 문서가 마지막으로 수정된 날짜 |
Document Object 메서드 목록
그리고 여기서 몇 가지 중요한 Document 객체 메서드의 표를 제공합니다:
| 메서드 | 설명 |
|---|---|
| document.getElementById() | 지정된 ID를 가진 요소를 반환 |
| document.getElementsByClassName() | 지정된 클래스 이름을 가진 요소 모음을 반환 |
| document.getElementsByTagName() | 지정된 태그 이름을 가진 요소 모음을 반환 |
| document.querySelector() | CSS 선택자와 일치하는 첫 번째 요소를 반환 |
| document.querySelectorAll() | CSS 선택자와 일치하는 모든 요소를 반환 |
| document.createElement() | 새로운 HTML 요소를 생성 |
| document.write() | 문서에 HTML 표현식이나 자바스크립트 코드를 쓰기 |
기억하시라, Document 객체를 조작하는 것은 웹 개발의 세계에서 마법사가 되는 것과 같습니다. 이 도구들로 우리는 웹 페이지를 살아나게 하고 사용자 행동에 반응하는 놀라운 방법으로 만들 수 있습니다.
이 강의를 마무리하면서, 한 학생이 처음에는 이 모든 프로퍼티와 메서드에 대해 두려워했지만, 연습을 통해 매우 능숙해졌던 기억이 떠납니다. (그녀는 잠자는 동안도 웹 페이지를 조작할 수 있었을 거예요!) 중요한 것은 실험하고 즐기는 것입니다.
그러므로, 내 사랑하는 학생 여러분, 이 개념들을 놀아보세요. 이 페이지의 제목을 변경하거나 새로운 요소를 만들고 body에 추가해 보세요. 점점 연습을 하면 자연스러워질 것이며, 곧 프로처럼 상호작용적인 웹 경험을 만들 수 있을 것입니다!
기쁜 코딩을 하세요, 그리고 프로그래밍의 세계에서 호기심은 당신의 가장 큰 자산입니다. 계속 탐구하고, 계속 질문하고, 가장 중요한 것은 계속 코딩하세요!
Credits: Image by storyset