HTML DOM NodeIterator previousNode() 方法(1)

📌 相关文章

📜 HTML DOM NodeIterator previousNode() 方法(1)

📅 最后修改于: 2023-12-03 15:15:33.655000 🧑 作者: Mango

HTML DOM NodeIterator previousNode() 方法

previousNode() 方法是 HTML DOM 中的一个 NodeIterator 对象方法，它返回 NodeIterator 中的前一个节点。

语法

nodeIterator.previousNode()

参数

无。

返回值

NodeIterator 中的前一个节点。

示例

<!DOCTYPE html>
<html>
<body>
  <ul id="myList">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
  <button onclick="previousItem()">Previous Item</button>
  <button onclick="nextItem()">Next Item</button>

  <script>
    function previousItem() {
      const list = document.getElementById("myList");
      const iterator = document.createNodeIterator(list, NodeFilter.SHOW_ELEMENT);
      const node = iterator.previousNode();
      if (node != null) {
        node.style.color = "red";
      }
    }

    function nextItem() {
      const list = document.getElementById("myList");
      const iterator = document.createNodeIterator(list, NodeFilter.SHOW_ELEMENT);
      const node = iterator.nextNode();
      if (node != null) {
        node.style.color = "blue";
      }
    }
  </script>
</body>
</html>

上面的示例演示了如何使用 previousNode() 方法来获取 NodeIterator 中的前一个节点，并将其文本颜色设置为红色。

需要注意的是，该方法不会返回文本或注释节点，只会返回元素节点，因为我们在创建 NodeIterator 对象时，设置了 NodeFilter.SHOW_ELEMENT 参数。如果需要获取其他类型的节点，可以根据需要设置不同的参数。