Thuộc tính nextSibling trong HTML DOM

Thuộc tính nextSibling trong HTML DOM trả về nút phần tử ngay sau nút phần tử được chỉ định.

Lưu ý: Thuộc tính này không bỏ qua các nút văn bản và nút chú thích.

Cú pháp

nodeList.nextSibling

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính nextSibling:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM nextSibling</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    ul { width: 30%; margin: 0 auto; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-nextSibling</legend>
      <h3>Cửa hàng tạp hóa</h3>
      <ul>
        <li>Thứ Hai</li>
        <li>Thứ Ba</li>
        <li>Thứ Tư</li>
        <li>Thứ Năm</li>
        <li>Thứ Sáu</li>
        <li id="Today">Thứ Bảy</li><li>Chủ Nhật</li>
        <!-- Không thêm khoảng trắng giữa các phần tử <li> vì nextSibling không bỏ qua khoảng trắng -->
      </ul>
      <input type="button" onclick="getTimmings()" value="Lấy ngày bán">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var dayToday = document.getElementById("Today");
    function getTimmings() {
      divDisplay.textContent = 'Ngày bán cuối tuần: ' + dayToday.nextSibling.textContent;
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn nút 'Lấy ngày bán':

Sau khi nhấn nút 'Lấy ngày bán':