คุณสมบัติ nextSibling ของ HTML DOM

คุณสมบัติ nextSibling ของ HTML DOM จะส่งคืนโหนดองค์ประกอบ (element node) ที่อยู่ติดกันทันทีหลังจากโหนดที่ระบุ

หมายเหตุสำคัญ: คุณสมบัตินี้ ไม่ได้ละเว้น โหนดข้อความ (text nodes) และโหนดคอมเมนต์ (comment nodes) — กล่าวคือ หากมีช่องว่างหรือขึ้นบรรทัดใหม่ระหว่างองค์ประกอบ จะถูกนับเป็นโหนดข้อความและส่งผลต่อผลลัพธ์

ไวยากรณ์ (Syntax)

nodeList.nextSibling

ตัวอย่างการใช้งาน

ตัวอย่างนี้แสดงการใช้ nextSibling เพื่อหาวันขายของร้านค้า โดยอ้างอิงจากวันเสาร์ (id="Today") เพื่อหาวันถัดไปคือวันอาทิตย์

<!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>Grocery Store</h3>
      <ul>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li id="Today">Saturday</li><li>Sunday</li>
        <!-- Do not add whitespace between <li> elements as nextSibling does not ignore whitespaces -->
      </ul>
      <input type="button" onclick="getTimmings()" value="Get Sale Day">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var dayToday = document.getElementById("Today");
  function getTimmings() {
    divDisplay.textContent = 'Sale on last day of week: '+dayToday.nextSibling.textContent;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่ม "Get Sale Day":

หลังกดปุ่ม "Get Sale Day":