Thuộc tính HTML DOM firstElementChild được sử dụng để trả về phần tử con đầu tiên của một phần tử nhất định. Phần tử con chỉ được trả về dưới dạng một nút phần tử. Nó bỏ qua các nút văn bản và nhận xét và không xem xét chúng. Đây là thuộc tính chỉ đọc.
Cú pháp
Sau đây là cú pháp cho thuộc tính HTML DOM firstElementChild -
element.firstElementChild
Ví dụ
Chúng ta hãy xem một ví dụ cho thuộc tính firstElementChild -
<!DOCTYPE html>
<html>
<head>
<script>
function eleChild() {
var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first element child node of the div is :"+ch;
}
</script>
</body>
</html>
<h1>firstElementChild property</h1>
<div id="DIV1">
<p>This is a p element</p>
<span>This is a span element</span>
</div>
<button onclick="eleChild()">Get Child</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào phương pháp “Nhận con” -
Trong ví dụ trên -
Chúng tôi đã tạo một nút “Get Child” sẽ thực thi phương thức eleChild () khi người dùng nhấp vào -
<button onclick="eleChild()">Get Child</button>
Hàm eleChild () nhận firstElementChild của div với id “DIV1” và gán thuộc tính innerHTML của nó cho biến ch. Vì firstElementChild không xem xét khoảng trắng nên nó sẽ trả về phần tử
. Sử dụng thuộc tính innerHTML, chúng tôi lấy văn bản bên trong phần tử
và hiển thị nó trong đoạn văn có id “Sample” -
function eleChild() {
var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first element child node of the div is :"+ch;
}