<table id="table">
<tr>
<td>일</td><td>이</td>
</tr>
<tr>
<td>삼</td><td>사</td>
</tr>
</table>
<script>
// '이'가 적힌 td를 가져옴(첫 번째 줄, 두 번째 칸)
let td = table.rows[0].cells[1];
td.style.backgroundColor = "red"; // 강조
</script>
* table.rows[0].cells[1] 로 접근 가능
요소 검색하기
요소들이 가까이에 붙어있지 않을 경우 위의 탐색 프로퍼티를 사용해서 원하는 요소에 접근하기 어려울 수 있다. 이럴 때 메서드를 이용해서 특정 요소를 검색할 수 있다.
querySeletorAll
주로 사용하는 것이 elem.querySelectorAll(css) 인데, elem의 자식 요소중에서 css 선택자에 해당하는 요소 모두를 반환한다. CSS 선택자를 활용할 수 있기 때문에 아주 유용하다. (* 가상 클래스(pseudo-class)도 사용 가능)
querySelector
elem.querySelector(css)는 주어진 css 선택자에 해당하는 첫 번째 요소를 반환한다 (* elem.querySelectorAll(css)[0] 와 동일한 동작)
getElementBy*
Id, Name, TagName 등 검색 기준에 따라 메서드를 선택해서 사용 가능하다. 메서드명이 getElementBy 뒤에 검색 기준이 붙는다.
(ex) getElementById, getElementsByName, getElementsByTagName, getElementsByClassName ... (+ getElementsByTagName 와 같이 요소 여러 개를 담은 컬랙션을 반환하는 메서드는 Elements로 "s"가 포함된다.)
querySelectorAll와 getElementsBy* 차이점
'getElementsBy'로 시작하는 메서드는 문서에 변경이 있을 때마다 컬렉션이 '자동 갱신’되어 최신 상태를 유지한다. 반면,querySelectorAll은정적인컬렉션을 반환한다. 컬렉션이 한 번 확정되면 변경되지 않는다.
<div>첫 번째 div</div>
<script>
let divs = document.getElementsByTagName('div');
alert(divs.length); // 1
</script>
<div>두 번째 div</div>
<script>
alert(divs.length); // 2
</script>
문서에 새로운 div 가 추가되어도 querySeletorAll 은 이를 반영하지 못한다.
<div>첫 번째 div</div>
<script>
let divs = document.querySelectorAll('div');
alert(divs.length); // 1
</script>
<div>두 번째 div</div>
<script>
alert(divs.length); // 1
</script>
