HTML DOM children 속성은 지정된 요소의 모든 자식 요소를 HTML 컬렉션 형태로 반환하는 데 사용됩니다. 읽기 전용 속성입니다. 얻은 요소는 0부터 시작하는 색인 번호를 사용하여 액세스할 수 있습니다.
요소는 HTML 문서에 있는 것과 동일한 순서로 나타납니다. 자식 노드만 포함하고 childNode 속성과 같은 공백 및 주석은 포함하지 않습니다.
구문
다음은 children 속성의 구문입니다 -
element.children
HTML DOM 하위 속성의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>Click the button below to find out the number of div element children</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element </p>
</div>
<p id="Sample"></p>
<script>
function myChild() {
var x = document.getElementById("DIV1").children.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
COUNT 버튼 클릭 시 -
위의 예에서 -
우리는
를 만들었습니다. ID가 "DIV1"인 요소이며 내부에 두 개의 단락이 있습니다. 다른 요소와 구별하기 위해 색상 테두리와 약간의 여백을 추가했습니다.
div {
border: 1px solid blue;
margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div> 그런 다음 사용자가 클릭할 때 myChild() 함수를 실행할 COUNT 버튼을 만들었습니다.
<button onclick="myChild()">COUNT</button>
myChild() 함수는 id가 "DIV1"인 요소를 가져와서 우리의 경우
요소이고 children.length 속성 값을 가져와 변수 x에 할당합니다. 여기서 중요한 것은 children 속성은 공백과 주석을 고려하지 않으므로 두 개의
요소만 고려하고 children.length는 2를 반환합니다. 이 값은 innerHTML( ) 방법 -
function myChild() {
var x = document.getElementById("DIV1").children.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}