Thuộc tính firstChild trong JavaScript

• Bùi Tấn Lực
• 29
• 12/09/2025

Thuộc tính firstChild trong JavaScript dùng để lấy nút con đầu tiên của phần tử HTML, nút con bao gồm thẻ HTML, khoảng trắng, chú thích,..., chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính firstChild trong JavaScript

Chức năng của Thuộc tính firstChild trong JavaScript

Thuộc tính firstChild trong JavaScript dùng để lấy nút con đầu tiên của phần tử HTML, nút con bao gồm thẻ HTML, khoảng trắng, chú thích,...

Bạn có thể xem vị trí đầu tiên trong phần tử HTML là cái gì bằng cách alert() ra để xem.

Bạn có thể lấy HTML, giá trị,... của các thẻ HTML nằm ở vị trí đầu tiên.

Code Thuộc tính firstChild trong JavaScript

<h3>firstChild li đầu tiên</h3>
<ul id="ulid"><li>Trang chủ</li><li>Giới thiệu</li><li>Blog</li><li>Liên hệ</li></ul>
<div>Lấy nút con đầu tiên là thẻ ul (HTML): <span id="ulhtml"></span></div>
<h3>firstChild p đầu tiên</h3>
<div id="divp"><p>Xin Chào!</p><p>Cảm ơn!</p></div>
<div>Lấy nút con đầu tiên là thẻ p (HTML): <span id="phtml"></span></div>
<h3>firstChild input đầu tiên</h3>
<div id="divinput"><input type="text" value="1"><input type="text" value="2"></div>
<div>Lấy nút con đầu tiên là thẻ input(Value): <span id="inputhtml"></span></div>
<h3>Khoảng trắng đầu tiên</h3>
<div id="divkt"> <input type="text" value="1"><input type="text" value="2"></div>
<div>Lấy nút con đầu tiên là khoảng trắng(html): <span id="kthtml"></span></div>
<h3>firstChild chú thích đầu tiên</h3>
<div id="divcthich"><!--Chú thích--><p>Xin Chào!</p></div>
<div>Lấy nút con đầu tiên là chú thích (HTML): <span id="cthichhtml"></span></div>
<script>
// firstChild li đầu tiên
let valueulhtml = document.getElementById("ulid").firstChild.outerHTML;
alert(valueulhtml);
document.getElementById("ulhtml").innerHTML = valueulhtml;
// firstChild p đầu tiên
let valuephtml = document.getElementById("divp").firstChild.innerHTML;
document.getElementById("phtml").innerHTML = valuephtml;
// firstChild input đầu tiên
let inputvalue = document.getElementById("divinput").firstChild.value;
document.getElementById("inputhtml").innerHTML = inputvalue;
// Khoảng trắng đầu tiên
let khoangtrang = document.getElementById("divkt").firstChild.innerHTML;
document.getElementById("kthtml").innerHTML = khoangtrang;
// firstChild chú thích đầu tiên
let chuthichhtml = document.getElementById("divcthich").firstChild.innerHTML;
document.getElementById("cthichhtml").innerHTML = chuthichhtml;
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính firstChild trong JavaScript.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thuộc tính firstChild trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn