728x90
요소선택
자바 스크립트에서 html요소를 선택해서 제어할 수 있는데, 이러한 선택자들을 요소선택자라고 한다. 선택할 요소로는 태그, 클래스, 아이디 등을 선택할 수 있습니다. 이러한 선택자 API들을 이용해 DOM에서 Element 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다.
▶ 요소를 직접 선택하는 메서드
| 메서드 | 설명 |
|---|---|
| getElementById() | document.getElementById('content')일 경우, HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. |
| getElementsByClassName() | document.getElementByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. |
| getElementsByTagName() | document.getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. |
| getElementByName() | document.getElementByName('txt')일 경우 HTML 요소 중 name명이 'txt'인 요소들을 선택합니다. |
| querySelector() |
요소의 선택 방법이 css 선택 방법과 같습니다. 선택된 요소중 첫 번째 요소만 선택 합니다. document.querySelector('.lnb'); document.querySelector(div); document.querySelector('#gnb li'); |
| querySelectorAll() | querySelector()는 선택된 요소 중 첫 번째 요소만 선택하는 반면 querySelectorAll()는 모든 요소를 선택합니다. |
요소 선택자 사용 방법
<!DOCTYPE html>
<html lang="ko">
<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>요소를 직접 선택하는 메서드</title>
<script>
window.onload(() => {
let list1 = document.querySelector('#box1 > ul > li'); // 선택자 ID가 box1 자식의 ul 자식의 li태그 선택
let list2 = document.querySelectorAll('#box2 > ul > li'); // 선택자 ID가 box2 인 자식의 ul 자식의 모든 li태그 선택
console.log(list1); // <li>내용1</li>
console.log(list2); // NodeList(3) [0 : li, 1: li, 2 : li]
// list1.style.background = '#ff6600'; // 요소 선택자들을 이용해 css도 적용 가능합니다.
// list2[0].style.background = '#ccc'; // all같은경우 순차적으로 제일먼저 있는 요소부터 적용시킬 수 있습니다.
// list2.item(1).style.background = '#ddd'; // item 메서드를 활용하여 쓸수도 있습니다.
});
</script>
</head>
<body>
<div id="box1">
<ul>
<li>내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>
</div>
<div id="box2">
<ul>
<li>내용 4</li>
<li>내용 5</li>
<li>내용 6</li>
</ul>
</div>
</body>
</html>
결과 확인하기
<li>
::marker
"내용 1"
</li>
NodeList(3)
▶ 0 : li
▶ 1 : li
▶ 2 : li
length : 3
▶ [[Prototype]]:NodeList
728x90
반응형
'JavaScript' 카테고리의 다른 글
| 내장 함수 (4) | 2022.08.15 |
|---|---|
| Array 의 메서드 join( ) | push( ) | pop( ) (13) | 2022.08.11 |
| 전역변수와 지역변수 그리고 스코프 (11) | 2022.07.28 |
| function(함수) (17) | 2022.07.26 |
| DATATYPE(데이터타입) (12) | 2022.07.25 |
댓글