document.getElementsByName(name) :
body 내의 특정 name 속성을 가진 모든 요소들을 찾을 수 있다.
📦 반환값 :
- NodeList(정확히는 NodeListOf<HTMLElement>)를 반환한다.
- 이 NodeList는 배열처럼 생겼지만 진짜 배열은 아니며, 반복은 가능하지만 .forEach나 length, 인덱스 접근만 지원한다.
- name 속성을 가진 모든 요소들을 포함한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>practice</title>
</head>
<body>
<div name="element"></div>
<div name="element"></div>
<div name="element"></div>
</body>
<script>
const div = document.getElementsByName("element");
console.log(div);
div.forEach((a) => {
console.log(a);
});
</script>
</html>
document.getElementById(ID) :
HTML 문서 안에서 특정 id(고유한 값) 값을 가진 요소 하나를 가져온다.
📦 반환값 :
- 해당 id 값을 가진 하나의 요소(Element) 를 반환한다.
- 만약 해당 id를 가진 요소가 없다면 null을 반환한다.
- id는 문서 내에서 유일해야 하므로, 이 메서드는 항상 단 하나의 요소만 반환한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>practice</title>
</head>
<body>
<div id="element">1</div>
<div id="element">2</div>
<div id="element">3</div>
</body>
<script>
const div = document.getElementById("element");
console.log(div);
</script>
</html>고유한 값을 가져야 하지만, 맨 위의 값을 가져온다는 것을 알려주기 위해 여러 개의 동일한 ID를 넣었다.
document.getElementsByClassName(class name) :
HTML 요소의 class 속성을 기준으로 요소들을 가져온다.
📦 반환값 :
- HTMLCollection (유사 배열 객체) 반환한다.
- 조건에 맞는 모든 요소들을 반환한다.
- 실시간 컬렉션이라 DOM이 바뀌면 내용도 바뀐다.
- 배열처럼 length, 인덱스로 접근 가능하지만, 진짜 배열은 아니다. (map, forEach는 직접 못 쓴다.)
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>practice</title>
</head>
<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
<script>
const div = document.getElementsByClassName("element");
console.log(div);
console.log(div[0]);
console.log(div[1]);
console.log(div[2]);
</script>
</html>
document.querySelector(css 선택자) :
주어진 CSS 선택자 에 일치하는 문서 내 첫 번째 요소를 반환한다.
📦 반환값 :
- 가장 처음 매칭되는 요소 하나만 반환한다. (Element)
- 매칭되는 게 없다면 null을 반환한다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>practice</title>
</head>
<body>
<div id="element"></div>
<div class="element"></div>
<div class="element">
<div></div>
<input type="text" />
</div>
</body>
<script>
const id = document.querySelector("#element");
const class1 = document.querySelector(".element");
const class2 = document.querySelector(".element > div");
const class3 = document.querySelector(".element input[type='text']");
console.log(id);
console.log(class1);
console.log(class2);
console.log(class3);
</script>
</html>CSS 선택자
- # : id
- . : class
- > : 바로 아래 자 요소
- input[type='text'] : type이 text인 input
document.querySelectorAll(css 선택자) :
CSS 선택자 문법을 사용해, 문서 내에서 일치하는 모든 요소들을 NodeList 형태로 반환한다.
📦 반환값 :
- NodeList: 배열처럼 인덱스로 접근 가능 ([0], [1].. 등)
- length 속성 있다.
- forEach 사용 가능 (실제로는 배열은 아니다)
- 정적인 리스트이라 DOM 변경되어도 자동으로 바뀌지 않는다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>practice</title>
</head>
<body>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
</body>
<script>
const element = document.querySelectorAll(".element");
console.log(element);
element.forEach((a) => {
console.log(a);
});
</script>
</html>선택자는 querySelector와 동일하다.
'HTML, CSS, Javascript' 카테고리의 다른 글
| [Javascript] 요소를 붙이는 다양한 방법 (0) | 2025.04.13 |
|---|---|
| [Javascript] HTML 문서에 새 요소 붙이는 방법 (0) | 2025.04.12 |
| [Javascript] addEventListner로 이벤트 적용하기 (0) | 2025.04.12 |
| JavaScript : arrow function (0) | 2025.01.21 |
| HTML, CSS : 나만의 Playlist 디자인하기 (0) | 2025.01.13 |
