HTMLCollection 객체
1.
getElementsByTagName() 메서드는 HTMLCollection 객체 반환.
2.
HTMLCollection 객체는 배열과 유사하게 생겼지만 배열은 아닌 HTML 요소 리스트임.
3.
배열은 아니지만, 배열처럼 색인번호 (index) 이용해 각 HTML 요소에 접근 가능.
4.
색인번호는 0부터 시작.
5.
배열 아니기 때문에 배열 메서드 사용 불가.
(예) valueOf(), push() , pop() , join()
6.
NodeList 객체와 비교 (유사점, 차이점)
<h2>홈짱닷컴 Homzzang.com</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<p id="demo"></p>
<script>
var ps = document.getElementsByTagName("p");
var text = ps[1].innerHTML; // 2번째 P요소 텍스트
document.getElementById("demo").innerHTML = text;
</script>
결과보기
HTMLCollection 개수
1.
length 속성 : HTMLCollection 안의 요소 개수
2.
HTMLCollection 요소 반복문 적용 시 매우 유용. (2번째 예제)
<h2>홈짱닷컴 Homzzang.com</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<p id="demo"></p>
<script>
var ps = document.getElementsByTagName("p");
var num = ps.length;
document.getElementById("demo").innerHTML = num; // 4
</script>
결과보기
<h2>홈짱닷컴 Homzzang.com</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var ps = document.getElementsByTagName("p");
var i;
for (i = 0; i < ps.length; i++) {
ps[i].style.color = "red";
}
}
</script>
결과보기
