Thuộc tính nextElementSibling trong HTML DOM

Thuộc tính nextElementSibling 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 bỏ qua các nút văn bản và nút chú thích (khác với nextSibling).

Cú pháp

nodeList.nextElementSibling

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM nextElementSibling</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-nextElementSibling</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>
      </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.nextElementSibling.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':