-
[javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:42
JavaScript HTML DOM Node List
노드 목록은 노드의 집합입니다.
1. HTML DOM Node List
getElementsByTagName() 메소드는 노드 목록을 반환합니다. 노드 목록은 배열 같은 노드 집합입니다.
아래 코드는 문서의 모든 <p> 노드를 가져옵니다.
1var x = document.getElementsByTagName("p");cs 2. HTML DOM Node List Length
length 속성은 노드 목록의 노드의 수를 정의 합니다:
1234567891011121314151617181920<!DOCTYPE html><html><body><p>Hello World!</p><p>How many paragraphs in this document?</p><p>This example demonstrates the length property of a nodelist.</p><p id="demo"></p><script>var myNodelist = document.getElementsByTagName("p");document.getElementById("demo").innerHTML = myNodelist.length;</script></body></html>cs 1. 노드 목록에서 모든 <p> 요소를 가져옵니다.
2. 노드 목록의 길이를 출력합니다.
length 속성은 노드 리스트 내의 노드들을 통하여 반복문을 돌 때 유용합니다.
123456var myNodelist = document.getElementsByTagName("p");var i;for (i = 0; i < myNodelist.length; i++) {myNodelist[i].style.backgroundColor = "red";}cs * 노드 목록은 배열이 아닙니다!
노드 배열은 배열 같지만, 배열이 아닙니다. 노드 목록을 통하여 반복문을 돌아 각 노드를 배열처럼 참조 할 수 있습니다.
그러나, valueOf()나 join()과 같은 배열 메소드는 노드 목록에서 사용하면 안됩니다!
'Web > JavaScript' 카테고리의 다른 글
[javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
