Document Object 이용해보기(심층)자바스크립트2024. 9. 3. 01:46
Table of Contents
728x90
반응형
- Window Object
window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다.
또한 window는 브라우저의 객체이지 자바스크립트의 객체가 아니다.
이 window 객체를 이용해서
1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수 있다.
2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다.
- Document Object
Window 객체가 브라우저 창이라고 하면document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있다.
이제부터 DOM 객체를 자바스크립트를 사용하여 삭제하거나 업데이트 해보도록 하겠다.
아래의 코드를 사용할 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</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 nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<form id="form-id" class="form-container" action="/action_page.php">
<div id="form-first-div" class="mb-3 mt-3">
<label for="email" 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 class="form-check-input" type="checkbox" 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="script.js"></script>
</body>
</html>
// script.js
let val;
val = document;
val = document.baseURI; // 웹 페이지의 절대 URI 반환, http://192.168.0.4:5500/document/index.html
val = document.head; // <head> 태그 반환
val = document.body; // <body> 태그 반환
val = document.forms; // <form> 태그 반환, TMLCollection [form#form-id.form-container, form-id: form#form-id.form-container]
val = document.forms[0].id; // form-id
val = document.forms[0].classList; // DOMTokenList ['form-container', value: 'form-container']
val = document.forms[0].className; // form-container
val = document.scripts; // <script> 태그 반환, HTMLCollection(2) [script, script]
val = document.scripts[0].getAttribute("src"); // 실제로 사용되는 script(src 속성을 가져오는 것), https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
val = document.scripts[1].getAttribute("src"); // script.js
console.log(val);
- Document 객체 메소드 사용
document 객체의 메소드들을 사용하면 다양한 방법으로 웹 페이지 내의 태그들에 접근할 수 있다.
1. 하나의 요소에 접근
querySelector의 경우, id를 찾을 때는 앞에 #을, class를 찾을 때는 .을 붙이면 된다.
const headerContainer = document.getElementById("header-container");
headerContainer.style.display = "none";
// 이런 식으로 style에 접근하여 원하는 스타일로 변경할 수도 있다.
headerContainer.textContent = "Hello";
headerContainer.innerText = "Inner Text";
// 이런 식으로 텍스트를 변경할 수도 있다.
// textContent는 해당 노드가 가지고 있는 텍스트 값을 모두 읽어오는데,
// innerText는 element내에서 사용자에게 보여지는 text값들을 가져오거나 설정할 수 있다는 차이점이 있다.
headerContainer.innerHTML = "<span>Inner Text</span>";
2. 두 개의 요소에 접근
const items = document.getElementsByClassName("list-group-item");
// 클래스 명이 "list-group-item"인 요소들을 여러 개 찾게 됨.
items[0].style.color = "blue";
items[0].style.textContent = "Hi!";
let lists = document.getElementsByTagName("li");
// lists 값들 배열로 만들어보기.
lists = Array.from(lists);
// [li.list-group-item, li.list-group-item, li.list-group-item, li.list-group-item, li.list-group-item]
// 배열 lists 순회해보기.
lists.forEach((list, index) => {
console.log(list);
// li.list-group-item
list.textContent = `${index}. List`;
});
// 홀수인 li의 nth만
const liOdd = document.querySelectorAll("li:nth-child(odd)");
// [li.list-group-item, li.list-group-item, li.list-group-item]
liOdd.forEach((li) => {
li.style.background = "gray";
});
728x90
반응형
'(심층)자바스크립트' 카테고리의 다른 글
Event 종류 (0) | 2024.09.03 |
---|---|
DOM Event (0) | 2024.09.03 |
DOM이란? (0) | 2024.08.30 |
Window Object (0) | 2024.08.28 |
자바스크립트 Loops (0) | 2024.08.28 |
@min' :: 개발을 하자
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!