feat: Add traversal methods to Element

lib/dom.js

@@ -1530,6 +1530,25 @@
 	if (parentNode !== child.parentNode) {
 		throw new DOMException(NOT_FOUND_ERR, "child's parent is not parent");
 	}
+
+	if (child.nodeType === ELEMENT_NODE) {
+		parentNode.childElementCount -= 1;
+
+		if (child.previousElementSibling) {
+			child.previousElementSibling.nextElementSibling = child.nextElementSibling;
+		} else {
+			parentNode.firstElementChild = child.nextElementSibling;
+		}
+
+		if (child.nextElementSibling) {
+			child.nextElementSibling.previousElementSibling = child.previousElementSibling;
+		} else {
+			parentNode.lastElementChild = child.previousElementSibling;
+		}
+
+		child.previousElementSibling = null;
+		child.nextElementSibling = null;
+	}
 	//var index = parentNode.childNodes.
 	var oldPreviousSibling = child.previousSibling;
 	var oldNextSibling = child.nextSibling;
@@ -1935,6 +1954,19 @@
 	} else {
 		parentNode.firstChild = newChild;
 	}
+
+	if (newChild.nodeType === ELEMENT_NODE) {
+		newChild.previousElementSibling = parentNode.lastElementChild
+		if (newChild.previousElementSibling) {
+			parentNode.lastElementChild.nextElementSibling = newChild
+		} else {
+			parentNode.firstElementChild = newChild;
+		}
+
+		parentNode.lastElementChild = newChild
+		parentNode.childElementCount += 1
+	}
+
 	parentNode.lastChild = newChild;
 	_onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
 	return newChild;
@@ -2198,6 +2230,36 @@
 
 function Element() {
 	this._nsMap = {};
+	/**
+	 * The number of child elements of this element.
+	 * @readonly
+	 * @type {number}
+	*/
+	this.childElementCount = 0;
+	/**
+	 * An element's first child Element, or null if there are no child elements
+	 * @readonly
+	 * @type {Element | null}
+	*/
+	this.firstElementChild = null;
+	/**
+	 * An element's last child Element, or null if there are no child elements
+	 * @readonly
+	 * @type {Element | null}
+	*/
+	this.lastElementChild = null;
+	/**
+	 * 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.
+	 * @readonly
+	 * @type {Element | null}
+	 */
+	this.nextElementSibling = null;
+	/**
+	 * 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.
+	 * @readonly
+	 * @type {Element | null}
+	 */
+	this.previousElementSibling = null;
 }
 Element.prototype = {
 	nodeType: ELEMENT_NODE,

readme.md

@@ -184,6 +184,10 @@ import { DOMParser } from '@xmldom/xmldom'
 
   readonly attribute:
   - `tagName`
+  - `firstElementChild`
+  - `lastElementChild`
+  - `nextElementSibling`
+  - `previousElementSibling`
 
   method:
   - `getAttribute(name)`

test/dom/element.test.js

@@ -227,4 +227,76 @@ describe('Element', () => {
 			expect(root.getAttributeNS('a', 'b')).toBe('e');
 		});
 	});
+	describe('element traversal', () => {
+		it('initialization', () => {
+			const doc = new DOMParser().parseFromString(`<A/>`)
+			const aElement = doc.firstChild
+
+			expect(aElement.childElementCount).toBe(0)
+			expect(aElement.firstElementChild).toBeNull()
+			expect(aElement.lastElementChild).toBeNull()
+			expect(aElement.previousElementSibling).toBeNull()
+			expect(aElement.nextElementSibling).toBeNull()
+		})
+
+		it('append one element and remove', () => {
+			const doc = new DOMParser().parseFromString(`<A></A>`)
+			const aElement = doc.firstChild
+			const bElement = doc.createElement('B')
+			aElement.appendChild(bElement)
+
+			expect(aElement.childElementCount).toBe(1)
+			expect(aElement.firstElementChild === bElement).toBe(true)
+			expect(aElement.lastElementChild === bElement).toBe(true)
+			expect(bElement.previousElementSibling).toBeNull()
+			expect(bElement.nextElementSibling).toBeNull()
+
+			aElement.removeChild(bElement)
+
+			expect(aElement.childElementCount).toBe(0)
+			expect(aElement.firstElementChild).toBeNull()
+			expect(aElement.lastElementChild).toBeNull()
+		})
+
+		it('append second element at the end and remove it', () => {
+			const doc = new DOMParser().parseFromString(`<A><B/></A>`)
+			const aElement = doc.firstChild
+			const bElement = doc.firstChild.firstChild
+
+			const cElement = doc.createElement('C')
+			aElement.appendChild(cElement)
+
+			expect(aElement.childElementCount).toBe(2)
+			expect(aElement.firstElementChild === bElement).toBe(true)
+			expect(aElement.lastElementChild === cElement).toBe(true)
+			expect(bElement.previousElementSibling).toBeNull()
+			expect(bElement.nextElementSibling === cElement).toBe(true)
+			expect(cElement.previousElementSibling === bElement).toBe(true)
+			expect(cElement.nextElementSibling).toBeNull()
+
+			aElement.removeChild(cElement)
+
+			expect(aElement.childElementCount).toBe(1)
+			expect(aElement.firstElementChild === bElement).toBe(true)
+			expect(aElement.lastElementChild === bElement).toBe(true)
+			expect(bElement.previousElementSibling).toBeNull()
+			expect(bElement.nextElementSibling).toBeNull()
+			expect(cElement.previousElementSibling).toBeNull()
+			expect(cElement.nextElementSibling).toBeNull()
+		})
+
+		it('remove element between two siblings', () => {
+			const doc = new DOMParser().parseFromString(`<A><B/><C/><D/></A>`)
+			const aElement = doc.firstChild
+			const bElement = doc.firstChild.firstChild
+			const cElement = bElement.nextSibling
+			const dElement = cElement.nextSibling
+
+			aElement.removeChild(cElement)
+			expect(bElement.previousElementSibling).toBeNull()
+			expect(bElement.nextElementSibling === dElement).toBe(true)
+			expect(dElement.previousElementSibling === bElement).toBe(true)
+			expect(dElement.nextElementSibling).toBeNull()
+		})
+	})
 });