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

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

ความแตกต่างจาก nextSibling: คุณสมบัตินี้ ละเว้น โหนดข้อความ (text nodes) และโหนดคอมเมนต์ (comment nodes) — จะส่งคืนเฉพาะโหนดองค์ประกอบ (Element nodes) เท่านั้น ทำให้การนำทาง DOM ง่ายขึ้นและแม่นยำกว่า

ไวยากรณ์ (Syntax)

nodeList.nextElementSibling

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

ตัวอย่างเดียวกับ nextSibling แต่ใช้ nextElementSibling แทน ซึ่งจะข้ามช่องว่างระหว่าง <li> ได้โดยอัตโนมัติ

<!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>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>
      </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.nextElementSibling.textContent;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

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

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