Thuộc tính firstChild trong JavaScript

• Bùi Tấn Lực
• 127
• 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.

Bạn có thể hành động lên phần tử con đầu tiên.

Cú pháp của Thuộc tính firstChild trong JavaScript

let ketqua = tenbiencha.firstChild.hanhdong;

tenbiencha: Tên biến cha là phần tử HTML cha cần lấy thông tin phần tử con đầu tiên, thường dùng document.getElementById("giá trị id") để lấy.

hanhdong: Hành động để lấy nội dung hoặc tên thẻ,...

ketqua: Kết quả trả về.

tenbiencha.firstChild.hanhdong;

tenbiencha: Tên biến cha là phần tử HTML cha cần hành động lên phần tử con đầu tiên, thường dùng document.getElementById("giá trị id") để lấy.

hanhdong: Hành động để css hoặc tạo giá trị,...

Code Thuộc tính firstChild trong JavaScript

document.getElementById("ulid").firstChild.style.color = "red";

let valueulhtml = document.getElementById("ulid").firstChild.outerHTML;

<h3>firstChild li đầu tiên</h3>
<ul id="ulid" style="border:1px solid red;padding:20px;margin-bottom:10px" ><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" style="border:1px solid red;padding:20px;margin-bottom:10px" ><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" style="border:1px solid red;padding:20px;margin-bottom:10px"><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" style="border:1px solid red;padding:20px;margin-bottom:10px"> <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" style="border:1px solid red;padding:20px;margin-bottom:10px"><!--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;
document.getElementById("ulid").firstChild.style.color = "red";
// 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.nodeValue;
document.getElementById("kthtml").innerHTML = khoangtrang;
// firstChild chú thích đầu tiên
let chuthichhtml = document.getElementById("divcthich").firstChild.nodeValue;
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