Add support for nextElementSibling and previousElementSibling

src/test/node/nextSibling.test.ts

@@ -1,11 +1,13 @@
 import anyTest, { TestInterface } from 'ava';
 import { Element } from '../../worker-thread/dom/Element';
+import { Node } from '../../worker-thread/dom/Node';
 import { createTestingDocument } from '../DocumentCreation';
 
 const test = anyTest as TestInterface<{
   node: Element;
   child: Element;
   childTwo: Element;
+  textNode: Node;
 }>;
 
 test.beforeEach((t) => {
@@ -15,6 +17,7 @@ test.beforeEach((t) => {
     node: document.createElement('div'),
     child: document.createElement('div'),
     childTwo: document.createElement('div'),
+    textNode: document.createTextNode('Hello world'),
   };
 });
 
@@ -24,12 +27,14 @@ test('when a parent contains two children, the next sibling of the first is the
   node.appendChild(child);
   node.appendChild(childTwo);
   t.deepEqual(child.nextSibling, childTwo);
+  t.deepEqual(child.nextElementSibling, childTwo);
 });
 
 test('when a node does not have a parent, its next sibling is null', (t) => {
   const { node } = t.context;
 
   t.is(node.nextSibling, null);
+  t.is(node.nextElementSibling, null);
 });
 
 test('when a node is the last child of a parent, the next sibling is null', (t) => {
@@ -38,4 +43,15 @@ test('when a node is the last child of a parent, the next sibling is null', (t)
   node.appendChild(child);
   node.appendChild(childTwo);
   t.is(childTwo.nextSibling, null);
+  t.is(childTwo.nextElementSibling, null);
 });
+
+test('nextElementSibling skips over non-Elements', (t) => {
+  const { node, child, childTwo, textNode } = t.context;
+
+  node.appendChild(child);
+  node.appendChild(textNode);
+  node.appendChild(childTwo);
+  t.is(child.nextElementSibling, childTwo);
+});
+

src/test/node/previousSibling.test.ts

@@ -1,11 +1,13 @@
 import anyTest, { TestInterface } from 'ava';
 import { Element } from '../../worker-thread/dom/Element';
+import { Node } from '../../worker-thread/dom/Node';
 import { createTestingDocument } from '../DocumentCreation';
 
 const test = anyTest as TestInterface<{
   node: Element;
   child: Element;
   childTwo: Element;
+  textNode: Node;
 }>;
 
 test.beforeEach((t) => {
@@ -15,6 +17,7 @@ test.beforeEach((t) => {
     node: document.createElement('div'),
     child: document.createElement('div'),
     childTwo: document.createElement('div'),
+    textNode: document.createTextNode('Hello world');
   };
 });
 
@@ -24,17 +27,21 @@ test('when a parent contains two children, the previous sibling of the second is
   node.appendChild(child);
   node.appendChild(childTwo);
   t.deepEqual(childTwo.previousSibling, child);
+  t.deepEqual(childTwo.previousElementSibling, child);
 });
 
 test('when a node does not have a parent, its previous sibling is null', (t) => {
   const { node } = t.context;
 
   t.is(node.previousSibling, null);
+  t.is(node.previousElementSibling, null);
 });
 
-test('when a node is the first child of a parent, the previous sibling is null', (t) => {
-  const { node, child } = t.context;
+test('previousElementSibling skips over text nodes', (t) => {
+  const { node, child, childTwo, textNode } = t.context;
 
   node.appendChild(child);
-  t.is(child.previousSibling, null);
+  node.appendChild(textNode)
+  node.appendChild(childTwo);
+  t.is(childTwo.previousElementSibling, child);
 });

src/worker-thread/dom/Element.ts

@@ -115,9 +115,7 @@ export class Element extends ParentNode {
   // Element.clientTop – https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop
   // Element.clientWidth – https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
   // set Element.innerHTML – https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
-  // NonDocumentTypeChildNode.nextElementSibling – https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling
   // Element.prefix – https://developer.mozilla.org/en-US/docs/Web/API/Element/prefix
-  // NonDocummentTypeChildNode.previousElementSibling – https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
   // Element.scrollHeight – https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
   // Element.scrollLeft – https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
   // Element.scrollLeftMax – https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax
@@ -161,6 +159,36 @@ export class Element extends ParentNode {
   // Mixins not implemented
   // Slotable.assignedSlot – https://developer.mozilla.org/en-US/docs/Web/API/Slotable/assignedSlot
 
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling
+   * Returns the Element immediately prior to the specified one in its parent's children list,
+   * or null if the specified element is the first one in the list.
+   */
+  get previousElementSibling() {
+    let parentChildren = this.parentNode?.children;
+    if (!parentChildren) {
+      return null;
+    }
+
+    const nextIndex = parentChildren.indexOf(this) + 1;
+    return parentChildren[nextIndex] ?? null;
+  }
+
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling
+   * Returns the element immediately following the specified one in its parent's children list,
+   * or null if the specified element is the last one in the list.
+   */
+  get nextElementSibling() {
+    let parentChildren = this.parentNode?.children;
+    if (!parentChildren) {
+      return null;
+    }
+
+    const nextIndex = parentChildren.indexOf(this) + 1;
+    return parentChildren[nextIndex] ?? null;
+  }
+
   /**
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
    * @return string representation of serialized HTML describing the Element and its descendants.