Implement DOM-JS bridge: node manipulation and properties

Add comprehensive DOM node manipulation methods and property access
from JavaScript, building on the existing DOM-JS bridge architecture.

Tree manipulation: appendChild, removeChild, insertBefore, replaceChild,
cloneNode, hasChildNodes. Content properties: textContent (get/set),
innerHTML (get/set with HTML parsing), outerHTML. Attribute methods:
getAttribute, setAttribute, removeAttribute, hasAttribute, attributes.
Navigation: parentNode, parentElement, childNodes, children, firstChild,
lastChild, firstElementChild, lastElementChild, nextSibling,
previousSibling, nextElementSibling, previousElementSibling.
Style: element.style object with camelCase CSS property access that
syncs to the inline style attribute. classList: add, remove, toggle,
contains methods that modify the class attribute.

Dynamic properties are resolved via VM interception in GetProperty and
SetProperty handlers, ensuring navigation and content properties always
reflect the current DOM state after modifications.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

crates/dom/src/lib.rs

···
         self.nodes.len() == 1
     }
 
+    /// Returns true if `node` has any child nodes.
+    pub fn has_child_nodes(&self, node: NodeId) -> bool {
+        self.nodes[node.0].first_child.is_some()
+    }
+
+    /// Replace `old_child` under `parent` with `new_child`.
+    ///
+    /// If `new_child` is already attached elsewhere, it is first removed.
+    /// Panics if `old_child` is not a child of `parent`.
+    pub fn replace_child(&mut self, parent: NodeId, new_child: NodeId, old_child: NodeId) {
+        assert_eq!(
+            self.nodes[old_child.0].parent,
+            Some(parent),
+            "old_child is not a child of parent"
+        );
+        self.insert_before(parent, new_child, old_child);
+        self.detach(old_child);
+    }
+
+    /// Recursively collect all descendant text content.
+    ///
+    /// For Text/Comment nodes, returns their data. For Element/Document nodes,
+    /// concatenates the text content of all descendant Text nodes.
+    pub fn deep_text_content(&self, node: NodeId) -> String {
+        let mut result = String::new();
+        self.collect_text(node, &mut result);
+        result
+    }
+
+    /// Replace all children of `node` with a single text node containing `text`.
+    /// If `text` is empty, all children are removed with no replacement.
+    pub fn set_element_text_content(&mut self, node: NodeId, text: &str) {
+        // Remove all existing children.
+        while let Some(child) = self.first_child(node) {
+            self.detach(child);
+        }
+        if !text.is_empty() {
+            let text_node = self.create_text(text);
+            self.append_child(node, text_node);
+        }
+    }
+
+    /// Clone a node. If `deep` is true, recursively clone all descendants.
+    pub fn clone_node(&mut self, node: NodeId, deep: bool) -> NodeId {
+        let data = self.nodes[node.0].data.clone();
+        let new_node = self.push_node(data);
+        if deep {
+            let children: Vec<NodeId> = self.children(node).collect();
+            for child in children {
+                let cloned_child = self.clone_node(child, true);
+                self.append_child(new_node, cloned_child);
+            }
+        }
+        new_node
+    }
+
+    /// Returns the attributes of an element node, or `None` for other node types.
+    pub fn attributes(&self, node: NodeId) -> Option<&[Attribute]> {
+        match &self.nodes[node.0].data {
+            NodeData::Element { attributes, .. } => Some(attributes),
+            _ => None,
+        }
+    }
+
     // --- private helpers ---
+
+    fn collect_text(&self, node: NodeId, result: &mut String) {
+        match &self.nodes[node.0].data {
+            NodeData::Text { data } => result.push_str(data),
+            _ => {
+                let mut child = self.nodes[node.0].first_child;
+                while let Some(c) = child {
+                    self.collect_text(c, result);
+                    child = self.nodes[c.0].next_sibling;
+                }
+            }
+        }
+    }
 
     fn push_node(&mut self, data: NodeData) -> NodeId {
         let id = NodeId(self.nodes.len());

crates/js/Cargo.toml

···
 [dependencies]
 we-dom = { path = "../dom" }
 we-css = { path = "../css" }
-we-style = { path = "../style" }
-
-[dev-dependencies]
 we-html = { path = "../html" }
+we-style = { path = "../style" }

crates/js/src/dom_bridge.rs

···
 use crate::builtins::{make_native, set_builtin_prop};
 use crate::gc::{Gc, GcRef};
 use crate::vm::*;
+use std::rc::Rc;
 use we_css::parser::Parser as CssParser;
 use we_dom::{Document, NodeData, NodeId};
+use we_html::parse_html;
 use we_style::matching::matches_selector_list;
 
 /// Native callback type alias.
···
     }
 
     let gc_ref = gc.alloc(HeapObject::Object(data));
+
+    // Register DOM methods on the wrapper based on node type.
+    register_node_methods(gc, gc_ref, &doc, node_id);
+
     bridge.node_wrappers.borrow_mut().insert(idx, gc_ref);
     gc_ref
 }
···
     Value::Object(gc.alloc(HeapObject::Object(obj)))
 }
 
