요소 선택
자바스크립트에서 요소를 입맛대로 제어하기 위해서는 요소를 선택해야겠죠?
오늘은 이렇게 요소를 선택하기 위한 메서드 중 직접 선택하는 메서드에 대해서 알아보겠습니다.
요소 직접 선택 메서드
| 메서드 | 설명 |
|---|---|
| getElementByld() | document.getElementByld("content")일 경우 HTML요소 중 id 속성이 "content"인 요소를 선택합니다. |
| getElementsByClassName() | document.getElementsByClassName("menu")일 경우 HTML요소 중 class명이 "menu"인 요소들을 선택합니다. |
| getElementsByTagName() | document.getElementsByTagName("ul")일 경우 HTML요소 중 태그명이 "ul"인 요소를 선택합니다. |
| querySelector() | 요소의 선택 방법이 css선택과 같습니다. 선택된 요소 중 첫 번째 요소만 선택합니다.
document.querySelector(".lnb") document.querySelector(div) document.querySelector("#gnb li") |
| querySelectorAll() | querySelector()와 다르게 모든 요소를 선택합니다. |
[예시]
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>요소를 직접 선택하는 메서드</title>
<script>
window.onload = function() {
var list1 = document.querySelector("#box1 > ul > li"); //내용1 변수 선택
var list2 = document.querySelectorAll("#box2 > ul > li"); //모든요소를 선택 ∴변수가 배열로 저장됨
console.log(list1); //검사- console에서 확인가능
console.log(list2); //검사- console에서 확인가능
// 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>
결과보기
● 내용2
● 내용3
● 내용4
● 내용5
● 내용6
'JavaScript' 카테고리의 다른 글
| 내장 함수 (4) | 2022.08.12 |
|---|---|
| 배열 메서드(join/push/pop) (11) | 2022.08.11 |
| 지역/전역 변수 (8) | 2022.07.28 |
| 함수 (12) | 2022.07.26 |
| 데이터 타입 (9) | 2022.07.25 |
댓글