Thuộc tính firstChild trong JavaScript
Bùi Tấn Lực - 925
- 12/09/2025
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>
So sánh firstChild với firstElementChild trong JavaScript
Sự khác nhau giữa firstChild và firstElementChild
Điểm khác biệt quan trọng nằm ở loại nút mà hai thuộc tính tìm kiếm. firstChild lấy nút con đầu tiên theo đúng thứ tự xuất hiện trong DOM, vì vậy kết quả có thể là phần tử HTML, nút văn bản hoặc nút chú thích. Ngược lại, firstElementChild bỏ qua các nút không phải phần tử và chỉ trả về phần tử HTML đầu tiên.
Điều này đặc biệt đáng chú ý khi mã HTML có xuống dòng hoặc khoảng trắng trước thẻ con. Khi đó, firstChild có thể trả về một nút văn bản chứa khoảng trắng thay vì phần tử mà bạn đang muốn thao tác. firstElementChild phù hợp hơn nếu mục tiêu luôn là phần tử HTML đầu tiên.
const parent = document.getElementById("menu");
console.log(parent.firstChild);
console.log(parent.firstElementChild);
Nếu phần tử cha chứa khoảng trắng hoặc xuống dòng trước phần tử đầu tiên, hai câu lệnh trên có thể cho ra hai loại kết quả khác nhau. Vì vậy, không nên mặc định xem firstChild và firstElementChild là hai cách viết tương đương.
Khi nào nên sử dụng firstChild?
Sử dụng firstChild khi bạn cần kiểm tra hoặc xử lý nút con đầu tiên thực sự tồn tại trong DOM, bất kể đó là phần tử HTML, văn bản hay chú thích. Thuộc tính này hữu ích khi làm việc trực tiếp với cấu trúc node và cần phân biệt các loại nút.
Chẳng hạn, nếu cần kiểm tra nút đầu tiên có phải là văn bản hay không, firstChild cho phép bạn tiếp cận đúng nút đó thay vì tự động bỏ qua nó. Đây là lựa chọn phù hợp khi thứ tự và loại node đều có ý nghĩa đối với đoạn JavaScript đang xử lý.
Tuy nhiên, nếu mục đích chỉ là lấy phần tử HTML đầu tiên, dùng firstChild có thể khiến code phát sinh lỗi khi kết quả là một text node. Trong trường hợp đó, nên cân nhắc firstElementChild.
Khi nào nên sử dụng firstElementChild?
Nên sử dụng firstElementChild khi yêu cầu của bạn là lấy phần tử HTML đầu tiên bên trong một phần tử cha. Thuộc tính này không bị ảnh hưởng bởi khoảng trắng, xuống dòng hoặc chú thích nằm trước phần tử.
const parent = document.getElementById("menu");
const firstItem = parent.firstElementChild;
if (firstItem) {
firstItem.style.color = "red";
}
Cách này đặc biệt thuận tiện khi thao tác với danh sách, menu hoặc các nhóm phần tử có cấu trúc HTML rõ ràng. Nếu không cần xử lý text node hay comment node, firstElementChild thường giúp code dễ đọc và ít gặp lỗi hơn.
Một điểm cần lưu ý là cả hai thuộc tính đều có thể trả về null khi phần tử cha không có nút con phù hợp. Vì vậy, trước khi gọi các thuộc tính hoặc phương thức tiếp theo trên kết quả, nên kiểm tra kết quả tồn tại nếu cấu trúc HTML có thể thay đổi.
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.
- 0 Bình luận
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 *
