Thuộc tính HTML DOM firstChild

Thuộc tính firstChild trả về nút con đầu tiên (child node) của một nút cụ thể dưới dạng đối tượng node. Có thể trả về nút văn bản (text node), nút phần tử (element node) hoặc nút chú thích (comment node) tùy thuộc vào nút nào ở đầu. Đây là thuộc tính chỉ đọc (read-only).

Cú pháp

node.firstChild

Ví dụ

Ví dụ lấy nút con đầu tiên của div (không có khoảng trắng):

<!DOCTYPE html>
<html>
<head>
<script>
  function getFirstChild() {
    var childHTML = document.getElementById("DIV1").firstChild.innerHTML;
    document.getElementById("Sample").innerHTML = "Nút con đầu tiên của div là: " + childHTML;
  }
</script>
</head>
<body>
<h1>Thuộc tính firstChild</h1>
<div id="DIV1"><p>Đây là phần tử p</p><span>Đây là phần tử span</span></div>
<button onclick="getFirstChild()">LẤY CON ĐẦU</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Sau khi nhấn nút "LẤY CON ĐẦU", hiển thị: "Nút con đầu tiên của div là: Đây là phần tử p".

Giải thích

• Div id="DIV1" viết liền các thẻ con (<p>...</p><span>...</span>) để tránh khoảng trắng (whitespace) thành text node đầu tiên.
• Nút "LẤY CON ĐẦU" gọi hàm getFirstChild().
• Hàm lấy .firstChild của div (trả về <p> vì không có whitespace), lấy .innerHTML.
• Lưu ý: Nếu có khoảng trắng/newline trước <p>, firstChild sẽ trả về text node (whitespace) và .innerHTML sẽ là undefined.