Thuộc tính firstElementChild trong JavaScript

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

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, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính firstElementChild trong JavaScript

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ử

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

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 *

Đă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