Thuộc tính firstElementChild trong JavaScript

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

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

Thuộc tính firstElementChild trong JavaScript dùng để lấy nội dung chữ, html, giá trị,... hoặc tác động lên phần tử con đầu tiên nằm trong thẻ HTML cha, thuộc tính này không lấy khoảng trắng và chú thích.

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

let ketqua = tenbiencha.firstElementChild.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 hoặc dùng 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 để lấy thông tin.

ketqua: Kết quả trả về

tenbiencha.firstElementChild.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 hoặc dùng 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 tác động lên phần tử con đầu tiên.

Code Thuộc tính firstElementChild trong JavaScript

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

let valueulhtml = document.getElementById("ulid").firstElementChild.innerHTML;

<h3>firstElementChild 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>Phần tử HTML đầu tiên của thẻ ul (HTML): <span id="ulhtml"></span>, Loại thẻ: <span id="ulloaithe"></span></div>

<h3>firstElementChild option trong select đầu tiên</h3>
<select id="selectid">
 <option value="Trang chủ" >Trang chủ</option>
 <option value="Giới thiệu" >Giới thiệu</option>
 <option value="Blog" >Blog</option>
 <option value="Liên hệ" >Liên hệ</option>
</select>
<div>Phần tử HTML đầu tiên của thẻ select (HTML): <span id="selecthtml"></span></div>

<h3>firstElementChild p đầu tiên</h3>
<div id="divp">
<!--firstElementChild p đầu tiên-->
<p>Xin Chào!</p>
<p>Cảm ơn!</p>
</div>
<div>Phần tử HTML đầu tiên là thẻ p (HTML): <span id="phtml"></span></div>

<h3>firstElementChild input đầu tiên</h3>
<div id="divinput">
<input type="text" value="1">
<input type="text" value="2">
</div>
<div>Phần tử HTML đầu tiên là thẻ input(Value): <span id="inputhtml"></span></div>
<script>
// firstElementChild li đầu tiên
let valueulhtml = document.getElementById("ulid").firstElementChild.innerHTML;
document.getElementById("ulhtml").innerHTML = valueulhtml;
let loaithehtml = document.getElementById("ulid").firstElementChild.tagName;
document.getElementById("ulloaithe").innerHTML = loaithehtml;
document.getElementById("ulid").firstElementChild.style.fontSize = "40px";
document.getElementById("ulid").firstElementChild.style.color = "red";

// firstElementChild option trong thẻ select đầu tiên
let selecthtml = document.getElementById("selectid").firstElementChild.value;
document.getElementById("selecthtml").innerHTML = selecthtml;
// firstElementChild p đầu tiên
let valuephtml = document.getElementById("divp").firstElementChild.innerHTML;
document.getElementById("phtml").innerHTML = valuephtml;
// firstElementChild input đầu tiên
let inputvalue = document.getElementById("divinput").firstElementChild.value;
document.getElementById("inputhtml").innerHTML = inputvalue;
</script>

Chạy Thử

Những Điều Cần Biết Khi Sử Dụng firstElementChild

Khi làm việc với DOM, firstElementChild rất hữu ích để lấy phần tử HTML đầu tiên bên trong một phần tử cha. Tuy nhiên, kết quả có thể khác với những gì bạn mong đợi nếu nhầm lẫn giữa phần tử và node hoặc không kiểm tra trường hợp phần tử cha không có phần tử con.

firstElementChild trả về gì khi phần tử cha không có phần tử con?

Nếu phần tử cha không chứa bất kỳ phần tử HTML nào, firstElementChild sẽ trả về null. Đây là điểm cần lưu ý khi tiếp tục truy cập thuộc tính hoặc thay đổi nội dung của kết quả.

Chẳng hạn, đoạn mã sau kiểm tra kết quả trước khi thao tác để tránh lỗi khi không tìm thấy phần tử con:

const parent = document.querySelector(".box");
const firstChild = parent.firstElementChild;

if (firstChild) {
    firstChild.textContent = "Nội dung mới";
}

Cách kiểm tra này đặc biệt cần thiết khi HTML được tạo động hoặc cấu trúc DOM có thể thay đổi trong quá trình chạy JavaScript.

Phân biệt firstElementChild với firstChild trong JavaScript

firstElementChild chỉ quan tâm đến phần tử HTML đầu tiên, trong khi firstChild lấy node đầu tiên của phần tử cha. Node này có thể là phần tử, văn bản hoặc loại node khác.

Ví dụ, khoảng trắng hoặc ký tự xuống dòng trong HTML có thể được trình duyệt xem là text node. Vì vậy, firstChild có thể trả về node văn bản thay vì phần tử HTML mà bạn muốn xử lý.

const parent = document.querySelector(".box");

console.log(parent.firstChild);
console.log(parent.firstElementChild);

Nếu mục tiêu là lấy phần tử HTML đầu tiên để thay đổi nội dung, thuộc tính hoặc thao tác DOM, firstElementChild thường phù hợp hơn.

Khi nào nên sử dụng firstElementChild thay vì children[0]?

Cả firstElementChild và children[0] đều có thể giúp lấy phần tử HTML đầu tiên. Tuy nhiên, firstElementChild thể hiện rõ ý định ngay trong tên thuộc tính: lấy phần tử con đầu tiên.

Trong trường hợp chỉ cần phần tử đầu tiên, cách viết này thường trực quan và dễ đọc:

const firstItem = document.querySelector(".list").firstElementChild;

Ngược lại, children[0] phù hợp hơn khi bạn đã cần truy cập tập hợp các phần tử con để xử lý theo vị trí. Việc lựa chọn thuộc tính nên dựa trên mục đích của đoạn mã, ưu tiên cách thể hiện rõ nhất ý định xử lý DOM.

Lời kết

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

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính firstElementChild 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 *

Bình luận, Hỏi đáp