요소 선택
요소를 직접 선택하는 메서드
| 메서드 | 설명 |
|---|---|
| getElementByld() | document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. |
| getElementByClassName() | document.getElementByClassName('menu')일 경우 HTML 요소 중 class 속성이 'menu'인 요소를 선택합니다. |
| getElementByTagName() | document.ggetElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소를 선택합니다. |
| getElementByName() | document.getElementByName('txt')일 경우 HTML 요소 중 name명이 'txt'인 요소를 선택합니다. |
| querySelector() | 요소의 선택 방법이 css 선택 방법과 같습니다. 선택된 요소 중 첫번째 요소만 선택합니다. document.querySelector('.lnd') 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 = function(){
var list = document.querySelector('#box1 > ul > li');
var list = document.querySelectorAll('#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>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</div>
</body>
</html>
위에서 querySelectorAll()로 요소를 선택했을 경우 모든 요소가 선택 되기 때문에 변수에 베열로 저장이 됩니다.
변수에 저장된 요소들은 배열 선택 방법과 item()메서드를 이용하여 개별 선택할 수 있습니다.
var list = document.querySelector('#box1 > ul > li');
list2[0].style.background = "#ccc";
/list2.item(1).style.background = "#ddd";
'Javascript' 카테고리의 다른 글
| 내장 함수 (4) | 2022.08.13 |
|---|---|
| join()/ push()/ pop() (8) | 2022.08.11 |
| 지역 변수와 전역 변수 (4) | 2022.07.28 |
| 함수 (7) | 2022.07.26 |
| 데이터 타입 (4) | 2022.07.26 |
댓글