요소에 접근하기
HTML 요소에 접근하기( 해당 요소 객체를 가져오는 것 )
1) 아이디 속성을 이용하여 요소 가져오기
<button onclick="accessId()">아이디로 접근</button>
<div id="area1" class="area">1번 영역</div>
<script>
function accessId() {
// 아이디 속성으로 요소 접근
// document.getElementById("아이디명") -> 해당 요소객체 반환
let area1 = document.getElementById("area1");
// 선택된 요소의 속성값을 조회하거나 변경하고자 할 때
// 선택된요소.속성명
// "아이디로 접근 성공!" 내용으로 변경
// area1.innerHTML = area1.innerHTML + "<br>아이디로 접근 성공!";
area1.innerHTML += "<br>아이디로 접근 성공!";
if (area1.style.background != "skyblue") {
area1.style.background = "skyblue";
} else {
area1.style.background = "green";
}
area1.style.color = "yellow";
area1.style.width = "200px";
area1.style.height = "100px";
}
</script>
2) 태그명으로 요소 가져오기
<button onclick="accessTagName();">태그명으로 접근</button>
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
<script>
function accessTagName() {
// 태그명으로 접근
// document.getElementsByTagName("태그명"); => 선택된 요소객체들이 배열로 반환
let list = document.getElementsByTagName("li"); // [li, li, li, ...]
console.log(list);
console.log("배열의 길이 : " + list.length);
// console.log(list[0]);
console.log("첫번째 요소 : " + list[0].innerHTML);
// Java에서 --> for(int i=0; i<list.length; i++) {}
for(let i=0; i < list.length; i++) {
console.log(list[i].innerHTML);
// i번째 위치의 li 태그에 내용을 "1번째 li요소입니다" 변경
list[i].innerHTML = (i+1) + "번째 li요소입니다.";
// 글자색을 빨간색으로 변경
list[i].style.color = "red";
}
}
</script>
3) name 속성을 이용하여 요소 가져오기
<form action="">
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="hobby" id="all" value="전체선택"
onchange="allCheck();">
<label for="all">전체 선택</label>
<input type="checkbox" name="hobby" id="fishing" value="낚시"
onchange="checkboxTrigger()">
<label for="fishing">낚시</label>
<input type="checkbox" name="hobby" id="game" value="게임"
onchange="checkboxTrigger()">
<label for="game">게임</label>
<input type="checkbox" name="hobby" id="hiking" value="등산"
onchange="checkboxTrigger()">
<label for="hiking">등산</label>
</fieldset>
</form>
<script>
// 전체 선택 체크박스에 대한 이벤트 처리
function allCheck() {
// all 이라는 id 속성을 가진 요소 접근
let all = document.getElementById("all");
console.log(all.checked);
// name 속성의 값이 hobby인 요소들에 접근
let hList = document.getElementsByName("hobby"); // [E, E, E, ...]
for (let checkbox of hList) {
// console.log(checkbox);
// 모든 체크박스에 "전체 선택"에 대한 체크 상태를 적용
checkbox.checked = all.checked;
}
}
// 취미 관련 체크박스에 대한 이벤트 처리
function checkboxTrigger() {
// 전체 체크박스 이외에 다른 체크박스들의 상태에 따라서
// 전체 체크박스의 상태를 true, false로 변경
// - true : 모든 체크박스들이 체크되어 있을 때 (상태가 모두 true)
// - false : 하나라도 false인 상태의 체크박스가 있을 때
let allChecked = true;
// name 속성으로 체크박스 요소 배열 접근
let hList = document.getElementsByName("hobby");
// 반복문 내에서 체크된 상태를 확인
for (let h of hList) {
// console.log(h.value);
if (h.value == "전체선택") {
continue;
}
if (!h.checked) {
allChecked = false;
}
}
// 결과에 따라 전체 체크박스 상태 변경
document.getElementById("all").checked = allChecked;
}
</script>
4) class 속성으로 접근
<div class="test"></div>
<p class="test"></p>
<ul class="test">
<li></li>
<li></li>
</ul>
<pre class="test test1 test2"></pre>
<button onclick="accessClass();">class로 접근</button>
<script>
function accessClass() {
// class 속성으로 요소에 접근 --> 요소들이 배열에 담겨져서 가져오게 될 것!
let list = document.getElementsByClassName("test");
console.log(list);
for(let unit of list) {
unit.innerHTML = 'test 클래스를 가지는 요소';
}
}
</script>
5) 내 마음대로 자유롭게 접근 (선택자 활용)
<div id="tmp1">
테스트!!!!
<h3>?zzz</h3>
</div>
<div class="tmp2">
<h3>**스쿠나**</h3>
<h3>고죠</h3>
</div>
<span>그런거 몰라요...</span>
<h3>주술회전이에요!</h3>
<br>
<button onclick="accessSelector()">내맘대로접근하기</button>
<script>
function accessSelector() {
// 선택자를 이용하여 요소에 접근할 때
// 1) document.querySelector("선택자");
// => 선택자에 해당하는 요소 한개만 반환
// 2) document.querySelectorAll("선택자");
// => 선택자에 해당하는 모든 요소를 배열에 담아서 반환
let divTest = document.querySelector("#tmp1"); // -> div
console.log(divTest);
let ele2 = document.querySelectorAll(".tmp2 > h3"); // -> [E, .. ]
// console.log(ele2);
for(let e of ele2) {
console.log(e.innerText);
}
let ele3 = document.querySelector(".tmp2 + span");
console.log(ele3.innerText);
let ele4 = document.querySelector("span + h3");
ele4.innerText = "주술회전이야!";
}
</script>