|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!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>
<div id="box1" class="divbox">박스1입니다.</div>
<div id="box2" class="divbox">박스2입니다.</div>
<div id="box3" class="divbox">박스3입니다.</div>
<div id="box4" class="divbox">박스4입니다.</div>
<div id="box5" class="divbox">박스5입니다.</div>
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
<li>text5</li>
</ul>
<script>
console.log(document.getElementById("box1"));
//id명 box1 element(요소) 선택/콘솔 출력
console.log(document.querySelector("#box2"));
//id명 box2 element(요소) 선택/콘솔 출력
console.log(document.getElementsByClassName("divbox"));
//클래스명 divbox element(요소) 전체 선택/콘솔 출력
console.log(document.getElementsByTagName("li"));
//태그명 li element(요소) 전체 선택/콘솔 출력
console.log(document.querySelectorAll("li"));
//태그명 li element(요소) 전체 선택/콘솔 출력
let i = [1, 2, 3, 4, 5, 6, 7];
//예시를 만들기위해 배열을 만들었음
console.log(i);
</script>
</body>
</html>
|
cs |
예를 들어보기 위해 html을 작성해보았다
1. 단수 선택 (하나만 선택)
1) document.getElementById("id명");
하나의 id명이 있는 element(요소)를 선택할 수 있음!!
예시
id명이 box1인 element를 선택하고 콘솔로 출력한 결과
console.log(document.getElementById("box1"));
라고 잘 출력됨(제대로 선택됐다는 것임)
2) document.querySelector("css선택자 그대로") - 자주 사용함
하나의 id명("#id"), class명(".class"), 태그명("1개의 태그명(여러 태그중 하나만 선택하고 싶으면 태그명:nth-child(number), first-child, last-child)") element(요소)를 선택할 수 있음!!
(id명으로 선택해도 되고 class명 선택해도 되고 태그명 선택해도 되고 사용자 마음임!!)
예시
id명이 box2인 element를 선택하고 콘솔로 출력한 결과
console.log(document.querySelector("#box2"));
라고 잘 출력됨(제대로 선택됐다는 것임)
2. 복수 선택
html 컬렉션(유사배열) & 노드리스트(유사배열) 밑에 링크에 있음(설명이 아직은 쫌 부족함...)
2022.12.03 - [javascript/DOM] - html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이
1) document.getElementByclassName("class명") - html 컬렉션(유사배열)
class명이 같은 element(요소)를 다 선택할 수 있음!!
예시
class명이 divbox인 element들을 선택하고 콘솔로 출력한 결과
console.log(document.getElementByclassName("divbox"));
라고 유사배열형태로 잘 출력됨(제대로 선택됐다는 것임)
2) document.getElementByTagName("tag명") - html컬렉션(유사배열)
태그명이 같은 element(요소)를 다 선택할 수 있음!!
예시
태그명이 li인 element들을 선택하고 콘솔로 출력한 결과
console.log(document.getElementByTagName("li"));
라고 유사배열형태로 잘 출력됨(제대로 선택됐다는 것임)
3) document.querySelectorAll("css선택자 그대로") - 노드리스트(유사배열) - 자주 사용
id명("#id"), class명(".class"), 태그명("li")이 같은 element(요소)를 다 선택할 수 있음!!
(id명으로 선택해도 되고 class명 선택해도 되고 태그명 선택해도 되고 사용자 마음임!!)
예시
태그명이 li인 element들을 선택하고 콘솔로 출력한 결과
console.log(document.querySelectorAll("li"));
라고 유사배열형태로 잘 출력됨(제대로 선택됐다는 것임)
주의!!!!!
html에 없는 태그에 접근 할 시 null 출력됨 // null은 존재하지 않음이라는 의미
'javascript > javascript HTML DOM' 카테고리의 다른 글
| [javascript]HTML 내용, 속성, 스타일 변경하기 (0) | 2022.12.03 |
|---|---|
| [javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 (0) | 2022.12.03 |
| [javascript]change이벤트 실습1 (0) | 2022.12.03 |
| 불 끄고 켜기 실습 (0) | 2022.12.01 |
| [javascript]요소 노드 생성 및 요소 노드 자식 추가 (0) | 2022.11.29 |
댓글