09009
[JS] DOM 조작 기초 본문
핵심 API
DOM 조작
- 엘리먼트 접근 : ~.getElement(s)By~, parent, children, closest(특정 위치에서 가장 가까운것), querySelector, *querySelectorAll
- 스타일 변경 : (엘리먼트).style.~ , class 조작
- 내부 값 변경: innerText, (주의 사항 innerHTML 사용 금지 - 초기화 작업 빼고)
- 엘리먼트 생성: createElement
- 엘리먼트 붙이기: appendChild
- 엘리먼트 삭제
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.style.color = "red";
b1.style.fontSize = "3em";
}
</script>
</head>
<body>
<ul>
<li> <span>안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button>버튼2</button>
<button>버튼3</button>
<button>버튼4</button>
<button>버튼5</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
위의 사례처럼 웬만하면 스타일 직접 건들지 말것
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span>안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button>버튼2</button>
<button>버튼3</button>
<button>버튼4</button>
<button>버튼5</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button>버튼3</button>
<button>버튼4</button>
<button>버튼5</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
querySelectorAll
위와 똑같은 결과
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}querySelector: 첫번째것 한 개만 선택, 배열 반환 아님. (주의)
document: 사이트 전체에 해당하는 범위
getElementsByClassName: 여기저기 있을 수 있어서 특정 element에 접근한다.
- 두번째 ul에 있는 안녕만 바꾸고 싶을 때
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c2List = u1.getElementsByClassName("c1");
for(c2 of c2List) {
c2.innerText = "야호";
}
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button>버튼4</button>
<button>버튼5</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c2List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button>버튼4</button>
<button>버튼5</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
5번 버튼 클릭
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c1List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
function test4() {
const b1 = document.getElementById("b1");
b1.parentElement.children[1].innerText = "O";
// children: 배열 parent: 배열 아님
}
function test5() {
const li = document.createElement("li"); // li 태그를 만들겠다
const span1 = document.createElement("span");
span1.innerText = "블라블라..";
const span2 = document.createElement("span");
span2.innerText = "X";
// 순서 중요
li.appendChild(span1);
li.appendChild(span2);
// 접근
const u2 = document.getElementById("u2");
u2.appendChild(li);
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button onclick="test4()">버튼4</button>
<button onclick="test5()">버튼5</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
setAttribute, getAttribute
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c1List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
function test4() {
const b1 = document.getElementById("b1");
b1.parentElement.children[1].innerText = "O";
// children: 배열 parent: 배열 아님
}
function test5() {
const li = document.createElement("li"); // li 태그를 만들겠다
const span1 = document.createElement("span");
span1.innerText = "블라블라..";
const span2 = document.createElement("span");
span2.innerText = "X";
// 순서 중요
li.appendChild(span1);
li.appendChild(span2);
// 접근
const u2 = document.getElementById("u2");
u2.appendChild(li);
}
function test6() {
const b1 = document.getElementById("b1");
b1.setAttribute("hello", "hi");
b1.setAttribute("onclick", "alert('야호')");
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button onclick="test4()">버튼4</button>
<button onclick="test5()">버튼5</button>
<button onclick="test6()">버튼6</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c1List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
function test4() {
const b1 = document.getElementById("b1");
b1.parentElement.children[1].innerText = "O";
// children: 배열 parent: 배열 아님
}
function test5() {
const li = document.createElement("li"); // li 태그를 만들겠다
const span1 = document.createElement("span");
span1.innerText = "블라블라..";
const span2 = document.createElement("span");
span2.innerText = "X";
span2.setAttribute("onclick", "deleteRow(this)");
// 순서 중요
li.appendChild(span1);
li.appendChild(span2);
// 접근
const u2 = document.getElementById("u2");
u2.appendChild(li);
}
function test6() {
const b1 = document.getElementById("b1");
b1.setAttribute("hello", "hi");
b1.setAttribute("onclick", "alert('야호')");
}
function deleteRow(element) {
element.innerText = "과연";
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button onclick="test4()">버튼4</button>
<button onclick="test5()">버튼5</button>
<button onclick="test6()">버튼6</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c1List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
function test4() {
const b1 = document.getElementById("b1");
b1.parentElement.children[1].innerText = "O";
// children: 배열 parent: 배열 아님
}
function test5() {
const li = document.createElement("li"); // li 태그를 만들겠다
const span1 = document.createElement("span");
span1.innerText = "블라블라..";
const span2 = document.createElement("span");
span2.innerText = "X";
span2.setAttribute("onclick", "deleteRow(this)");
// 순서 중요
li.appendChild(span1);
li.appendChild(span2);
// 접근
const u2 = document.getElementById("u2");
u2.appendChild(li);
}
function test6() {
const b1 = document.getElementById("b1");
b1.setAttribute("hello", "hi");
b1.setAttribute("onclick", "alert('야호')");
}
function deleteRow(element) {
// li를 삭제해야 위가 삭제됨
element.parentElement.remove();
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button onclick="test4()">버튼4</button>
<button onclick="test5()">버튼5</button>
<button onclick="test6()">버튼6</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
버튼7
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c1List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
function test4() {
const b1 = document.getElementById("b1");
b1.parentElement.children[1].innerText = "O";
// children: 배열 parent: 배열 아님
}
function test5() {
const li = document.createElement("li"); // li 태그를 만들겠다
const span1 = document.createElement("span");
span1.innerText = "블라블라..";
const span2 = document.createElement("span");
span2.innerText = "X";
span2.setAttribute("onclick", "deleteRow(this)");
// 순서 중요
li.appendChild(span1);
li.appendChild(span2);
// 접근
const u2 = document.getElementById("u2");
u2.appendChild(li);
}
function test6() {
const b1 = document.getElementById("b1");
b1.setAttribute("hello", "hi");
b1.setAttribute("onclick", "alert('야호')");
}
function deleteRow(element) {
// li를 삭제해야 위가 삭제됨
element.parentElement.remove();
}
function test7() {
const templete = document.getElementById("rowTemplete");
const cloned1 = templete.cloneNode(true);
cloned1.classList.remove("d-none");
document.getElementById("u2").appendChild(cloned1);
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<!-- d-none: 부트스트랩 -->
<li id="rowTemplete" class="d-none"> <span>....</span> <span>X</span></li>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button onclick="test4()">버튼4</button>
<button onclick="test5()">버튼5</button>
<button onclick="test6()">버튼6</button>
<button onclick="test7()">버튼7</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
class 명 안 붙게 clone
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script>
function test1() {
// const b1 = document.getElementById("b1");
const b1 = document.querySelector("#b1");
b1.classList.add("my");
// b1.classList.remove("my");
b1.innerText = "반갑습니다"; // 진짜 중요하다.
}
function test2() {
// 클래스 여러 개 선택
// const c1List = document.getElementsByClassName("c1"); // 배열로 반환, 변수에 list 붙이는 것이 좋다
const c1List = document.querySelectorAll(".c1");
// const c1 = document.querySelector(".c1"); 배열 아님. 조건에 맞는 첫번째 것만.
for(c1 of c1List) {
c1.innerText = "값을 변경합니다~";
}
}
function test3() {
const u1 = document.getElementById("u2");
const c1List = u1.getElementsByClassName("c1");
for(c1 of c1List) {
c1.innerText = "야호";
}
}
function test4() {
const b1 = document.getElementById("b1");
b1.parentElement.children[1].innerText = "O";
// children: 배열 parent: 배열 아님
}
function test5() {
const li = document.createElement("li"); // li 태그를 만들겠다
const span1 = document.createElement("span");
span1.innerText = "블라블라..";
const span2 = document.createElement("span");
span2.innerText = "X";
span2.setAttribute("onclick", "deleteRow(this)");
// 순서 중요
li.appendChild(span1);
li.appendChild(span2);
// 접근
const u2 = document.getElementById("u2");
u2.appendChild(li);
}
function test6() {
const b1 = document.getElementById("b1");
b1.setAttribute("hello", "hi");
b1.setAttribute("onclick", "alert('야호')");
}
function deleteRow(element) {
// li를 삭제해야 위가 삭제됨
element.parentElement.remove();
}
function test7() {
const templete = document.getElementById("rowTemplete");
const cloned1 = templete.cloneNode(true);
cloned1.classList.remove("d-none");
cloned1.removeAttribute("id");
// clone - removeAttribute
document.getElementById("u2").appendChild(cloned1);
}
</script>
<style>
.my {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<ul>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<ul id="u2">
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span id="b1">안녕</span> <span>X</span></li>
<li> <span>안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
<li> <span class="c1">안녕</span> <span>X</span></li>
</ul>
<!-- d-none: 부트스트랩 -->
<li id="rowTemplete" class="d-none"> <span>....</span> <span>X</span></li>
<button onclick="test1()">버튼1</button>
<button onclick="test2()">버튼2</button>
<button onclick="test3()">버튼3</button>
<button onclick="test4()">버튼4</button>
<button onclick="test5()">버튼5</button>
<button onclick="test6()">버튼6</button>
<button onclick="test7()">버튼7</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>'Front-End > Javascript' 카테고리의 다른 글
| [JavaScript] 변수, 스코프, 생성자 함수 (0) | 2024.05.08 |
|---|---|
| [JavaScript] 날짜 변환 함수 정리 (0) | 2024.04.09 |
| [Javascript] 프레임 애니메이션 (0) | 2023.04.04 |
| [Javascript] 입력 양식 포커스 - 회원가입 양식 (0) | 2023.04.04 |
| [Javascript] 이벤트 (0) | 2023.04.03 |
'Front-End/Javascript' Related Articles
more
Comments