Dom은, 자바스크립트로 HTML을 제어하기 위해 만들어진 "모델"이다.
이 때, 모델의 의미는 HTML을 자바스크립트에서 "객체"로 다루기 위해 만들어진 추상화된(여러 기능이 묶여 새로운 의미로 정의된) 개념이라는 뜻이다.
console.dir()
console.dir() 메서드는 브라우저의 콘솔에 내가 원하는 HTML의 요소를 객체형태로 보여주는 메서드이다.
console.dir(document)
// document 객체가 가진 (HTML에서는 head와 body요소 뿐만 아니라,
// window에 렌더링 되기 전 document가 가진 모든 객체를 보여준다고 생각하면 쉽다)
console.dir(title)
// 크롬의 about:blank에서는 공백이 console에 찍힌다.
// 이는 document의 객체 중 title이라는 key의 value인 ""이 찍힌 것이다)document.querySelector() / document.querySelectorAll() / document.getElementById()
DOM은 HTML의 요소를 만들고, 수정하고, 삭제하는 등 제어를 위한 모든 작업이 가능하다.
하지만 대부분의 경우 JS파일에서 DOM을 직접 다룰 때는 특정 요소를 제어하기 위한 용도로 사용되기 때문에,
먼저 HTML요소를 JS파일로 가져와 JS파일 안에 명시된 함수를 적용하는 방법을 살펴보고자 한다.
<!DOCTYPE html>
<html lang="en">
<head>
/* 메타데이터 생략 */
<title>Hello World!</title>
</head>
<body>
/* 명언입력 Mark-down */
<form id="wise-saying">
<input required type="text" placeholder="나만의 명언을 입력해보세요" />
</form>
<form class="userinfo">
<input required type="text" placeholder="이름을 입력해보세요" />
</form>
<form class="userinfo">
<input required type="text" placeholder="소속을 입력하세요" />
</form>
</body>
</html>이제 input 요소를 제어하고자 할 때, DOM으로 불러오고자 한다.
const wiseSayingForm = document.querySelector("#wise-saying")
// const wiseSayingForm = document.getElementById("wise-saying")
// 위의 두 코드는 같은 선택자를 불러온다
// 선택자는 css선택자와 동일하고, 만약 class 선택자를 불러올 때는
// 첫번째 경우, ".wise-saying", 두번째의 경우 document.getElementByClass로 불러오면 된다.
const wiseUserInform = document.querySelectorAll(".userinfo")
// 만약, 동일한 class를 전부 불러올 때는, 위와 같이 작성하면된다.
const wiseSayingContent = wiseSayingForm.querySeletcor("input")
// 만약, 특정 id/선택자 내부의 요소를 불러올 때는
// 기존에 쿼리셀렉터를 통해 받아온 객체가 담긴 변수를 활용하여 접근하는 것도 가능하다.DOM에서 CRUD 해보기
아래의 코드는 강의 하나를 표시하는 간단한 HTML 코드다.
해당 코드 main에 있는 div 요소들을 DOM을 갖고 제어해보고자 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 연습!!!</title>
</head>
<body>
<header>
<h1>DOM에서 요소를 CRUD로 추가해봅시당!</h1>
<p></p>
</header>
<main>
<div id="lecture">강의명 : 같이 코딩해요!</div>
<div id="instructor">강사 : hello World!</div>
<div id="ondate">최초발행날자 : 2023.01.01</div>
<div id="update">강의 업데이트 : 2023.01.01</div>
</main>
</body>
</html>
이를 활용해서, CRUD를 구현해본 JS 코드는 다음과 같다.
// "최초발행날자" 요소 변경
const ondateElement = document.getElementById("ondate");
ondateElement.textContent = "최초발행날자: 2023.02.20";
// "강의 업데이트" 요소 삭제
const updateElement = document.getElementById("update");
updateElement.remove();
// 새로운 요소 추가
const mainElement = document.querySelector("main");
const newElement = document.createElement("div");
newElement.id = "location";
newElement.textContent = "강의 장소: 제주도";
// 부모-자식 관계 설정
mainElement.appendChild(newElement);
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
| Javascript Async (0) | 2023.02.19 |
|---|---|
| 고차함수 설계 : arr.map() / arr.reduce() / arr.filter() (0) | 2023.02.16 |
| Spread and Rest Operator (+a 구조분배할당) (0) | 2023.01.30 |
| Arrow Function (0) | 2023.01.19 |
| __proto__ : 프로토타입 (0) | 2023.01.16 |
