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