자바스크립트 자식요소 접근 - Element.children

자바스크립트 자식요소 접근 - Element.children

Element.children을 이용한 자식요소 접근

HTML요소의 children 속성은 읽기 전용이며 HTMLCollection을 반환한다. 그 HTMLCollection은 호출된 HTML요소의 모든 자식요소가 포함되어 있다. 이 HTMLCollection은 element 노드들만 포함하고 있으며 모든 노드를 포함한 HTMLCollection 값을 반환 받고 싶다면 Node.childNodes 속성을 호출해야한다.

문법

// Getter collection = myElement.children; // No setter; read-only property

여기서 myElement가 호출된 HTML요소이며 collection이 HTMLCollection에 해당된다. 이 HTMLCollection은 배열 형태로 HTML요소를 참조하고 있으며 배열의 인덱스는 HTML이 작성된 순서에 따른다. 예제 코드를 살펴보자.

Document Hello world 1 Hello world 2 Hello world 3

const myElement = document.getElementById("my-element"); const htmlCollection = myElement.children; for (let i=0; i"); }

Hello world 1 Hello world 2 Hello world 3

HTMLCollection의 길이는 3이며 콜렉션의 인덱스는 태그가 작성된 순서에 따른다.

from http://tamagotch.tistory.com/23 by ccl(A) rewrite - 2021-12-19 14:01:05