DOM이란?
- Document Object Model
- 웹 문서를 제어하기 위해 개발된 언어
- 컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어
- 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화한 것
Document
: 자바스크립트에서 DOM 접근을 위해 쓰이는 Interface
- document.getElementById("id"): id 속성값으로 요소를 찾아 리턴
- document.getElementByClassName("className"): class 속성값으로 요소들을 찾아 리턴
- document.querySelection("selector"): 셀렉터를 통해 요소를 찾아 리턴
- document.querySelectorAll("selector"): 셀렉터를 통해 해당되는 요소를 찾아 리턴
let element, elements;
element = document.getElementById("id");
elements = document.getElementByClassName("className");
element = document.querySelector("selector");
elements = document.querySelectorAll("selector");
- #id: 셀렉터를 통해 특정 id 속성값을 가진 요소 찾기
- .class: 셀렉터를 통해 특정 class를 가진 요소 찾기
- tag: 셀렉터를 통해 특정 태그 찾기
document.querySelector("#id");
document.querySelector(".class-name");
document.querySelector("input");
- document.createElement(태그명): document에 새로운 태그를 만들 때 사용
<!doctype html>
<html lang="en">
<head>
<title> My first web page </title>
</head>
<body>
<h1> Hello, world! </h1>
<p> How are you? </p>
</body>
</html>
let title = document.createElement("title");
title.append("My first web page");
document.head.append(title);
let h1 = document.createElement("h1");
h1.append("Hello, world!);
let p = document.createElement("p");
p.append("How are you?");
document.body.append(h1, p);
title.innerText = "Hello World"; //My first web page → Hello World로 변경
- element.setAttribute(<attricuteName>, <attributValue>)
: 선택한 HTML 요소의 속성을 설정
- element.classList.add(클래스명)
: 지정한 클래스 값 추가
* element: HTML tag로 바로 특정할 수 있거나, id나 class 같은 속성을 가진 것들
let el = document.createElement("input");
el.setAttribute("value", "Hello World");
el.classList.add("test-class-name");
document.body.append(el);
<html>
<head></haed>
<body>
<input class="test-class-name" value="Hello World"></input>
</body>
</html>
- element.classList.toggle(클래스명)
: 클래스가 존재한다면 제거하고 false 반환, 존재하지 않으면 클래스를 추가하고 true 반환
el.classList.toggle("test-class-name");
<html>
<head></haed>
<body>
<input class="test-class-name" value="Hello World"></input>
</body>
</html>
- element.parentElement
<html>
<head></haed>
<body>
<input class="test-class-name" value="Hello World"></input>
</body>
</html>
//el.parentElement.remove() 실행 결과
<html>
<head></haed>
</html>
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 이종윤 #4주차 (JS_dom) (0) | 2024.05.20 |
|---|---|
| [2024 신입부원 기초 스터디] 박건민 #5주차 "토이 프로젝트 실습" (0) | 2024.05.19 |
| [2024 신입부원 기초 스터디] 이서영 #3주차 (JS_수정) (0) | 2024.05.16 |
| [2024 신입부원 기초 스터디] 김지나 #4주차 (0) | 2024.05.16 |
| [2024 신입부원 기초 스터디] 김민서 #4주차 (0) | 2024.05.15 |
