Web API 接口参考Node之Node.nextSibling

215 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="description">
    <p>
      Node.nextSibling 是一个只读属性,返回其父节点的 childNodes 列表中紧跟在其后面的节点,如果指定的节点为最后一个节点,则返回 null。
    </p>
    <p>
      在两个标签之间(即一个元素的闭合标签之后,下一个元素的起始标签之前)有空白出现时,会有#text 节点被插入到 DOM 中。使用 document.write 语句插入的两个元素之间不会有空白。
    </p>
  </div>
  <div class="demo">
    <div id="div-01">Here is div-01</div>
    <div id="div-02">Here is div-02</div><div id="div-03">Here is div-03</div>
  </div>
  <script>
    var el = document.getElementById('div-01').nextSibling,
         i = 1;

    console.log('Siblings of div-01:');

    while (el) {
      console.log(i + '. ' + el.nodeName);
      el = el.nextSibling;
      i++;
    }
  </script>
</body>
</html>