XML DOM HTMLCollection 객체

HTMLCollection 객체

HTMLCollection은 HTML 요소의 집합을 나타내는 인터페이스로, 목록을 순회할 수 있는 메서드와 속성을 제공합니다.

HTML DOM의 HTMLCollection은 '살아있는' 것입니다; 기본 문서가 변경될 때, 이 변경은 모든 HTMLCollection 객체를 통해 즉시 표시됩니다.

아래의 각 항목(그리고 그들이 지정하는 속성)은 HTMLCollection을 반환합니다:

  • Document (images, applets, links, forms, anchors)
  • form (elements)
  • map (areas)
  • select (options)
  • table (rows, tBodies)
  • tableSection (rows)
  • row (cells)

HTMLDocument 인터페이스의 많은 속성은 HTMLCollection 객체로, 문서의 요소들(如表单, 이미지, 링크 등)에 쉽게 접근할 수 있도록 합니다.form.elements 그리고 select.options 도 HTMLCollection 객체입니다. HTMLCollection은 또한 순회를 제공합니다. Table 의 각 행과 TableRow 의 각 셀을 쉽게 처리하는 방법입니다.

이전에 언급했듯이, HTMLCollection 객체는 메서드를 가진 HTML 요소의 집합입니다. 이를 통해 문서 내 위치나 id 속성, name 속성을 통해 요소를 얻을 수 있습니다. JavaScript에서 HTMLCollection 객체는 읽기 전용 배열과 같은 행동을 보이며, JavaScript의 괄호를 사용하여 번호나 이름 인덱스를 통해 HTMLCollection 객체를 인덱싱할 수 있습니다. namedItem() 호출 없이도. item() 메서드그리고 namedItem() 메서드.

HTMLCollection 객체는 읽기 전용이며, 새로운 요소를 추가할 수 없습니다. JavaScript 배열 문법을 사용해도 마찬가지입니다.

HTMLCollection 객체와 NodeList 객체매우 유사하지만, 이전의 경우 이름 인덱스와 숫자 인덱스를 모두 사용할 수 있습니다.

HTMLCollection 객체의 속성

속성 설명
cssRules 읽기 전용 속성으로, 목록 길이를 나타내는 정수를 반환합니다. (즉, 집합의 요소 수입니다).

HTMLCollection 객체의 메서드

메서드 설명
item() 지정된 위치의 요소(노드)를 반환합니다.
namedItem() 이름(name) 속성이나 id 속성이 지정된 값을 가진 요소(노드)를 반환합니다.

예제

var c = document.forms;		//이는 form 요소의 하나의 HTMLCollection 객체입니다
var firstform = c[0];		//숫자 배열로 사용할 수 있습니다
var lastform = c[c.length-1];	//length 속성은 요소 수를 반환합니다
var address = c["address"];		//연관 배열로 사용할 수 있습니다
var address = c.address;		//JavaScript는 이러한 표현법을 허용합니다

관련 페이지

XML DOM 참조 매뉴얼:HTMLDocument 객체

XML DOM 참조 매뉴얼:NodeList 객체

참조 매뉴얼:HTML DOM 참조 매뉴얼