HTML DOM firstElementChild 속성은 주어진 요소의 첫 번째 자식 요소를 반환하는 데 사용됩니다. 자식 요소는 요소 노드로만 반환됩니다. 텍스트 및 주석 노드를 무시하고 고려하지 않습니다. 읽기 전용 속성입니다.
구문
다음은 HTML DOM firstElementChild 속성의 구문입니다 -
element.firstElementChild
예시
firstElementChild 속성에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<script>
function eleChild() {
var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first element child node of the div is :"+ch;
}
</script>
</body>
</html>
<h1>firstElementChild property</h1>
<div id="DIV1">
<p>This is a p element</p>
<span>This is a span element</span>
</div>
<button onclick="eleChild()">Get Child</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
"자식 가져오기" 방법을 클릭하면 -
위의 예에서 -
사용자가 클릭할 때 eleChild() 메서드를 실행하는 "자식 가져오기" 버튼을 만들었습니다. −
<button onclick="eleChild()">Get Child</button>
eleChild() 함수는 id가 "DIV1"인 div의 firstElementChild를 가져오고 innerHTML 속성을 변수 ch에 할당합니다. firstElementChild는 공백을 고려하지 않기 때문에
요소를 반환합니다. innerHTML 속성을 사용하여
요소 내부의 텍스트를 가져와서 ID가 "Sample" -
인 단락에 표시합니다.function eleChild() {
var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first element child node of the div is :"+ch;
}