● CSS 선택자
1. querySelector("선택자")
- 선택자에 포함된 태그 중 첫번째로 찾은 태그 한 개 가져오기
2. querySelectorAll("선택자")
- 선택자에 포함된 태그 전부 가져오기
실습(DOM(1))
1. name을 이용한 선택
<!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>name을 이용한 선택</title>
</head>
<body>
<h1>name 속성을 이용한 선택</h1>
<form action="joinForm">
<div>
<input type="text" name="id" placeholder="아이디" value="hgd1234">
</div>
<div>
<input type="password" name="pw" placeholder="비밀번호" value="1234">
</div>
<div>
<input type="checkbox" name="language" value="java" checked="checked"> JAVA
<input type="checkbox" name="language" value="c"> C
<input type="checkbox" name="language" value="python"> Python
</div>
</form>
</body>
<script>
const checkboxes = document.getElementsByName("language");
checkboxes.forEach(function(checkbox) {
checkbox.checked = true;
});
// HTML 태그에 checked 속성을 부여하면, js checked 프로퍼티를 false로 설정해도
// checked 속성이 HTML 요소에 남아있다.
// 따라서 체크 여부를 검사할 때에는 JS 프로퍼티로 검사하는 것이 정확하다.
checkboxes.forEach((checkbox) => {
console.log(checkbox.checked);
console.log(checkbox.getAttribute("checked")); // HTML의 속성을 가져온다.
checkbox.checked = false;
});
// 사용자가 입력한 아이디와 패스워드를 콘솔에 출력한다.
const inputId = document.getElementsByName("id");
const inputPw = document.getElementsByName("pw");
console.log(inputId[0].value);
console.log(inputPw[0].value);
</script>
</html>
실습(DOM(2))
- 아이디를 이용한 선택
<!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">
<style>
/*
css에서는 아이디가 중복되어도 모든 스타일이 적용된다.
★ 하지만 어떤 개발자도 이렇게(아이디를 중복해서) 쓰지 않는다.
*/
/* #odd {
color:red;
} */
</style>
<title>아이디를 이용한 선택</title>
</head>
<body>
<h1>아이디를 이용한 선택</h1>
<div id="odd">
첫 번째 DIV 입니다.
</div>
<div>
두 번째 DIV 입니다.
</div>
<div id="odd">
세 번째 DIV 입니다.
</div>
</body>
<script>
// 아이디가 중복된 상태에서는 첫 번째만 가져온다.
const div = document.getElementById("odd");
console.log(div);
div.style.color = "red";
</script>
</html>
실습(DOM(3))
1. CSS 선택자를 이용한 선택
- 공통
<!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>CSS 선택자를 이용한 선택</title>
</head>
<body>
<h1>CSS 선택자를 이용한 선택</h1>
<ul>
<li class="odd">순대</li>
<li class="even">떡볶이</li>
<li class="odd">탕수육</li>
<li class="even">피자</li>
<li class="odd">튀김</li>
</ul>
</body>
</html>
- 홀수는 글자색을 빨간색으로 변경
<!DOCTYPE html>
......
</body>
<script>
const li_odd = document.querySelectorAll("li.odd");
li_odd.forEach(function(li) {
li.style.color = "red";
});
</script>
</html>
- 짝수는 글자색을 마젠타(magenta)로 변경
<!DOCTYPE html>
......
</body>
<script>
const li_even = document.querySelectorAll("li.even");
li_even.forEach(function(li) {
li.style.color = "magenta";
});
</script>
</html>
※ 위의 내용을 딱 1줄로 변경
<!DOCTYPE html>
......
</body>
<script>
// getElementsByTagName()으로 가져오면 forEach 람다를 사용할 수 없다.
// 람다를 사용하고 싶다면 querySelectorAll()을 사용한다.
const liAll = document.querySelectorAll("li");
liAll.forEach(li => {li.style.color = li.getAttribute("class") == "odd" ? "red" : "magenta"});
</script>
</html>
- 결과
'웹 개발 > JavaScript' 카테고리의 다른 글
| [Web_JavaScript] 13 (0) | 2022.05.09 |
|---|---|
| [Web_JavaScript] 12 (0) | 2022.05.08 |
| [Web_JavaScript] 10 (0) | 2022.05.06 |
| [Web_JavaScript] 09 (0) | 2022.05.05 |
| [Web_JavaScript] 08 (0) | 2022.05.04 |
