728x90
요소 선택자
자바스크립트의 내장 객체에는 작성된 요소를 선택할 수 있는 선택자가 포함되어 있습니다. 이것을 '요소 선택자'라고 합니다.
요소 선택자의 종류
요소 선택자에는 모든 요소 선택자, 아이디 요소 선택자, 클래스 요소 선택자, 태그 요소 선택자 등이 있습니다.
| 종류 | 메서드 | 설명 |
|---|---|---|
| 아이디 요소 선택자 | getElementById() |
document.getElementByld('content')와 같은 형식으로 작성합니다. 이 경우, HTML 요소 중 id 속성이 'content'인 요소를 선택합니다 |
| 클래스 요소 선택자 | getElementsByClassName() |
document.getElementsByClassName('menu')와 같은 형식으로 작성합니다. 이 경우, HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. |
| 태그 요소 선택자 | getElementsByTagName() |
document.getElementsByTagName('ul')와 같은 형식으로 작성합니다. 이 경우, HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. |
| name 요소 선택자 | getElementByName() |
document.getElementByName('txt')와 같은 형식으로 작성합니다. 이 경우, HTML 요소 중 name명이 'txt'인 요소들을 선택합니다. |
| 요소 선택자 | querySelector() |
요소의 선택 방법이 css 선택 방법과 같습니다. 선택된 요소 중 첫 번째 요소만 선택합니다. document.querySelector('.lnb') : class명이 'lnb'인 요소 중 첫 번째 요소를 선택합니다. document.querySelector(div) : 태그명이 div인 요소 중 첫 번째 요소를 선택합니다. document.querySelector('#gnb li') : id 속성이 gnb이며, 태그명이 li인 첫 번쨰 요소를 선택합니다. |
| 전체 요소 선택자 | querySelectorAll() |
querySelector()는 선택된 요소 중 첫 번째 요소만 선택하는 반면, querySelectorAll()은 모든 요소를 선택합니다. |
[ 예제 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>요소를 직접 선택하는 메서드</title>
<script>
window.onload = function() {
var list1 = document.querySelector('#box1 > ul > li');
// id 속성이 box1인 요소의 자식 요소인 ul 태그의 자식 요소인 li 태그 중 첫 번째 요소를 선택
var list2 = document.querySelectorAll('#box2 > ul > li');
// id 속성이 box2인 요소의 자식 요소인 ul 태그의 자식 요소인 li 태그 요소를 선택
console.log(list1);
console.log(list2);
// list1.style.background = '#ff6600';
// list2[0].style.background = '#ccc';
// list2.item(1).style.background = '#ddd';
};
</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>
728x90
'Javascript' 카테고리의 다른 글
| 내장 함수 알아보기 (5) | 2022.08.13 |
|---|---|
| 배열 메서드 : join() / push() / pop() (9) | 2022.08.11 |
| 전역변수와 지역변수 (6) | 2022.07.28 |
| 함수 알아보기 (13) | 2022.07.26 |
| 자료형 알아보기 (15) | 2022.07.25 |
댓글