pierrelf.com
Create the bridge between the JS engine and the DOM crate. Expose the document global and implement core element access APIs.
Scope#
Architecture#
- The DOM
Document(arena-based,NodeIdhandles) must be accessible from JS native functions - Design a mechanism to associate a
Documentwith aVminstance — options include:- Adding an
Option<Document>field toVm - Using a shared reference (e.g.,
Rc<RefCell<Document>>) stored in a VM field - Storing a
Documentpointer in a dedicated host data slot on the VM
- Adding an
- DOM nodes should be represented as JS objects wrapping their
NodeId - Use an internal property (e.g.,
__node_id__) to store the NodeId on JS wrapper objects - Create wrapper objects lazily — same NodeId should return the same JS object (identity)
Document Global#
- Register
documentas a global JS object during page initialization - Properties:
document.documentElement— returns the<html>element wrapperdocument.head— returns the<head>element wrapperdocument.body— returns the<body>element wrapperdocument.title— get/set document title
Query Methods#
document.getElementById(id)— walk DOM tree, find element with matchingidattribute, return wrapper or nulldocument.querySelector(selector)— match first element using CSS selector (reusecsscrate's selector matching)document.querySelectorAll(selector)— return array of all matching elementsdocument.getElementsByTagName(tag)— return array of elements with matching tag namedocument.getElementsByClassName(name)— return array of elements with matching class
Factory Methods#
document.createElement(tagName)— create new element, return wrapperdocument.createTextNode(text)— create new text node, return wrapper
Element Properties (on wrapper objects)#
element.tagName— uppercase tag nameelement.id— get/set id attributeelement.className— get/set class attributeelement.nodeType— 1 for Element, 3 for Text, 8 for Comment, 9 for Documentelement.nodeName— tag name for elements,#textfor text nodes
Acceptance Criteria#
-
documentis accessible as a global in JS -
document.getElementById("foo")finds elements by id attribute -
document.createElement("div")creates a new element -
document.createTextNode("hello")creates a text node -
document.bodyreturns the body element - Element wrappers have
tagName,id,nodeTypeproperties -
document.querySelector(".class")works with CSS selectors - Wrapper identity: same node returns same JS object
- Null/undefined returned for missing elements
Phase 11 — DOM-JS Bindings (issue 2 of 8). No Phase 11 dependencies.