예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DOM Interaction</title>
<script src="app.js" defer></script>
</head>
<body>
<header><h1 id="main-title">Dive into the DOM!</h1></header>
<ul>
<li>Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
<input type="text" value="default text">
</body>
</html>getElementById 
querySelector 
- 클래스 이름이나 태그로 요소를 선택하는 경우는
querySelector를 주로 사용한다.- 예외 : ID를 사용해서 고유한 요소를 얻을 땐
getElementById를 사용하지만 집합 요소나 복잡한 쿼리가 있는 하나의 요소는querySelector를 사용하는 것이 좋다.
- 예외 : ID를 사용해서 고유한 요소를 얻을 땐
- li 클래스가 있는 모든 항목을 선택하려면 list-item을 입력하는데 CSS코드에서도 사용할 선택자가 필요하기 때문에 클래스를 선택할 때는 앞에
.을 추가한다.
예제
1) 
querySelector 는 첫 번째로 일치한 항목을 반환하며 일치하는 모든 항목을 반환하려면 querySelectorAll 을 사용한다.
2)
CSS 선택자 - 순서없는 목록에서 첫 번째로 나오는 항목 선택
3) 
CSS 선택자 - 순서없는 목록에서 마지막으로 나오는 항목 선택
선택한 요소 참조 저장하기
getElementById 
기본적으로 다른 선택 메서드들은 지원이 되지만 getElementById는 요소 자체를 선택하기 때문에 h1 요소 일 경우 h1 요소 내에서만 검색을 하여 자식 요소는 찾을 수 없다.
querySelector
const test = document.querySelector('ul');
참고
기록하는 습관 ✏️ 공유하고 싶은 정보들 🔎