DOM-JS bridge: node manipulation and properties #108

Implement DOM node manipulation methods and property access from JavaScript. Builds on the DOM-JS bridge architecture from issue 2.

Scope#

Tree Manipulation Methods#

On element/node wrapper objects:

• node.appendChild(child) — append child node, return the child
• node.removeChild(child) — remove child from parent, return removed child
• node.insertBefore(newNode, referenceNode) — insert before reference
• node.replaceChild(newChild, oldChild) — replace old with new, return old
• node.cloneNode(deep) — clone node (optionally with subtree)
• node.hasChildNodes() — returns boolean

Content Properties#

• node.textContent — get: concatenate all descendant text; set: replace children with text node
• element.innerHTML — get: serialize subtree to HTML string; set: parse HTML and replace children
• element.outerHTML — get: serialize element and subtree to HTML string

Attribute Methods#

• element.getAttribute(name) — return attribute value or null
• element.setAttribute(name, value) — set attribute
• element.removeAttribute(name) — remove attribute
• element.hasAttribute(name) — return boolean
• element.attributes — return NamedNodeMap-like object (simplified: array of {name, value})

Navigation Properties#

• node.parentNode — parent wrapper or null
• node.parentElement — parent if element, else null
• node.childNodes — array-like NodeList of children
• node.children — array-like HTMLCollection of element children only
• node.firstChild / node.lastChild
• node.firstElementChild / node.lastElementChild
• node.nextSibling / node.previousSibling
• node.nextElementSibling / node.previousElementSibling

Style Property#

• element.style — object with CSS property access (e.g., element.style.color = "red")
• Properties use camelCase (backgroundColor, not background-color)
• Setting a style property updates the element's inline style attribute

classList#

• element.classList.add(className) — add class
• element.classList.remove(className) — remove class
• element.classList.toggle(className) — toggle class
• element.classList.contains(className) — check class presence

Acceptance Criteria#

• parent.appendChild(child) moves nodes in the DOM tree
• node.textContent reads concatenated text and can set text
• element.innerHTML serializes and parses HTML
• element.getAttribute/setAttribute work correctly
• Navigation properties (parentNode, childNodes, etc.) traverse the tree
• element.style.color = "red" updates inline styles
• element.classList.add("foo") modifies the class attribute
• Removed nodes are properly detached from the tree

Phase 11 — DOM-JS Bindings (issue 3 of 8). Depends on: issue 2 (DOM-JS bridge architecture).