Code Thuộc tính lastElementChild trong JavaScript

Trình soạn thảo - Code Thuộc tính lastElementChild trong JavaScript

Kết quả - Code Thuộc tính lastElementChild trong JavaScript

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính lastElementChild trong JavaScript</title>
</head>
<body>

<h1>Code Thuộc tính lastElementChild trong JavaScript</h1>
<p>Thuộc tính lastElementChild trong JavaScript dùng để lấy nội dung chữ, html, giá trị,... hoặc tác động lên phần tử con cuối cùng nằm trong thẻ HTML cha, thuộc tính này không lấy khoảng trắng và chú thích:</p>

<h3>lastElementChild li cuối cùng</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>Phần tử HTML cuối cùng của thẻ ul (HTML): <span id="ulhtml"></span>, Loại thẻ: <span id="ulloaithe"></span></div>

<h3>lastElementChild option trong select cuối cùng</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 cuối cùng của thẻ select (HTML): <span id="selecthtml"></span></div>

<h3>lastElementChild p cuối cùng</h3>
<div id="divp" style="border:1px solid red;padding:20px;margin-bottom:10px"> 
<!--lastElementChild p cuối cùng-->
<p>Xin Chào!</p>
<p>Cảm ơn!</p>
</div>
<div>Phần tử HTML cuối cùng là thẻ p (HTML): <span id="phtml"></span></div>

<h3>lastElementChild input cuối cùng</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>Phần tử HTML cuối cùng là thẻ input(Value): <span id="inputhtml"></span></div>
<script>
// lastElementChild li cuối cùng
let valueulhtml = document.getElementById("ulid").lastElementChild.innerHTML;
document.getElementById("ulhtml").innerHTML = valueulhtml;
let loaithehtml = document.getElementById("ulid").lastElementChild.tagName;
document.getElementById("ulloaithe").innerHTML = loaithehtml;
document.getElementById("ulid").lastElementChild.style.fontSize = "40px";
document.getElementById("ulid").lastElementChild.style.color = "red";

// lastElementChild option trong thẻ select cuối cùng
let selecthtml = document.getElementById("selectid").lastElementChild.value;
document.getElementById("selecthtml").innerHTML = selecthtml;
// lastElementChild p cuối cùng
let valuephtml = document.getElementById("divp").lastElementChild.innerHTML;
document.getElementById("phtml").innerHTML = valuephtml;
// lastElementChild input cuối cùng
let inputvalue = document.getElementById("divinput").lastElementChild.value;
document.getElementById("inputhtml").innerHTML = inputvalue;

</script>
</body>
</html>