Phương thức getElementsByClassName() innerHTML trong JavaScript

Phương thức getElementsByClassName() innerHTML trong JavaScript

Phương thức getElementsByClassName() innerHTML trong JavaScript

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức getElementsByClassName() innerHTML trong JavaScript</title>
</head>
<body>

<h1>Phương thức getElementsByClassName() innerHTML trong JavaScript</h1>
<p>Phương thức getElementsByClassName() trong JavaScript dùng để lấy các phần tử HTML có tên lớp giống nhau và cùng nằm trong một phần tử cha để thực hiện những hành động vào các phần tử HTML con đó theo những vị trí được chỉ định, ở ví dụ này mình lấy phần tử HTML có tên lớp cần tìm và những phần tử đó nằm trong một phần tử cha khác, chèn nội dung vào phần tử đó với một vị trí được chỉ định:</p>

<ul id="ulid">
    <li class="liclass">Home</li>
    <li class="liclass">Giới thiệu</li>
    <li class="liclass">Hosting</li>
    <li class="liclass">Blog</li>
    <li class="liclass">Liên hệ</li>
</ul>
<p>Click vào nút THAY NỘI DUNG để thay thế giá trị thẻ li ở vị trí 0</p>
<button onclick="thayNoiDung()">THAY NỘI DUNG</button>
<script>
function thayNoiDung() {
  // Lấy id của ul
  const list = document.getElementById("ulid"); 
  // Lấy phần tử có tên lớp liclass ở vị trí 0, cập nhật nội dung là Trang chủ, thẻ li có tên lớp liclass nằm trong thẻ ul có id ulid
  list.getElementsByClassName("liclass")[0].innerHTML = "Trang chủ";
}
</script>
</body>
</html>
Phương thức getElementsByClassName() innerHTML trong JavaScript nằm trong bài viết Phương thức getElementsByClassName() trong JavaScript