DOM
Element(태그 or 노드) 선택
element와 태그와 node는 같은 의미임.
getElement~/getElements~
ID는 고유함. 단일값 반환
나머지는 배열로 반환
DOM에서 document라고 하면 문서의 모든 곳에서 찾고,
특정 element를 쓰면 그 태그에서만 찾게 할 수 있다.
<!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>
</head>
<body>
<button id="btn">버튼</button>
<input type="checkbox" name="inter" value=1>java
<input type="checkbox" name="inter" value=2>js
<input type="checkbox" name="inter" value=3>css
<input type="checkbox" name="inter" value=4>html
<script>
//element == node == 태그
var btn = document.getElementById("btn");
var inter = document.getElementsByName("inter");//name이 inter인 태그 - 반환이 배열
btn.onclick=function(){
for(var i=0;i<inter.length;i++){
console.log(inter[i]);
}
}
</script>
<hr>
<button id="btn2">버튼2</button>
<input type="radio" name="aaa" class="hello" value="1">프로그램
<input type="radio" name="aaa" class="hello" value="2">디자인
<input type="radio" name="aaa" class="hello" value="3">네트워크
<input type="radio" name="aaa" class="hello" value="4">보안
<script>
var btn2=document.getElementById("btn2");
var hello = document.getElementsByClassName("hello")//class명이 hello인 태그 -반환이 배열
btn2.onclick=function(){
for(var i=0;i<hello.length;i++){
console.log(hello[i]);
}
}
</script>
<hr>
<button id="btn3">버튼3</button>
<ul id="bye">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<ul>
<li>목록4</li>
<li>목록5</li>
<li>목록6</li>
</ul>
<script>
var btn3 = document.getElementById("btn3");
var bye=document.getElementById("bye");//id가 bye인 태그
var li=bye.getElementsByTagName("li");//bye인 태그에서 탐색
console.log(li);
var li2 = document.getElementsByTagName("li");
console.log(li2);
btn3.onclick=function(){
for(var i=0;i<li2.length;i++){
console.log(li2[i]);
}
}
</script>
</body>
</html>
이것들을 한번에 하는 게 가능
1. querySelector() : 요소 선택 방법이 css와 동일(가장 첫번째 요소만 선택)
2. querySelectorAll() : 요소 선택 방법이 css와 동일(모든 태그 선택). 배열형으로.
즉, ul안에 li가 여러개 있으면 1의 방법은 첫번째 li만, 2의 방법은 모든 li를 가져옴
<!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>
</head>
<body>
<button id="btn">쿼리셀렉터확인</button>
<ul class="box">
<li>hi</li>
<li>bye</li>
<li>good afternoon</li>
</ul>
<script>
var btn = document.querySelector("#btn");//css선택자로 얻습니다.
var li = document.querySelector(".box li");//li태그를 얻습니다(단일)
console.log(li);
var lis = document.querySelectorAll(".box>li");
console.log(lis);
btn.onclick = function(){
li.innerHTML='hello';
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
}
</script>
</body>
</html>
'JS' 카테고리의 다른 글
| 221229 JS DOM,속성제어 실습1 (0) | 2022.12.29 |
|---|---|
| 221229 JS 속성제어 (0) | 2022.12.29 |
| 221229 JS BOM &DOM (0) | 2022.12.29 |
| 221229 JS 이벤트핸들러 실습 (0) | 2022.12.29 |
| 221229 JS this (0) | 2022.12.29 |
