Thuộc tính previousSibling trong HTML DOM

Thuộc tính previousSibling trong HTML DOM trả về nút (node) anh/chị em liền trước ở cùng cấp độ cây DOM của nút được chỉ định. Khác với previousElementSibling, thuộc tính này trả về bất kỳ loại nút nào (bao gồm cả nút văn bản, comment, v.v.).

Cú pháp

node.previousSibling

Ví dụ

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

<!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 previousSibling 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ị nút 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.previousSibling.innerHTML;
  }
</script>
</body>
</html>

Kết quả

Nhấn nút để lấy nút anh chị em liền trước của mục Hóa học trong danh sách (có thể là nút văn bản trắng).