HTML DOM 요소 자식 노드
요소 개체예시
<body> 요소의 자식 노드를 가져옵니다.
const nodeList = document.body.childNodes;
아래에 더 많은 예가 있습니다.
정의 및 사용
속성 은 childNodes
요소의 자식 노드 컬렉션(목록)을 반환합니다.
childNodes
속성은 NodeList 개체를 반환합니다 .
속성 은 childNodes
읽기 전용입니다.
메모
요소 내부의 공백은 텍스트 노드로 간주됩니다.
주석도 노드로 간주됩니다.
childNodes[0]
와 동일합니다 firstChild
.
차이점
속성은 텍스트 노드와 주석 노드를 포함한 childNodes
모든 자식 노드 를 반환하는 반면 속성은 자식 요소children
만 반환합니다 .
또한보십시오:
노드 목록
NodeList는 Node Object의 배열과 유사한 컬렉션(목록)입니다.
NodeList에는 목록의 노드 수를 반환 하는 길이 속성이 있습니다.
노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
통사론
element.childNodes
반환 값
유형 | 설명 |
물체 | 노드 의 NodeList 개체 컬렉션입니다. 노드는 문서에 나타나는 대로 정렬됩니다. |
더 많은 예
<div> 요소의 자식 노드 수:
let numb = document.getElementById("myDIV").childNodes.length;
두 번째 자식 노드의 배경색을 변경합니다.
document.getElementById("myDIV").childNodes[1].style.backgroundColor = "yellow";
<select> 요소의 세 번째 자식 노드의 텍스트를 가져옵니다.
let text = document.getElementById("mySelect").childNodes[2].text;
브라우저 지원
element.childNodes
DOM 레벨 1(1998) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
요소 개체