- 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 브라우저가 HTML 페이지를 인식하게 해줌
- 웹 페이지를 이루는 요소들을 js가 이용할 수 있게 브라우저가 트리 구조로 만든 객체 모델
돔 조작
DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작 가능
<button class="btn">Click</button>const btn = document.querySelector(".btn");
btn.onclick = function () {
this.style.backgroundColor = "red";
};
클릭 시
dom 접근 방법
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button class="btn" id="button" name="Click">Click</button>
<script>
const btnclass = document.querySelector(".btn"); //class로 접근
const btnid = document.getElementById("button"); //id로 접근
const btnName = document.getElementsByName("Click"); //name으로 접근
const btnTag = document.getElementsByTagName("button"); //tag로 접근
btnclass.addEventListener("mouseover", function () {
this.style.backgroundColor = "blue";
});
btnclass.addEventListener("mouseout", function () {
this.style.backgroundColor = "";
});
for (let i = 0; i < btnTag.length; i++) {
btnTag[i].style.width = "100px";
}
for (let i = 0; i < btnName.length; i++) {
btnName[i].textContent = "123";
}
</script>
</body>
</html>
요소 생성
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.item {
border: 1px solid black;
border-bottom: none;
list-style: none;
}
.item:last-child {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container" class="container">
<ul class="list-group">
<li class="item">A</li>
<li class="item">B</li>
</ul>
</div>
<script defer>
const li = document.createElement("li");
li.className = "item";
li.setAttribute("name", "NewItem");
li.innerText = "C";
document.querySelector("ul.list-group").appendChild(li);
</script>
</body>
</html>
요소 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.item {
border: 1px solid black;
border-bottom: none;
list-style: none;
}
.item:last-child {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container" class="container">
<ul class="list-group">
<li class="item">A</li>
<li class="item">B</li>
</ul>
</div>
<script defer>
const ul = document.querySelector("ul");
const list = document.querySelectorAll("li");
ul.removeChild(list[1]);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.item {
border: 1px solid black;
border-bottom: none;
list-style: none;
}
.item:last-child {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container" class="container">
<ul class="list-group">
<li class="item">A</li>
<li class="item">B</li>
</ul>
</div>
<script defer>
const ul = document.querySelector("ul");
const list = document.querySelectorAll("li");
list[1].remove();
</script>
</body>
</html>
요소 교체
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.item {
border: 1px solid black;
border-bottom: none;
list-style: none;
}
.item:last-child {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container" class="container">
<ul class="list-group">
<li class="item">A</li>
<li class="item">B</li>
</ul>
</div>
<script defer>
const ul = document.querySelector("ul");
const list = document.querySelectorAll("li");
const newElement = document.createElement("span");
newElement.textContent = "hello";
ul.replaceChild(newElement, list[0]);
</script>
</body>
</html>
