<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소가져오기(접근하기)</title>
<style>
.area {
border: 1px solid;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>HTML요소에 접근하기(해당 요소 객체 가져오기)</h1>
<h3>1) 아이디를 이용하여 요소 가져오기</h3>
<div class="area" id="area1"></div>
<button onclick="accessId();">아이디로 접근</button>
<script>
function accessId() {
// 아이디로 요소 가져올 때
// document.getElementById("아이디명") => 선택된 요소객체 반환
var area1 = document.getElementById("area1");
// 선택된 요소의 속성값 가져온다거나 변경가능
// 속성 접근하고자 할 때 => 선택된요소.접근하고자하는 속성
area1.innerHTML = "아이디로 접근 성공!<br>";
// 선택된 요소에 스타일 변경
area1.style.backgroundColor = "yellow";
area1.style.color = "red";
area1.style.width = "200px";
area1.style.height = "200px";
}
</script>
<br><br>
<fieldset>
<legend>range</legend>
<!-- oninput : input에 값이 들어오는 이벤트 발생하면-->
<input type="range" name="score" min="0" max="100" value="0" oninput="document.getElementById('score').innerHTML=this.value;">
<span id="score">0</span>
</fieldset>
<!-- value -->
<input type="text" value="name">
<br><br>
<div class="area" id="area2" style="background-color: azure;"></div>
<button onclick="changeColor();">클릭마다 색 변경</button>
<script>
function changeColor() {
var area2 = document.getElementById("area2");
console.dir(area2);
console.log(area2.style.backgroundColor); // 색상 갖고오기
if(area2.style.backgroundColor == "azure") {
area2.style.backgroundColor = "blue";
} else {
area2.style.backgroundColor = "azure";
}
}
</script>
<h3>2) 태그명을 이용하여 요소 가져오기</h3>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName();">태그명으로 접근</button>
<script>
function accessTagName() {
// 태그명으로 요소를 가져올 때
// document.getElementsByTagName("태그명") => 선택된 요소객체들이 배열에 담겨서 반환
var list = document.getElementsByTagName("li"); // [li요소객체, li요소객체, ...]
console.log(list);
console.log("배열의 크기(선택된 li요소 갯수) : " + list.length);
console.log(list[0]);
list[0].innerHTML = "변경된 값";
var blueColor = 50;
for(var i=0; i<list.length; i++) {
list[i].innerHTML = "안녕" + (i+1);
list[i].style.backgroundColor = "rgb(130,220," + blueColor + ")";
blueColor += 50;
}
}
</script>
<br><br>
<h3>3) name속성을 이용하여 요소 가져오기</h3>
<form action="">
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="hobby" value="game" id="game"> <!-- id와 label for(이름 누르면 체크박스의 체크가 되는 것)의 값은 같아야 된다.-->
<label for="game">게임</label>
<input type="checkbox" name="hobby" value="movie" id="movie">
<label for="movie">영화감상</label>
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">독서</label>
<input type="checkbox" name="hobby" value="sport" id="sport">
<label for="sport">운동</label>
</fieldset>
</form>
<br>
<div class="area" id="area3"></div>
<button onclick="accessName();">name으로 접근</button>
<script>
function accessName() {
// name 속성값으로 요소 가져올 때
//document.getElementsByName("name속성값"); => 선택된 요소들이 배열에 담겨 반환
var hobby = document.getElementsByName("hobby");
console.log(hobby);
var area3 = document.getElementById("area3");
for(var i=0; i<hobby.length; i++) {
// 선택이 되어 있으면 true반환 그렇지 않으면 false반환
if(hobby[i].checked) {
area3.innerHTML += hobby[i].value + "<br>";
}
}
}
</script>
<h3>4) 클래스를 이용하여 요소 가져오기</h3>
<!--속성명=속성값-->
<div class="test"></div>
<p class="test"></p>
<ul class="test">
<li></li>
<li></li>
</ul>
<pre class="test test1"></pre>
<button onclick="accessClass();">class로 접근</button>
<script>
function accessClass() {
// class 속성으로 요소 가져올 때
// document.getElementsByClassName("class속성값") => 선택된 요소들을 배열에 담아서 반환
var arr = document.getElementsByClassName("test");
console.log(arr);
for(var i=0; i<arr.length; i++) {
console.log(arr[i]);
}
}
</script>
<h3>5) 내가 원하는 요소를 자유자재로 가져오기(선택자 활용)</h3>
<div id="test2">테스트입니다.</div>
<div class="test2">
<h2>안녕</h2>
<h2>좋은아침</h2>
</div>
<span>ㅎㅎㅎ</span>
<br>
<button onclick="accessSelector();">클릭</button>
<script>
function accessSelector() {
// 선택자를 이용하여 요소를 가져오고자 할 때
// document.querySelector("선택자(아이디면 #, 클래스면 ., 태그는 그냥 넣기)") => 선택된 첫번째 요소 객체 하나만 반환
// document.qurerySelectorAll("선택자") => 선택된 요소객체들을 배열에 담아서 반환
var divE1 = document.querySelector("#test2");
var h2E1 = document.querySelector(".test2>h2");
console.log(h2E1);
var spanE1 = document.querySelector(".test2+span");
console.log(spanE1);
var h2E2 = document.querySelectorAll(".test2>h2");
for(var i=0; i<h2E2.length; i++) {
console.log("querySelectorAll : " + h2E2[i]);
}
}
</script>
<br>
<div>
<p class="cls1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut fuga quae, vero animi, veniam hic odio saepe consequatur accusantium ea aspernatur doloremque numquam voluptate ab et voluptates obcaecati magnam excepturi!
</p>
<p class="cls2">
Nesciunt accusantium, dolorem soluta cum enim dolores earum numquam consectetur facere, adipisci doloribus at. Officiis est quo totam id a consequuntur architecto quasi, ducimus quas! Laborum quisquam et nesciunt iste.
</p>
<p class="cls1">
Dolores ipsa, ea eaque iusto odit vitae natus libero nulla incidunt impedit numquam iure tempora architecto quaerat doloremque esse iste quae pariatur vero minus non sunt asperiores repellendus! Numquam, quae!
</p>
</div>
<br>
<button onclick="select();">querySelector</button>
<button onclick="selectAll();">querySelectorAll</button>
<script>
function select() {
var p2 = document.querySelector(".cls2");
p2.style.color = "hotpink";
}
function selectAll() {
var p = document.querySelectorAll(".cls1");
for(var i=0; i<p.length; i++) {
p[i].style.color = "green";
}
}
</script>
</body>
</html>