HTML DOM firstChild 속성

HTML DOM Element 객체

firstChild읽기 전용 속성은 지정된 노드의 첫 번째 자식 노드를 Node 객체로 반환.

지정된 노드가 자식 노드가 없으면 이 메서드는공백값.

요소 내부의 공백은 텍스트로 간주되며, 텍스트는 노드로 간주되고, 주석도 노드로 간주됩니다

firstChild가 #text나 #comment 노드를 반환하는 문제를 피하기 위해 사용할 수 있습니다firstElementChild제일 먼저 발견된 요소 노드만 반환.

지정된 요소의 마지막 자식 노드를 반환하려면 사용하세요lastChild속성.

문법:

node.firstChild

<div>
　　　<p>이 DIV 안에 있는1개 P</p>
　　　<p>이 DIV 안에 있는2개 P</p>
　　　<p>이 DIV 안에 있는3개 P</p>
</div>
<script>
var x = document.querySelector("div").firstChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

하지만, DIV와 첫 번째 P 요소 사이의 공백을 제거하면 반환 값은 P 태그가 아니라 #text가 됩니다:

<div><p>이는 DIV 내부의 첫 번째1개 P</p>
　　　<p>이 DIV 안에 있는2개 P</p>
　　　<p>이 DIV 안에 있는3개 P</p>
</div>
<script>
var x = document.querySelector("div").firstChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

브라우저 호환성

모든 브라우저가 완전히 firstChild 속성을 지원합니다:

기술 세부 사항

관련 참조

HTML DOM 참조:node .lastChild 속성

HTML DOM 참조:node .childNodes 속성

HTML DOM 참조:node .parentNode 속성

HTML DOM 참조:node .nextSibling 속성

HTML DOM 참조:node .previousSibling 속성

HTML DOM 참조:node .nodeName 속성

HTML DOM Element 객체