HTML DOM firstChild Thuộc tính

Thí dụ

Lấy nội dung HTML của nút con đầu tiên của phần tử <ul>:

var x = document.getElementById("myList").firstChild.innerHTML;

Thêm các ví dụ "Hãy tự mình thử" bên dưới.

Định nghĩa và Cách sử dụng

Thuộc tính firstChild trả về nút con đầu tiên của nút được chỉ định, dưới dạng một đối tượng Node.

Sự khác biệt giữa thuộc tính này và firstElementChild , là firstChild trả về nút con đầu tiên dưới dạng nút phần tử, nút văn bản hoặc nút nhận xét (tùy thuộc vào thuộc tính nào đầu tiên), trong khi firstElementChild trả về nút con đầu tiên dưới dạng nút phần tử (bỏ qua văn bản và các nút bình luận).

Lưu ý: Khoảng trắng bên trong các phần tử được coi là văn bản và văn bản được coi là các nút (Xem "Ví dụ khác").

Thuộc tính này là chỉ đọc.

Mẹo: Sử dụng thuộc tính phần tử .childNodes để trả về bất kỳ nút con nào của một nút được chỉ định. childNodes [0] sẽ cho kết quả giống như firstChild.

Mẹo: Để trả về nút con cuối cùng của một nút được chỉ định, hãy sử dụng thuộc tính lastChild .

Hỗ trợ trình duyệt

Property
firstChild	Yes	Yes	Yes	Yes	Yes

Cú pháp

node.firstChild

Chi tiết kỹ thuật

Giá trị trả lại:	Một đối tượng Node, đại diện cho nút con đầu tiên của nút hoặc null nếu không có nút con nào
Phiên bản DOM	Đối tượng nút cấp độ lõi 1

Các ví dụ khác

Thí dụ

Trong ví dụ này, chúng tôi chứng minh cách khoảng trắng có thể ảnh hưởng đến thuộc tính này.

Lấy tên nút của nút con đầu tiên của phần tử <div>:

<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>

Thí dụ

Tuy nhiên, nếu chúng tôi xóa khoảng trắng khỏi nguồn, thì sẽ không có nút #text nào trong <div>, điều này sẽ làm cho phần tử <p> trở thành nút con đầu tiên:

<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>