Thuộc tính firstChild của phần tử HTML DOM Element

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

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

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

firstChild Thuộc tính và childNodes[0] Cùng nhau.

Lưu ý

firstChild Trả về phần tử con đầu tiên: phần tử元素, phần tử văn bản hoặc phần tử chú thích.

Khoảng trống giữa các phần tử cũng là phần tử văn bản.

Giải pháp thay thế:

Thuộc tính firstElementChild - firstElementChild Thuộc tính trả về phần tử con đầu tiên (bỏ qua phần tử văn bản và phần tử chú thích).

Xem thêm:

Thuộc tính childNodes

Thuộc tính lastChild

Thuộc tính nextSibling

Thuộc tính previousSibling

Thuộc tính của phần tử

Thuộc tính parentNode

Thuộc tính nodeName

Thuộc tính nodeType

Thuộc tính nodeValue

Mô hình

Ví dụ 1

Trả về nội dung HTML của phần tử con đầu tiên của phần tử <ul>:

document.getElementById("myList").firstChild.innerHTML;

Thử trực tiếp

Ví dụ 2

Lấy văn bản của phần tử con đầu tiên của phần tử <select>:

let text = document.getElementById("mySelect").firstChild.text;

Thử trực tiếp

Ví dụ 3

Ví dụ minh họa về sự干扰 của khoảng trống.

Thử lấy tên của phần tử con đầu tiên của "myDIV":

<div id="myDIV">
  <p>Trông giống con đầu tiên</p>
  <p>Trông giống con cuối cùng</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Thử trực tiếp

Ví dụ 4

Nhưng, nếu bạn xóa khoảng trống từ nguồn, thì "myDIV" không có nút #text:

<div id="myDIV"><p>Con đầu tiên</p><p>Con cuối cùng</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Thử trực tiếp

Nút HTML và phần tử HTML

Trong HTML DOMtrong Document Object Model (DOM), tài liệu HTML là tập hợp các nút có (hoặc không có) nút con.

NútLà nút phần tử, nút văn bản và nút chú thích.

Phần tửKhoảng trống giữa chúng cũng là nút văn bản.

Phần tử chỉ là nút phần tử.

Nút con và thành phần con

childNodes Trả vềNút con（nút phần tử, nút văn bản và nút chú thích）.

children Trả vềThành phần con（không phải là nút văn bản và nút chú thích）.

firstChild và firstElementChild

firstChild Trả về phần tử đầu tiênNút con（nút phần tử, nút văn bản hoặc nút chú thích）。Khoảng trống giữa các phần tử cũng là nút văn bản.

firstElementChild Trả về phần tử đầu tiênThành phần con（không trả về các nút văn bản và nút chú thích）.

lastChild và lastElementChild

lastChild Trả về phần tử cuối cùngNút con（nút phần tử, nút văn bản hoặc nút chú thích）。Khoảng trống giữa các phần tử cũng là nút văn bản.

lastElementChild Trả về phần tử cuối cùngThành phần con（không trả về các nút văn bản và nút chú thích）.

Cú pháp

element.firstChild

hoặc

node.firstChild

Trả về giá trị

Loại Mô tả
Nút

Nút con đầu tiên của nút.

Nếu không có con, thì trả về null.

Hỗ trợ trình duyệt

element.firstChild Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