window 객체가 브라우저 창 이라고 하면
document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" />
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dst/js/bootstrap.bundle.min.js>"></script>
<title>Document</title>
</head>
<body>
<div id="header-container" class="container-fluid p-5 bg-primary text-white text-center">
<h1 id="header-heading" class="header-title">My First Bootstrap Page</h1>
<h5>Resize this responsive page to see the effect</h5>
</div>
<div id="body-container" class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Coulmn 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Coulmn 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis exercitation ullamco laboris...</p>
</div>
</div>
<form action="/action_page.php" class="form-container">
<div id="form-first-div" class="mb-3 mt-3">
<label for="eamil" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" />
</div>
<div class="form-check mb-3">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" name="remember" />Remember me </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<ul class="list-group mt-5 mb-5">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
document 객체를 이용해서 웹페이지의 상태와 모든 HTML 태그들에 접근할 수 있습니다.
let val;
val = document;
val = document.baseURI; // 웹 페이지의 절대 URI를 반환
val = document.head; // <head> 태그 반환
val = document.body; // <body> 태그 반환
val = document.doctype; // 웹 페이지의 문서 형식을 반환
val = document.cookie; // 웹 페이지의 쿠키를 반환
val = document.forms; // <form> 태그 반환
val = document.forms[0].id;
val = document.forms[0].action;
val = document.forms[0].method;
val = document.links; // href 속성이 있는 <a> 태그 반환
val = document.links[0];
val = document.links[0].id;
val = document.links[0].classList[0];
val = document.links[0].className;
val = document.images; // <img> 태그 반환
val = document.scripts; // <script> 태그 반환
val = document.scripts[0].getAttribute("src");
console.log(val);
document 객체의 메서드들을 사용하면 다양한 방법으로 웹 페이지 내의 태그들에 접근할 수 있다.
// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementById(요소아이디);
// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.getElementsByName(name속성값);
// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환
document.querySelector(선택자);
// document.getElementById()
console.log(document.getElementById("header-container"));
console.log(document.getElementById("header-heading").className);
// styling 변경
headerContainer.style.fontSize = "10px";
headerContainer.style.display = "none";
// content 변경
headerContainer.textContent = "Text Content";
headerContainer.innerText = "Inner Text";
headerContainer.innerHTML = '<span style="color:blue">Inner HTML</span>';
// document.querySelector()
console.log(document.querySelector("#form-first-div"));
console.log(document.querySelector(".form-container"));
console.log(document.querySelector("h5"));
document.querySelector("li").style.color = "blue";
document.querySelector("ul li").style.color = "red";
document.querySelector("li:last-child").style.color = "red";
document.querySelector("li:last-child(3)").style.color = "orange";
document.querySelector("li:last-child(4)").style.color = "Hello World";
document.querySelector("li:last-child(odd)").style.color = "gray";
document.querySelector("li:last-child(even)").style.color = "lightgray";
// 파라미터로 전달한 태그이름을 가진 모든 태그들을 반환(배열)
document.getElementsByTagName(태그이름);
// 파라미터로 전달한 클래스 이름을 가진 모든 태그들ㅇ르 반환(배열)
document.getElementsByClassName(클래스이름);
// 파라미터로 전달한 선택자에 맞는 모든 태그들을 반환(배열)
document.querySelectorAll(선택자);
// document.getElementByClassName
const items = document.getElementsByClassName("list-group-item");
console.log(items);
console.log(items[0]);
items[0].style.color = "blue";
items[3].textContent = "Hi";
// document.getElementByTagName
let list = document.getElementsByTagName("li");
console.log(list);
console.log(list[0]);
list[0].style.color = "red";
list[3].textContent = "Hello";
// HTML 모음을 배열로 만들기
list = Array.from(list);
list.reverse();
list.forEach((li, index) => {
console.log(li.className);
li.textContent = `${index}. List`;
});
console.log(list);
// document.querySelectorAll
const items = document.querySelectorAll("ul.list-group li.list-group-item");
items.forEach((item, index) => {
item.textContent = `${index}. List`;
});
const liOdd = document.querySelectorAll("li:nth-child(odd)");
const liEven = document.querySelectorAll("li:nth-child(even)");
liOdd.forEach((li, index) => {
li.style.background = "gray";
});
for (let i = 0; i < liEven.length; i++) {
liEven[i].style.background = "lightgray";
}
console.log(items);
<div id="container">
innerHTML innerText textContent 차이점
<span style="display: none">안보이는 텍스트</span>
</div>
// innerHTML vs innerText vs textContent
const element = document.getElementById("container");
console.log(element.innerHTML);
console.log(element.innerText);
console.log(element.textContent);
