HTML DOM firstChild 속성

<시간/>

HTML DOM의 firstChild 속성은 특정 노드의 첫 번째 자식 노드를 노드 객체로 반환하는 데 사용됩니다. 첫 번째 노드에 따라 텍스트 노드, 요소 노드 또는 주석 노드로 반환될 수 있습니다. 읽기 전용 속성입니다.

구문

다음은 HTML DOM firstChild 속성의 구문입니다 -

node.firstChild

예시

firstChild 속성에 대한 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<script>
   function getFirst() {
      var ch = document.getElementById("DIV1").firstChild.innerHTML;
      document.getElementById("Sample").innerHTML = "The first child node of the div is :"+ch;
   }
</script>
</head>
<body>
<h1>firstChild property</h1>
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
<button onclick="getFirst()">Get Child</button>
<p id="Sample"></p>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM firstChild 속성

"자식 가져오기" 버튼 클릭 시 -

HTML DOM firstChild 속성

내부에

및 요소가 있는

요소를 만들었습니다. firstChild 속성은 공백을 텍스트 노드로 간주하고 공백을 첫 번째 자식으로 만들기 때문에 div 요소 내부에 공백이 없습니다. 이 경우 undefined를 반환합니다.

<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>

그런 다음 사용자가 클릭할 때 getFirst() 메서드를 실행하는 "자식 가져오기" 버튼을 만들었습니다.

<button onclick="getFirst()">Get Child</button>

getFirst() 메서드는 우리의 경우

요소를 반환하는 firstChild 속성을 사용하여 div 요소의 첫 번째 자식을 가져옵니다. 그런 다음 innerHTML 속성을 사용하여 p 요소 내부의 텍스트를 가져오고 해당 값을 변수 ch에 할당합니다. 그런 다음 이 값은 innerHTML 속성을 사용하여 의도한 텍스트를 할당하여 ID가 "Sample"인 단락에 표시됩니다 -

function getFirst() {
   var ch = document.getElementById("DIV1").firstChild.innerHTML;
   document.getElementById("Sample").innerHTML = "The first child node of the div is :"+list;
}