+// ── Method registration on wrappers ──────────────────────────────────
+
+/// Register DOM methods on a wrapper object based on node type.
+fn register_node_methods(gc: &mut Gc<HeapObject>, wrapper: GcRef, doc: &Document, node_id: NodeId) {
+    // Methods available on all node types.
+    let node_methods: &[NativeMethod] = &[
+        ("appendChild", node_append_child),
+        ("removeChild", node_remove_child),
+        ("insertBefore", node_insert_before),
+        ("replaceChild", node_replace_child),
+        ("cloneNode", node_clone_node),
+        ("hasChildNodes", node_has_child_nodes),
+    ];
+    for &(name, callback) in node_methods {
+        let func = make_native(gc, name, callback);
+        set_builtin_prop(gc, wrapper, name, Value::Function(func));
+    }
+
+    // Methods available only on Element nodes.
+    if matches!(doc.node_data(node_id), NodeData::Element { .. }) {
+        let element_methods: &[NativeMethod] = &[
+            ("getAttribute", element_get_attribute),
+            ("setAttribute", element_set_attribute),
+            ("removeAttribute", element_remove_attribute),
+            ("hasAttribute", element_has_attribute),
+        ];
+        for &(name, callback) in element_methods {
+            let func = make_native(gc, name, callback);
+            set_builtin_prop(gc, wrapper, name, Value::Function(func));
+        }
+    }
+}
+
+// ── Helper: extract NodeId from a wrapper ───────────────────────────
+
+fn get_node_id(gc: &Gc<HeapObject>, wrapper: GcRef) -> Option<NodeId> {
+    match gc.get(wrapper) {
+        Some(HeapObject::Object(data)) => match data.properties.get(NODE_ID_KEY) {
+            Some(Property {
+                value: Value::Number(n),
+                ..
+            }) => Some(NodeId::from_index(*n as usize)),
+            _ => None,
+        },
+        _ => None,
+    }
+}
+
+/// Extract a `NodeId` from a JS Value that should be a DOM wrapper object.
+fn value_to_node_id(gc: &Gc<HeapObject>, val: &Value) -> Option<NodeId> {
+    match val {
+        Value::Object(r) => get_node_id(gc, *r),
+        _ => None,
+    }
+}
+
+// ── Node manipulation methods ───────────────────────────────────────
+
+fn node_append_child(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let parent_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("appendChild called on non-node"))?;
+    let child_val = args
+        .first()
+        .ok_or_else(|| RuntimeError::type_error("appendChild requires an argument"))?;
+    let child_id = value_to_node_id(ctx.gc, child_val)
+        .ok_or_else(|| RuntimeError::type_error("appendChild argument is not a node"))?;
+
+    bridge
+        .document
+        .borrow_mut()
+        .append_child(parent_id, child_id);
+    Ok(child_val.clone())
+}
+
+fn node_remove_child(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let parent_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("removeChild called on non-node"))?;
+    let child_val = args
+        .first()
+        .ok_or_else(|| RuntimeError::type_error("removeChild requires an argument"))?;
+    let child_id = value_to_node_id(ctx.gc, child_val)
+        .ok_or_else(|| RuntimeError::type_error("removeChild argument is not a node"))?;
+
+    bridge
+        .document
+        .borrow_mut()
+        .remove_child(parent_id, child_id);
+    Ok(child_val.clone())
+}
+
+fn node_insert_before(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let parent_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("insertBefore called on non-node"))?;
+    let new_node_val = args
+        .first()
+        .ok_or_else(|| RuntimeError::type_error("insertBefore requires two arguments"))?;
+    let new_node_id = value_to_node_id(ctx.gc, new_node_val)
+        .ok_or_else(|| RuntimeError::type_error("insertBefore: first argument is not a node"))?;
+
+    let ref_val = args.get(1).cloned().unwrap_or(Value::Null);
+    if matches!(ref_val, Value::Null) {
+        // insertBefore with null reference = appendChild
+        bridge
+            .document
+            .borrow_mut()
+            .append_child(parent_id, new_node_id);
+    } else {
+        let ref_id = value_to_node_id(ctx.gc, &ref_val).ok_or_else(|| {
+            RuntimeError::type_error("insertBefore: second argument is not a node")
+        })?;
+        bridge
+            .document
+            .borrow_mut()
+            .insert_before(parent_id, new_node_id, ref_id);
+    }
+    Ok(new_node_val.clone())
+}
+
+fn node_replace_child(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let parent_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("replaceChild called on non-node"))?;
+    let new_child_val = args
+        .first()
+        .ok_or_else(|| RuntimeError::type_error("replaceChild requires two arguments"))?;
+    let new_child_id = value_to_node_id(ctx.gc, new_child_val)
+        .ok_or_else(|| RuntimeError::type_error("replaceChild: first argument is not a node"))?;
+    let old_child_val = args
+        .get(1)
+        .ok_or_else(|| RuntimeError::type_error("replaceChild requires two arguments"))?;
+    let old_child_id = value_to_node_id(ctx.gc, old_child_val)
+        .ok_or_else(|| RuntimeError::type_error("replaceChild: second argument is not a node"))?;
+
+    bridge
+        .document
+        .borrow_mut()
+        .replace_child(parent_id, new_child_id, old_child_id);
+    Ok(old_child_val.clone())
+}
+
+fn node_clone_node(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let node_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("cloneNode called on non-node"))?;
+
+    let deep = args.first().map(|v| v.to_boolean()).unwrap_or(false);
+
+    let cloned_id = bridge.document.borrow_mut().clone_node(node_id, deep);
+    let wrapper = get_or_create_wrapper(cloned_id, ctx.gc, bridge, None);
+    Ok(Value::Object(wrapper))
+}
+
+fn node_has_child_nodes(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let _ = args;
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let node_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("hasChildNodes called on non-node"))?;
+
+    let has = bridge.document.borrow().has_child_nodes(node_id);
+    Ok(Value::Boolean(has))
+}
+
+// ── Attribute methods ───────────────────────────────────────────────
+
+fn element_get_attribute(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let node_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("getAttribute called on non-element"))?;
+    let name = args
+        .first()
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+
+    let doc = bridge.document.borrow();
+    match doc.get_attribute(node_id, &name) {
+        Some(val) => Ok(Value::String(val.to_string())),
+        None => Ok(Value::Null),
+    }
+}
+
+fn element_set_attribute(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let node_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("setAttribute called on non-element"))?;
+    let name = args
+        .first()
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+    let value = args
+        .get(1)
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+
+    bridge
+        .document
+        .borrow_mut()
+        .set_attribute(node_id, &name, &value);
+
+    // Sync special attributes to wrapper properties.
+    if let Value::Object(wrapper) = &ctx.this {
+        if name == "id" {
+            set_builtin_prop(ctx.gc, *wrapper, "id", Value::String(value.clone()));
+        } else if name == "class" {
+            set_builtin_prop(ctx.gc, *wrapper, "className", Value::String(value.clone()));
+        }
+    }
+
+    Ok(Value::Undefined)
+}
+
+fn element_remove_attribute(
+    args: &[Value],
+    ctx: &mut NativeContext,
+) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let node_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("removeAttribute called on non-element"))?;
+    let name = args
+        .first()
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+
+    bridge
+        .document
+        .borrow_mut()
+        .remove_attribute(node_id, &name);
+
+    // Sync to wrapper.
+    if let Value::Object(wrapper) = &ctx.this {
+        if name == "id" {
+            set_builtin_prop(ctx.gc, *wrapper, "id", Value::String(String::new()));
+        } else if name == "class" {
+            set_builtin_prop(ctx.gc, *wrapper, "className", Value::String(String::new()));
+        }
+    }
+
+    Ok(Value::Undefined)
+}
+
+fn element_has_attribute(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document attached"))?;
+    let node_id = match &ctx.this {
+        Value::Object(r) => get_node_id(ctx.gc, *r),
+        _ => None,
+    }
+    .ok_or_else(|| RuntimeError::type_error("hasAttribute called on non-element"))?;
+    let name = args
+        .first()
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+
+    let doc = bridge.document.borrow();
+    let has = doc.get_attribute(node_id, &name).is_some();
+    Ok(Value::Boolean(has))
+}
+
+// ── HTML serialization ──────────────────────────────────────────────
+
+/// Serialize the children of a node to HTML (for innerHTML getter).
+fn serialize_children(doc: &Document, node: NodeId) -> String {
+    let mut html = String::new();
+    for child in doc.children(node) {
+        serialize_node_to(doc, child, &mut html);
+    }
+    html
+}
+
+/// Serialize a node and its subtree to HTML (for outerHTML getter).
+fn serialize_node_html(doc: &Document, node: NodeId) -> String {
+    let mut html = String::new();
+    serialize_node_to(doc, node, &mut html);
+    html
+}
+
+fn serialize_node_to(doc: &Document, node: NodeId, out: &mut String) {
+    match doc.node_data(node) {
+        NodeData::Element {
+            tag_name,
+            attributes,
+            ..
+        } => {
+            out.push('<');
+            out.push_str(tag_name);
+            for attr in attributes {
+                out.push(' ');
+                out.push_str(&attr.name);
+                out.push_str("=\"");
+                escape_attr(&attr.value, out);
+                out.push('"');
+            }
+            out.push('>');
+
+            // Void elements don't have closing tags.
+            if !is_void_element(tag_name) {
+                for child in doc.children(node) {
+                    serialize_node_to(doc, child, out);
+                }
+                out.push_str("</");
+                out.push_str(tag_name);
+                out.push('>');
+            }
+        }
+        NodeData::Text { data } => {
+            escape_text(data, out);
+        }
+        NodeData::Comment { data } => {
+            out.push_str("<!--");
+            out.push_str(data);
+            out.push_str("-->");
+        }
+        NodeData::Document => {
+            for child in doc.children(node) {
+                serialize_node_to(doc, child, out);
+            }
+        }
+    }
+}
+
+fn escape_text(s: &str, out: &mut String) {
+    for c in s.chars() {
+        match c {
+            '&' => out.push_str("&amp;"),
+            '<' => out.push_str("&lt;"),
+            '>' => out.push_str("&gt;"),
+            _ => out.push(c),
+        }
+    }
+}
+
+fn escape_attr(s: &str, out: &mut String) {
+    for c in s.chars() {
+        match c {
+            '&' => out.push_str("&amp;"),
+            '"' => out.push_str("&quot;"),
+            _ => out.push(c),
+        }
+    }
+}
+
+fn is_void_element(tag: &str) -> bool {
+    matches!(
+        tag.to_ascii_lowercase().as_str(),
+        "area"
+            | "base"
+            | "br"
+            | "col"
+            | "embed"
+            | "hr"
+            | "img"
+            | "input"
+            | "link"
+            | "meta"
+            | "param"
+            | "source"
+            | "track"
+            | "wbr"
+    )
+}
+
+// ── Dynamic DOM property resolution ─────────────────────────────────
+
+/// Resolve a dynamic DOM property for a wrapper object.
+/// Called from the VM when a property is not found in the static properties.
+/// Returns `Some(value)` if the key is a recognized DOM property, `None` otherwise.
+pub fn resolve_dom_get(
+    gc: &mut Gc<HeapObject>,
+    bridge: &Rc<DomBridge>,
+    gc_ref: GcRef,
+    key: &str,
+) -> Option<Value> {
+    let node_id = get_node_id(gc, gc_ref)?;
+    let doc = bridge.document.borrow();
+
+    match key {
+        // ── Navigation properties ────────────────
+        "parentNode" => {
+            let parent = doc.parent(node_id);
+            drop(doc);
+            Some(match parent {
+                Some(p) => Value::Object(get_or_create_wrapper(p, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "parentElement" => {
+            let parent = doc.parent(node_id);
+            let is_element = parent
+                .map(|p| matches!(doc.node_data(p), NodeData::Element { .. }))
+                .unwrap_or(false);
+            drop(doc);
+            Some(if is_element {
+                Value::Object(get_or_create_wrapper(parent.unwrap(), gc, bridge, None))
+            } else {
+                Value::Null
+            })
+        }
+        "childNodes" => {
+            let children: Vec<NodeId> = doc.children(node_id).collect();
+            drop(doc);
+            Some(make_wrapper_array(&children, gc, bridge, None))
+        }
+        "children" => {
+            let children: Vec<NodeId> = doc
+                .children(node_id)
+                .filter(|&c| matches!(doc.node_data(c), NodeData::Element { .. }))
+                .collect();
+            drop(doc);
+            Some(make_wrapper_array(&children, gc, bridge, None))
+        }
+        "firstChild" => {
+            let fc = doc.first_child(node_id);
+            drop(doc);
+            Some(match fc {
+                Some(c) => Value::Object(get_or_create_wrapper(c, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "lastChild" => {
+            let lc = doc.last_child(node_id);
+            drop(doc);
+            Some(match lc {
+                Some(c) => Value::Object(get_or_create_wrapper(c, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "firstElementChild" => {
+            let fc = doc
+                .children(node_id)
+                .find(|&c| matches!(doc.node_data(c), NodeData::Element { .. }));
+            drop(doc);
+            Some(match fc {
+                Some(c) => Value::Object(get_or_create_wrapper(c, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "lastElementChild" => {
+            let children: Vec<NodeId> = doc
+                .children(node_id)
+                .filter(|&c| matches!(doc.node_data(c), NodeData::Element { .. }))
+                .collect();
+            let last = children.last().copied();
+            drop(doc);
+            Some(match last {
+                Some(c) => Value::Object(get_or_create_wrapper(c, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "nextSibling" => {
+            let ns = doc.next_sibling(node_id);
+            drop(doc);
+            Some(match ns {
+                Some(s) => Value::Object(get_or_create_wrapper(s, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "previousSibling" => {
+            let ps = doc.prev_sibling(node_id);
+            drop(doc);
+            Some(match ps {
+                Some(s) => Value::Object(get_or_create_wrapper(s, gc, bridge, None)),
+                None => Value::Null,
+            })
+        }
+        "nextElementSibling" => {
+            let mut current = doc.next_sibling(node_id);
+            while let Some(s) = current {
+                if matches!(doc.node_data(s), NodeData::Element { .. }) {
+                    drop(doc);
+                    return Some(Value::Object(get_or_create_wrapper(s, gc, bridge, None)));
+                }
+                current = doc.next_sibling(s);
+            }
+            Some(Value::Null)
+        }
+        "previousElementSibling" => {
+            let mut current = doc.prev_sibling(node_id);
+            while let Some(s) = current {
+                if matches!(doc.node_data(s), NodeData::Element { .. }) {
+                    drop(doc);
+                    return Some(Value::Object(get_or_create_wrapper(s, gc, bridge, None)));
+                }
+                current = doc.prev_sibling(s);
+            }
+            Some(Value::Null)
+        }
+
+        // ── Content properties ───────────────────
+        "textContent" => {
+            let text = doc.deep_text_content(node_id);
+            Some(Value::String(text))
+        }
+        "innerHTML" => {
+            if !matches!(doc.node_data(node_id), NodeData::Element { .. }) {
+                return None;
+            }
+            let html = serialize_children(&doc, node_id);
+            Some(Value::String(html))
+        }
+        "outerHTML" => {
+            if !matches!(doc.node_data(node_id), NodeData::Element { .. }) {
+                return None;
+            }
+            let html = serialize_node_html(&doc, node_id);
+            Some(Value::String(html))
+        }
+
+        // ── Attribute array ──────────────────────
+        "attributes" => {
+            if let Some(attrs) = doc.attributes(node_id) {
+                let mut obj = ObjectData::new();
+                for (i, attr) in attrs.iter().enumerate() {
+                    let mut attr_obj = ObjectData::new();
+                    attr_obj.properties.insert(
+                        "name".to_string(),
+                        Property::data(Value::String(attr.name.clone())),
+                    );
+                    attr_obj.properties.insert(
+                        "value".to_string(),
+                        Property::data(Value::String(attr.value.clone())),
+                    );
+                    let attr_ref = gc.alloc(HeapObject::Object(attr_obj));
+                    obj.properties
+                        .insert(i.to_string(), Property::data(Value::Object(attr_ref)));
+                }
+                obj.properties.insert(
+                    "length".to_string(),
+                    Property {
+                        value: Value::Number(doc.attributes(node_id).map_or(0, |a| a.len()) as f64),
+                        writable: false,
+                        enumerable: false,
+                        configurable: false,
+                    },
+                );
+                drop(doc);
+                Some(Value::Object(gc.alloc(HeapObject::Object(obj))))
+            } else {
+                None
+            }
+        }
+
+        // ── classList ────────────────────────────
+        "classList" => {
+            if !matches!(doc.node_data(node_id), NodeData::Element { .. }) {
+                return None;
+            }
+            drop(doc);
+            Some(create_class_list(gc, bridge, node_id))
+        }
+
+        // ── style ────────────────────────────────
+        "style" => {
+            if !matches!(doc.node_data(node_id), NodeData::Element { .. }) {
+                return None;
+            }
+            let style_str = doc
+                .get_attribute(node_id, "style")
+                .unwrap_or("")
+                .to_string();
+            drop(doc);
+            Some(create_style_object(gc, bridge, node_id, &style_str))
+        }
+
+        _ => None,
+    }
+}
+
+/// Handle a DOM property set on a wrapper object.
+/// Returns `true` if the key was handled (caller should skip normal property set).
+pub fn handle_dom_set(
+    gc: &mut Gc<HeapObject>,
+    bridge: &Rc<DomBridge>,
+    gc_ref: GcRef,
+    key: &str,
+    val: &Value,
+) -> bool {
+    let node_id = match get_node_id(gc, gc_ref) {
+        Some(id) => id,
+        None => return false,
+    };
+
+    match key {
+        "textContent" => {
+            let text = val.to_js_string(gc);
+            bridge
+                .document
+                .borrow_mut()
+                .set_element_text_content(node_id, &text);
+            true
+        }
+        "innerHTML" => {
+            let html_str = val.to_js_string(gc);
+            let mut doc = bridge.document.borrow_mut();
+            // Remove existing children.
+            while let Some(child) = doc.first_child(node_id) {
+                doc.remove_child(node_id, child);
+            }
+            drop(doc);
+            // Parse the HTML fragment and adopt children into the real document.
+            let fragment_doc = parse_html(&format!("<body>{html_str}</body>"));
+            let frag_root = fragment_doc.root();
+            // Find the <body> element in the parsed fragment.
+            let body = fragment_doc.children(frag_root).find(|&c| {
+                matches!(fragment_doc.node_data(c), NodeData::Element { tag_name, .. } if tag_name.eq_ignore_ascii_case("html"))
+            }).and_then(|html| {
+                fragment_doc.children(html).find(|&c| {
+                    matches!(fragment_doc.node_data(c), NodeData::Element { tag_name, .. } if tag_name.eq_ignore_ascii_case("body"))
+                })
+            });
+            if let Some(body_id) = body {
+                adopt_children(
+                    &fragment_doc,
+                    body_id,
+                    &mut bridge.document.borrow_mut(),
+                    node_id,
+                );
+            }
+            true
+        }
+        "id" => {
+            let id_val = val.to_js_string(gc);
+            bridge
+                .document
+                .borrow_mut()
+                .set_attribute(node_id, "id", &id_val);
+            // Also update the wrapper's static `id` property.
+            set_builtin_prop(gc, gc_ref, "id", Value::String(id_val));
+            true
+        }
+        "className" => {
+            let class_val = val.to_js_string(gc);
+            bridge
+                .document
+                .borrow_mut()
+                .set_attribute(node_id, "class", &class_val);
+            set_builtin_prop(gc, gc_ref, "className", Value::String(class_val));
+            true
+        }
+        _ => false,
+    }
+}
+
+/// Recursively copy children from a parsed fragment document into the real document.
+fn adopt_children(
+    src_doc: &Document,
+    src_parent: NodeId,
+    dst_doc: &mut Document,
+    dst_parent: NodeId,
+) {
+    for child in src_doc.children(src_parent) {
+        let new_node = match src_doc.node_data(child) {
+            NodeData::Element {
+                tag_name,
+                attributes,
+                ..
+            } => {
+                let el = dst_doc.create_element(tag_name);
+                for attr in attributes {
+                    dst_doc.set_attribute(el, &attr.name, &attr.value);
+                }
+                el
+            }
+            NodeData::Text { data } => dst_doc.create_text(data),
+            NodeData::Comment { data } => dst_doc.create_comment(data),
+            NodeData::Document => continue,
+        };
+        dst_doc.append_child(dst_parent, new_node);
+        // Recurse for element children.
+        if matches!(src_doc.node_data(child), NodeData::Element { .. }) {
+            adopt_children(src_doc, child, dst_doc, new_node);
+        }
+    }
+}
+
+/// Check if a DOM property set should be intercepted for a style proxy object.
+/// Returns `true` if handled.
+pub fn handle_style_set(
+    gc: &mut Gc<HeapObject>,
+    bridge: &Rc<DomBridge>,
+    gc_ref: GcRef,
+    key: &str,
+    val: &Value,
+) -> bool {
+    // Check for __style_node_id__ marker.
+    let node_id = match gc.get(gc_ref) {
+        Some(HeapObject::Object(data)) => match data.properties.get("__style_node_id__") {
+            Some(Property {
+                value: Value::Number(n),
+                ..
+            }) => NodeId::from_index(*n as usize),
+            _ => return false,
+        },
+        _ => return false,
+    };
+
+    // Set the property on the style object normally.
+    let val_str = val.to_js_string(gc);
+    if let Some(HeapObject::Object(data)) = gc.get_mut(gc_ref) {
+        data.properties
+            .insert(key.to_string(), Property::data(val.clone()));
+    }
+
+    // Serialize all style properties back to the element's style attribute.
+    let style_str = serialize_style_object(gc, gc_ref);
+    bridge
+        .document
+        .borrow_mut()
+        .set_attribute(node_id, "style", &style_str);
+
+    // Also set it as a normal property (already done above), but tell caller it was handled.
+    let _ = val_str;
+    true
+}
+
+// ── classList helpers ───────────────────────────────────────────────
+
+fn create_class_list(gc: &mut Gc<HeapObject>, bridge: &DomBridge, node_id: NodeId) -> Value {
+    let mut data = ObjectData::new();
+    // Store the node ID for method callbacks.
+    data.properties.insert(
+        NODE_ID_KEY.to_string(),
+        Property::builtin(Value::Number(node_id.index() as f64)),
+    );
+
+    let gc_ref = gc.alloc(HeapObject::Object(data));
+
+    let methods: &[NativeMethod] = &[
+        ("add", class_list_add),
+        ("remove", class_list_remove),
+        ("toggle", class_list_toggle),
+        ("contains", class_list_contains),
+    ];
+    for &(name, callback) in methods {
+        let func = make_native(gc, name, callback);
+        set_builtin_prop(gc, gc_ref, name, Value::Function(func));
+    }
+
+    // Also keep a reference to the bridge node_wrappers to avoid issues.
+    // The classList methods use ctx.dom_bridge to access the document.
+    let _ = bridge;
+    Value::Object(gc_ref)
+}
+
+fn get_class_list_node_id(gc: &Gc<HeapObject>, this: &Value) -> Option<NodeId> {
+    match this {
+        Value::Object(r) => get_node_id(gc, *r),
+        _ => None,
+    }
+}
+
+fn class_list_add(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document"))?;
+    let node_id = get_class_list_node_id(ctx.gc, &ctx.this)
+        .ok_or_else(|| RuntimeError::type_error("invalid classList"))?;
+
+    for arg in args {
+        let class_name = arg.to_js_string(ctx.gc);
+        let doc = bridge.document.borrow();
+        let current = doc
+            .get_attribute(node_id, "class")
+            .unwrap_or("")
+            .to_string();
+        drop(doc);
+        if !current.split_whitespace().any(|c| c == class_name) {
+            let new_val = if current.is_empty() {
+                class_name
+            } else {
+                format!("{current} {class_name}")
+            };
+            bridge
+                .document
+                .borrow_mut()
+                .set_attribute(node_id, "class", &new_val);
+        }
+    }
+    Ok(Value::Undefined)
+}
+
+fn class_list_remove(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document"))?;
+    let node_id = get_class_list_node_id(ctx.gc, &ctx.this)
+        .ok_or_else(|| RuntimeError::type_error("invalid classList"))?;
+
+    for arg in args {
+        let class_name = arg.to_js_string(ctx.gc);
+        let doc = bridge.document.borrow();
+        let current = doc
+            .get_attribute(node_id, "class")
+            .unwrap_or("")
+            .to_string();
+        drop(doc);
+        let new_val: Vec<&str> = current
+            .split_whitespace()
+            .filter(|&c| c != class_name)
+            .collect();
+        bridge
+            .document
+            .borrow_mut()
+            .set_attribute(node_id, "class", &new_val.join(" "));
+    }
+    Ok(Value::Undefined)
+}
+
+fn class_list_toggle(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document"))?;
+    let node_id = get_class_list_node_id(ctx.gc, &ctx.this)
+        .ok_or_else(|| RuntimeError::type_error("invalid classList"))?;
+    let class_name = args
+        .first()
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+
+    let doc = bridge.document.borrow();
+    let current = doc
+        .get_attribute(node_id, "class")
+        .unwrap_or("")
+        .to_string();
+    drop(doc);
+
+    let has_class = current.split_whitespace().any(|c| c == class_name);
+    if has_class {
+        let new_val: Vec<&str> = current
+            .split_whitespace()
+            .filter(|&c| c != class_name)
+            .collect();
+        bridge
+            .document
+            .borrow_mut()
+            .set_attribute(node_id, "class", &new_val.join(" "));
+        Ok(Value::Boolean(false))
+    } else {
+        let new_val = if current.is_empty() {
+            class_name
+        } else {
+            format!("{current} {class_name}")
+        };
+        bridge
+            .document
+            .borrow_mut()
+            .set_attribute(node_id, "class", &new_val);
+        Ok(Value::Boolean(true))
+    }
+}
+
+fn class_list_contains(args: &[Value], ctx: &mut NativeContext) -> Result<Value, RuntimeError> {
+    let bridge = ctx
+        .dom_bridge
+        .ok_or_else(|| RuntimeError::type_error("no document"))?;
+    let node_id = get_class_list_node_id(ctx.gc, &ctx.this)
+        .ok_or_else(|| RuntimeError::type_error("invalid classList"))?;
+    let class_name = args
+        .first()
+        .map(|v| v.to_js_string(ctx.gc))
+        .unwrap_or_default();
+
+    let doc = bridge.document.borrow();
+    let current = doc.get_attribute(node_id, "class").unwrap_or("");
+    let has = current.split_whitespace().any(|c| c == class_name);
+    Ok(Value::Boolean(has))
+}
+
+// ── Style object helpers ────────────────────────────────────────────
+
+fn create_style_object(
+    gc: &mut Gc<HeapObject>,
+    _bridge: &DomBridge,
+    node_id: NodeId,
+    style_str: &str,
+) -> Value {
+    let mut data = ObjectData::new();
+    // Marker for style proxy interception.
+    data.properties.insert(
+        "__style_node_id__".to_string(),
+        Property::builtin(Value::Number(node_id.index() as f64)),
+    );
+
+    // Parse existing inline style into camelCase properties.
+    for decl in style_str.split(';') {
+        let decl = decl.trim();
+        if decl.is_empty() {
+            continue;
+        }
+        if let Some((prop, val)) = decl.split_once(':') {
+            let camel = kebab_to_camel(prop.trim());
+            data.properties
+                .insert(camel, Property::data(Value::String(val.trim().to_string())));
+        }
+    }
+
+    Value::Object(gc.alloc(HeapObject::Object(data)))
+}
+
+fn serialize_style_object(gc: &Gc<HeapObject>, style_ref: GcRef) -> String {
+    let mut parts = Vec::new();
+    if let Some(HeapObject::Object(data)) = gc.get(style_ref) {
+        for (key, prop) in &data.properties {
+            if key.starts_with("__") {
+                continue;
+            }
+            let kebab = camel_to_kebab(key);
+            let val = match &prop.value {
+                Value::String(s) => s.clone(),
+                Value::Number(n) => format!("{n}"),
+                _ => continue,
+            };
+            parts.push(format!("{kebab}: {val}"));
+        }
+    }
+    parts.join("; ")
+}
+
+fn kebab_to_camel(s: &str) -> String {
+    let mut result = String::new();
+    let mut next_upper = false;
+    for c in s.chars() {
+        if c == '-' {
+            next_upper = true;
+        } else if next_upper {
+            result.extend(c.to_uppercase());
+            next_upper = false;
+        } else {
+            result.push(c);
+        }
+    }
+    result
+}
+
+fn camel_to_kebab(s: &str) -> String {
+    let mut result = String::new();
+    for c in s.chars() {
+        if c.is_ascii_uppercase() {
+            result.push('-');
+            result.push(c.to_ascii_lowercase());
+        } else {
+            result.push(c);
+        }
+    }
+    result
+}
+
 // ── Tests ───────────────────────────────────────────────────────────
 
 #[cfg(test)]
···
             Value::Boolean(b) => assert!(b),
             v => panic!("expected true, got {v:?}"),
         }
+    }
+
+    // ── appendChild tests ────────────────────────────────
+
+    #[test]
+    fn test_append_child_moves_node() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="parent"></div></body></html>"#,
+            r#"
+            var parent = document.getElementById("parent");
+            var child = document.createElement("span");
+            parent.appendChild(child);
+            parent.hasChildNodes()
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    #[test]
+    fn test_append_child_returns_child() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var c = document.createElement("span");
+            var returned = p.appendChild(c);
+            returned === c
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    // ── removeChild tests ────────────────────────────────
+
+    #[test]
+    fn test_remove_child() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span id="c"></span></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var c = document.getElementById("c");
+            p.removeChild(c);
+            p.hasChildNodes()
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(false)));
+    }
+
+    // ── insertBefore tests ───────────────────────────────
+
+    #[test]
+    fn test_insert_before() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span id="ref"></span></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var ref = document.getElementById("ref");
+            var newNode = document.createElement("em");
+            p.insertBefore(newNode, ref);
+            p.firstChild.tagName
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "EM"),
+            v => panic!("expected 'EM', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_insert_before_null_appends() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var newNode = document.createElement("em");
+            p.insertBefore(newNode, null);
+            p.firstChild.tagName
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "EM"),
+            v => panic!("expected 'EM', got {v:?}"),
+        }
+    }
+
+    // ── replaceChild tests ───────────────────────────────
+
+    #[test]
+    fn test_replace_child() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span id="old"></span></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var old = document.getElementById("old");
+            var newEl = document.createElement("em");
+            p.replaceChild(newEl, old);
+            p.firstChild.tagName
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "EM"),
+            v => panic!("expected 'EM', got {v:?}"),
+        }
+    }
+
+    // ── cloneNode tests ──────────────────────────────────
+
+    #[test]
+    fn test_clone_node_shallow() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="orig"><span>child</span></div></body></html>"#,
+            r#"
+            var orig = document.getElementById("orig");
+            var clone = orig.cloneNode(false);
+            clone.hasChildNodes()
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(false)));
+    }
+
+    #[test]
+    fn test_clone_node_deep() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="orig"><span>child</span></div></body></html>"#,
+            r#"
+            var orig = document.getElementById("orig");
+            var clone = orig.cloneNode(true);
+            clone.hasChildNodes()
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    // ── textContent tests ────────────────────────────────
+
+    #[test]
+    fn test_text_content_get() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d">hello <span>world</span></div></body></html>"#,
+            r#"document.getElementById("d").textContent"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "hello world"),
+            v => panic!("expected 'hello world', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_text_content_set() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"><span>old</span></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.textContent = "new text";
+            d.textContent
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "new text"),
+            v => panic!("expected 'new text', got {v:?}"),
+        }
+    }
+
+    // ── innerHTML tests ──────────────────────────────────
+
+    #[test]
+    fn test_inner_html_get() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"><span>hi</span></div></body></html>"#,
+            r#"document.getElementById("d").innerHTML"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "<span>hi</span>"),
+            v => panic!("expected '<span>hi</span>', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_inner_html_set() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.innerHTML = "<em>new</em>";
+            d.firstChild.tagName
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "EM"),
+            v => panic!("expected 'EM', got {v:?}"),
+        }
+    }
+
+    // ── outerHTML test ───────────────────────────────────
+
+    #[test]
+    fn test_outer_html() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"><span>hi</span></div></body></html>"#,
+            r#"document.getElementById("d").outerHTML"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert!(
+                s.contains("<div") && s.contains("</div>") && s.contains("<span>hi</span>"),
+                "unexpected outerHTML: {s}"
+            ),
+            v => panic!("expected string, got {v:?}"),
+        }
+    }
+
+    // ── getAttribute / setAttribute tests ────────────────
+
+    #[test]
+    fn test_get_attribute() {
+        let result = eval_with_doc(
+            r#"<html><body><a id="link" href="https://example.com">x</a></body></html>"#,
+            r#"document.getElementById("link").getAttribute("href")"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "https://example.com"),
+            v => panic!("expected URL, got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_get_attribute_missing() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"document.getElementById("d").getAttribute("nope") === null"#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    #[test]
+    fn test_set_attribute() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.setAttribute("data-x", "123");
+            d.getAttribute("data-x")
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "123"),
+            v => panic!("expected '123', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_has_attribute() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d" class="foo"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.hasAttribute("class") && !d.hasAttribute("nope")
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    #[test]
+    fn test_remove_attribute() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d" class="foo"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.removeAttribute("class");
+            d.hasAttribute("class")
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(false)));
+    }
+
+    // ── Navigation property tests ────────────────────────
+
+    #[test]
+    fn test_parent_node() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="child"></div></body></html>"#,
+            r#"document.getElementById("child").parentNode.tagName"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "BODY"),
+            v => panic!("expected 'BODY', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_child_nodes() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span>a</span><span>b</span></div></body></html>"#,
+            r#"document.getElementById("p").childNodes.length"#,
+        )
+        .unwrap();
+        match result {
+            Value::Number(n) => assert_eq!(n, 2.0),
+            v => panic!("expected 2, got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_children_element_only() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span>a</span>text<span>b</span></div></body></html>"#,
+            r#"document.getElementById("p").children.length"#,
+        )
+        .unwrap();
+        match result {
+            Value::Number(n) => assert_eq!(n, 2.0),
+            v => panic!("expected 2, got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_first_child() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span>a</span><em>b</em></div></body></html>"#,
+            r#"document.getElementById("p").firstChild.tagName"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "SPAN"),
+            v => panic!("expected 'SPAN', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_last_child() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span>a</span><em>b</em></div></body></html>"#,
+            r#"document.getElementById("p").lastChild.tagName"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "EM"),
+            v => panic!("expected 'EM', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_next_sibling() {
+        let result = eval_with_doc(
+            r#"<html><body><span id="a">1</span><em id="b">2</em></body></html>"#,
+            r#"document.getElementById("a").nextSibling.tagName"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "EM"),
+            v => panic!("expected 'EM', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_previous_sibling() {
+        let result = eval_with_doc(
+            r#"<html><body><span id="a">1</span><em id="b">2</em></body></html>"#,
+            r#"document.getElementById("b").previousSibling.tagName"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "SPAN"),
+            v => panic!("expected 'SPAN', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_null_navigation() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="only"></div></body></html>"#,
+            r#"document.getElementById("only").nextSibling === null"#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    // ── style property tests ─────────────────────────────
+
+    #[test]
+    fn test_style_set_and_get() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.style.color = "red";
+            d.style.color
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "red"),
+            v => panic!("expected 'red', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_style_read_existing() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d" style="color: blue"></div></body></html>"#,
+            r#"document.getElementById("d").style.color"#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "blue"),
+            v => panic!("expected 'blue', got {v:?}"),
+        }
+    }
+
+    // ── classList tests ──────────────────────────────────
+
+    #[test]
+    fn test_class_list_add() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.classList.add("foo");
+            d.getAttribute("class")
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "foo"),
+            v => panic!("expected 'foo', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_class_list_remove() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d" class="foo bar"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.classList.remove("foo");
+            d.getAttribute("class")
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "bar"),
+            v => panic!("expected 'bar', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_class_list_toggle() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d" class="foo"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            var removed = d.classList.toggle("foo");
+            var added = d.classList.toggle("bar");
+            !removed && added
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    #[test]
+    fn test_class_list_contains() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d" class="foo bar"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.classList.contains("foo") && !d.classList.contains("baz")
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
+    }
+
+    // ── setAttribute syncs id/className ──────────────────
+
+    #[test]
+    fn test_set_attribute_syncs_id() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.setAttribute("id", "new_id");
+            d.id
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "new_id"),
+            v => panic!("expected 'new_id', got {v:?}"),
+        }
+    }
+
+    // ── id and className setters ─────────────────────────
+
+    #[test]
+    fn test_set_id_syncs_attribute() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.id = "new_id";
+            d.getAttribute("id")
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "new_id"),
+            v => panic!("expected 'new_id', got {v:?}"),
+        }
+    }
+
+    #[test]
+    fn test_set_class_name_syncs_attribute() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="d"></div></body></html>"#,
+            r#"
+            var d = document.getElementById("d");
+            d.className = "a b";
+            d.getAttribute("class")
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "a b"),
+            v => panic!("expected 'a b', got {v:?}"),
+        }
+    }
+
+    // ── Navigation after DOM modification ────────────────
+
+    #[test]
+    fn test_navigation_after_append() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var a = document.createElement("span");
+            var b = document.createElement("em");
+            p.appendChild(a);
+            p.appendChild(b);
+            p.firstChild.tagName + "," + p.lastChild.tagName
+            "#,
+        )
+        .unwrap();
+        match result {
+            Value::String(s) => assert_eq!(s, "SPAN,EM"),
+            v => panic!("expected 'SPAN,EM', got {v:?}"),
+        }
+    }
+
+    // ── Removed nodes are detached ───────────────────────
+
+    #[test]
+    fn test_removed_node_detached() {
+        let result = eval_with_doc(
+            r#"<html><body><div id="p"><span id="c"></span></div></body></html>"#,
+            r#"
+            var p = document.getElementById("p");
+            var c = document.getElementById("c");
+            p.removeChild(c);
+            c.parentNode === null
+            "#,
+        )
+        .unwrap();
+        assert!(matches!(result, Value::Boolean(true)));
     }
 }

crates/js/src/vm.rs

···
     }
 
     /// Collect all GcRef values reachable from the mutator (roots for GC).
+    /// Resolve a dynamic DOM property for a wrapper object.
+    /// Returns `Some(value)` if the key is a recognized DOM property, `None` otherwise.
+    fn resolve_dom_property(&mut self, gc_ref: GcRef, key: &str) -> Option<Value> {
+        let bridge = Rc::clone(self.dom_bridge.as_ref()?);
+        crate::dom_bridge::resolve_dom_get(&mut self.gc, &bridge, gc_ref, key)
+    }
+
+    /// Handle a DOM property set on a wrapper object.
+    /// Returns `true` if the property was handled (caller should skip normal set).
+    fn handle_dom_property_set(&mut self, gc_ref: GcRef, key: &str, val: &Value) -> bool {
+        if let Some(bridge) = self.dom_bridge.clone() {
+            // Check for style proxy objects first.
+            if crate::dom_bridge::handle_style_set(&mut self.gc, &bridge, gc_ref, key, val) {
+                return true;
+            }
+            // Then check for DOM node wrapper sets.
+            crate::dom_bridge::handle_dom_set(&mut self.gc, &bridge, gc_ref, key, val)
+        } else {
+            false
+        }
+    }
+
     fn collect_roots(&self) -> Vec<GcRef> {
         let mut roots = Vec::new();
         for val in &self.registers {
···
                     let key_r = Self::read_u8(&mut self.frames[fi]);
                     let base = self.frames[fi].base;
                     let key = self.registers[base + key_r as usize].to_js_string(&self.gc);
+                    // Save gc_ref for DOM interception.
+                    let obj_gc_ref = match self.registers[base + obj_r as usize] {
+                        Value::Object(r) | Value::Function(r) => Some(r),
+                        _ => None,
+                    };
                     let val = match self.registers[base + obj_r as usize] {
                         Value::Object(gc_ref) | Value::Function(gc_ref) => {
                             gc_get_property(&self.gc, gc_ref, &key)
···
                             .unwrap_or(Value::Undefined),
                         _ => Value::Undefined,
                     };
+                    // DOM dynamic property interception.
+                    let val = match val {
+                        Value::Undefined if obj_gc_ref.is_some() => self
+                            .resolve_dom_property(obj_gc_ref.unwrap(), &key)
+                            .unwrap_or(Value::Undefined),
+                        other => other,
+                    };
                     self.registers[base + dst as usize] = val;
                 }
                 Op::SetProperty => {
···
                     let base = self.frames[fi].base;
                     let key = self.registers[base + key_r as usize].to_js_string(&self.gc);
                     let val = self.registers[base + val_r as usize].clone();
-                    match self.registers[base + obj_r as usize] {
-                        Value::Object(gc_ref) => {
-                            if let Some(HeapObject::Object(data)) = self.gc.get_mut(gc_ref) {
-                                if let Some(prop) = data.properties.get_mut(&key) {
-                                    if prop.writable {
-                                        prop.value = val;
+                    let obj_gc = match self.registers[base + obj_r as usize] {
+                        Value::Object(r) => Some(r),
+                        Value::Function(r) => Some(r),
+                        _ => None,
+                    };
+                    // DOM property set interception.
+                    let dom_handled = obj_gc
+                        .map(|r| self.handle_dom_property_set(r, &key, &val))
+                        .unwrap_or(false);
+                    if !dom_handled {
+                        if let Some(gc_ref) = obj_gc {
+                            match self.gc.get_mut(gc_ref) {
+                                Some(HeapObject::Object(data)) => {
+                                    if let Some(prop) = data.properties.get_mut(&key) {
+                                        if prop.writable {
+                                            prop.value = val;
+                                        }
+                                    } else {
+                                        data.properties.insert(key, Property::data(val));
                                     }
-                                } else {
-                                    data.properties.insert(key, Property::data(val));
                                 }
-                            }
-                        }
-                        Value::Function(gc_ref) => {
-                            if let Some(HeapObject::Function(fdata)) = self.gc.get_mut(gc_ref) {
-                                if let Some(prop) = fdata.properties.get_mut(&key) {
-                                    if prop.writable {
-                                        prop.value = val;
+                                Some(HeapObject::Function(fdata)) => {
+                                    if let Some(prop) = fdata.properties.get_mut(&key) {
+                                        if prop.writable {
+                                            prop.value = val;
+                                        }
+                                    } else {
+                                        fdata.properties.insert(key, Property::data(val));
                                     }
-                                } else {
-                                    fdata.properties.insert(key, Property::data(val));
                                 }
+                                _ => {}
                             }
                         }
-                        _ => {}
                     }
                 }
                 Op::CreateObject => {
···
                     let name_idx = Self::read_u16(&mut self.frames[fi]) as usize;
                     let base = self.frames[fi].base;
                     let key = self.frames[fi].func.names[name_idx].clone();
+                    let obj_gc_ref = match self.registers[base + obj_r as usize] {
+                        Value::Object(r) | Value::Function(r) => Some(r),
+                        _ => None,
+                    };
                     let val = match self.registers[base + obj_r as usize] {
                         Value::Object(gc_ref) | Value::Function(gc_ref) => {
                             gc_get_property(&self.gc, gc_ref, &key)
···
                             .unwrap_or(Value::Undefined),
                         _ => Value::Undefined,
                     };
+                    // DOM dynamic property interception.
+                    let val = match val {
+                        Value::Undefined if obj_gc_ref.is_some() => self
+                            .resolve_dom_property(obj_gc_ref.unwrap(), &key)
+                            .unwrap_or(Value::Undefined),
+                        other => other,
+                    };
                     self.registers[base + dst as usize] = val;
                 }
                 Op::SetPropertyByName => {
···
                     let base = self.frames[fi].base;
                     let key = self.frames[fi].func.names[name_idx].clone();
                     let val = self.registers[base + val_r as usize].clone();
-                    match self.registers[base + obj_r as usize] {
-                        Value::Object(gc_ref) => {
-                            if let Some(HeapObject::Object(data)) = self.gc.get_mut(gc_ref) {
-                                if let Some(prop) = data.properties.get_mut(&key) {
-                                    if prop.writable {
-                                        prop.value = val;
+                    let obj_gc = match self.registers[base + obj_r as usize] {
+                        Value::Object(r) => Some(r),
+                        Value::Function(r) => Some(r),
+                        _ => None,
+                    };
+                    let dom_handled = obj_gc
+                        .map(|r| self.handle_dom_property_set(r, &key, &val))
+                        .unwrap_or(false);
+                    if !dom_handled {
+                        if let Some(gc_ref) = obj_gc {
+                            match self.gc.get_mut(gc_ref) {
+                                Some(HeapObject::Object(data)) => {
+                                    if let Some(prop) = data.properties.get_mut(&key) {
+                                        if prop.writable {
+                                            prop.value = val;
+                                        }
+                                    } else {
+                                        data.properties.insert(key, Property::data(val));
                                     }
-                                } else {
-                                    data.properties.insert(key, Property::data(val));
                                 }
-                            }
-                        }
-                        Value::Function(gc_ref) => {
-                            if let Some(HeapObject::Function(fdata)) = self.gc.get_mut(gc_ref) {
-                                if let Some(prop) = fdata.properties.get_mut(&key) {
-                                    if prop.writable {
-                                        prop.value = val;
+                                Some(HeapObject::Function(fdata)) => {
+                                    if let Some(prop) = fdata.properties.get_mut(&key) {
+                                        if prop.writable {
+                                            prop.value = val;
+                                        }
+                                    } else {
+                                        fdata.properties.insert(key, Property::data(val));
                                     }
-                                } else {
-                                    fdata.properties.insert(key, Property::data(val));
                                 }
+                                _ => {}
                             }
                         }
-                        _ => {}
                     }
                 }