Thuộc tính previousElementSibling trong HTML DOM

Thuộc tính previousElementSibling trong HTML DOM trả về phần tử anh/chị em liền trước (element sibling) ở cùng cấp độ cây DOM của phần tử được chỉ định. Thuộc tính này chỉ xem xét các phần tử (element), bỏ qua các nút văn bản (text nodes).

Cú pháp

node.previousElementSibling

Ví dụ

Ví dụ sử dụng thuộc tính previousElementSibling:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.2rem; }
  .drop-down { width: 50%; border: 2px solid #fff; font-weight: bold; padding: 8px; }
  ul { list-style-type: none; padding: 0; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 50%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>Demo thuộc tính previousElementSibling DOM</h1>
<p>Chào, các môn học yêu thích của tôi:</p>
<ul>
  <li>Vật lý</li>
  <li id="chemistry">Hóa học</li>
  <li>Toán học</li>
  <li>Tiếng Anh</li>
</ul>
<button class="btn" onclick="showSibling()">Hiển thị anh chị em trước của Hóa học</button>
<div class="show"></div>
<script>
  function showSibling() {
    var chemistry = document.querySelector("#chemistry");
    document.querySelector(".show").innerHTML = chemistry.previousElementSibling.innerHTML;
  }
</script>
</body>
</html>

Kết quả

Nhấn nút để lấy anh chị em phần tử liền trước của mục Hóa học trong danh sách.