예
의 첫 번째 자식 노드의 HTML 콘텐츠 가져 오기 <ul> 요소를 :
var x = document.getElementById("myList").firstChild.innerHTML;X의 결과는 다음과 같습니다
Coffee »그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
firstChild 속성은 노드 객체로, 지정된 노드의 첫 번째 자식 노드를 반환합니다.
이 속성 간의 차이 firstElementChild는 , firstChild는 요소 노드, 텍스트 노드 또는 주석 노드와 제 자식 노드를 반환하는 것이다 (depending on which one's first) firstElementChild는 요소 노드와 제 자식 노드를 리턴하면서, (ignores text and comment nodes) .
참고 : 요소 내부의 공백은 텍스트로 간주되며, 텍스트 노드로 간주된다 (See "More Examples") .
이 속성은 읽기 전용입니다.
팁 : 사용 요소 .childNodes의 지정된 노드의 자식 노드를 반환하는 속성을. childNodes에 [0] firstChild와 동일한 결과를 생성한다.
팁 : 지정된 노드의 마지막 자식 노드를 반환 사용 lastChild 속성을.
브라우저 지원
| 재산 | |||||
|---|---|---|---|---|---|
| firstChild | 예 | 예 | 예 | 예 | 예 |
통사론
node .firstChild기술적 세부 사항
| 반환 값 : | 자식 노드가없는 경우 노드, 또는 null의 첫 번째 자식을 나타내는 노드 객체, |
|---|---|
| DOM 버전 | 코어 레벨 1 노드 개체 |
더 예
예
이 예에서는 공백이 속성 interfare 수 방법을 보여줍니다.
a의 첫 번째 자식 노드의 노드 이름 얻기 <div> 요소를 :
<!--
Whitespace inside elements is considered as text, and text is
considered as nodes
In this example, there is whitespace before <p>,
before <span> and after <span>
Therefore, the first child
node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks
like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById( "myDIV" ).firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>X의 결과는 다음과 같습니다
#text »그것을 자신을 시도 예
우리는 소스에서 공백을 제거하면 그러나 것 <DIV>에는하는 #text 노드가없는 <p> 요소 첫 번째 자식 노드는 :
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById( "myDIV" ).firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>X의 결과는 다음과 같습니다
P »그것을 자신을 시도 예
a의 첫 번째 자식 노드의 텍스트 가져 오기 <select> 요소를 :
var x = document.getElementById("mySelect").firstChild.text;X의 결과는 다음과 같습니다
Audi »그것을 자신을 시도 관련 페이지
HTML DOM 참조 : 노드입니다. lastChild 속성
HTML DOM 참조 : 노드입니다. childNodes에 등록
HTML DOM 참조 : 노드입니다. 인 parentNode 속성
HTML DOM 참조 : 노드입니다. 로 nextSibling 속성
HTML DOM 참조 : 노드입니다. previousSibling은 속성
HTML DOM 참조 : 노드입니다. 여기서 nodeName 속성