getElementsByClassName() 메서드1
라라리라
2023.09.04 / Step 2 [DOM_속성변경] - 코딩 44 일차 본문
_0201_id로변경.html
<!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>getElementById()</title>
</head>
<body>
<!-- <p style="color:red" id="content">getElementById() 메서드</p> -->
<p id="content">getElementById() 메서드</p>
<script>
let obj = document.getElementById("content");
// 텍스트 색상 변경
obj.style.color = "red";
</script>
</body>
</html>
getElementById() 메서드
_0202_class로변경.html
<!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>getElementsByClassName()</title>
<style>
div {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="content">
<p>getElementsByClassName() 메서드1</p>
</div>
<!-- <div style="background-color: red;" class="content"> -->
<div class="content">
<p>getElementsByClassName() 메서드2</p>
</div>
<script>
let collection = document.getElementsByClassName("content")[1];
// 배경 색상 변경
collection.style.backgroundColor = "red";
</script>
</body>
</html>
getElementsByClassName() 메서드2
_0203_tag로변경.html
<!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>getElementsByTagName()</title>
</head>
<body>
<p>getElementsByTagName() 메서드1</p>
<p>getElementsByTagName() 메서드2</p>
<p>getElementsByTagName() 메서드3</p>
<script>
let collection = document.getElementsByTagName("p");
let colorList = ["red", "tomato", "green"];
// 배경색상 변경
for(let i=0; i<collection.length; i++) {
// collection[i].style.backgroundColor = "yellow";
collection[i].style.backgroundColor = colorList[i];
}
</script>
</body>
</html>
getElementsByTagName() 메서드1
getElementsByTagName() 메서드2
getElementsByTagName() 메서드3
_0204_name으로변경.html
<!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>getElementsByName()</title>
</head>
<body>
<h3 id="target">과목 선택</h3>
HTML<input type="checkbox" name="subject" value="html">
CSS<input type="checkbox" name="subject" value="css">
JavaScript<input type="checkbox" name="subject" value="javascript">
<!-- JavaScript<input type="checkbox" name="subject" value="javascript" checked> -->
<script>
let list = document.getElementsByName("subject");
// 체크박스 체크로 변경
for(let i=0; i<list.length; i++) {
list[i].checked = true;
}
</script>
</body>
</html>
과목 선택
HTML CSS JavaScript
_0205_querySelector로변경.html
<!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>querySelector()</title>
</head>
<body>
<div>
<!-- <p style="border: 1px solid black;">div안의 p태그</p> -->
<p>div안의 p태그</p>
</div>
<p>p태그</p>
<script>
let element = document.querySelector("div > p");
// 테두리 변경
element.style.border = "1px solid black";
</script>
</body>
</html>
div안의 p태그
p태그
_0206_querySelectorAll로변경.html
<!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>querySelectorAll()</title>
</head>
<body>
<p class="content">querySelectorAll() 메서드1</p>
<p class="content">querySelectorAll() 메서드2</p>
<script>
// 태그 선택
let list = document.querySelectorAll("p.content");
for(let i=0; i<list.length; i++) {
// 텍스트 굵기 변경
list[i].style.fontWeight = "bold";
}
</script>
</body>
</html>
querySelectorAll() 메서드1
querySelectorAll() 메서드2
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.06 / Step 3 [DOM_이벤트] - 코딩 46 일차 (0) | 2023.09.06 |
|---|---|
| 2023.09.05 / Step 3 [DOM_이벤트] - 코딩 45 일차 (0) | 2023.09.05 |
| 2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차 (0) | 2023.08.31 |
| 2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차 (0) | 2023.08.30 |
| 2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차 (0) | 2023.08.29 |