Node: thuộc tính firstChild
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc firstChild của giao diện Node trả về phần tử con đầu tiên của nút trong cây, hoặc null nếu nút không có phần tử con.
Nếu nút là một Document, thuộc tính này trả về nút đầu tiên trong danh sách các phần tử con trực tiếp của nó.
Note:
Thuộc tính này trả về bất kỳ kiểu nút nào là phần tử con đầu tiên của nút này. Nó có thể là một nút Text hoặc Comment. Nếu bạn muốn lấy phần tử Element đầu tiên là con của một phần tử khác, hãy cân nhắc dùng Element.firstElementChild.
Giá trị
Một Node, hoặc null nếu không có phần tử nào.
Ví dụ
Ví dụ này minh họa cách dùng firstChild và cách các nút khoảng trắng có thể ảnh hưởng đến việc dùng thuộc tính này.
<p id="para-01">
<span>First span</span>
</p>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
Trong ví dụ trên, console sẽ hiển thị '#text' vì một nút văn bản được chèn để duy trì khoảng trắng giữa thẻ mở <p> và thẻ <span>. Bất kỳ khoảng trắng nào cũng sẽ tạo một nút #text, từ một khoảng trắng đơn lẻ đến nhiều khoảng trắng, xuống dòng, tab, v.v.
Một nút #text khác được chèn giữa thẻ đóng </span> và </p>.
Nếu xóa khoảng trắng này khỏi mã nguồn, các nút #text sẽ không được chèn và phần tử span sẽ trở thành phần tử con đầu tiên của đoạn văn.
<p id="para-01"><span>First span</span></p>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
Bây giờ console sẽ hiển thị SPAN.
Để tránh vấn đề node.firstChild trả về các nút #text hoặc #comment, có thể dùng Element.firstElementChild để chỉ trả về nút phần tử đầu tiên.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| DOM # ref-for-dom-node-firstchild① |