When a web page is loaded, the browser creates a Document Object
Model (DOM) of the page. The DOM is basically just a tree of text objects
and element objects
like DIVs (divisions of the page), paragraphs, headers, articles, sections,
blockquotes, links, lists, interactive components (like buttons and forms),
and many more. The DOM defines the structure of the page by defining
which of the page's elements are inside, i.e. nested within,
which other page elements.
What is a live DOM editor?
A live DOM editor is a program or
application in a web page that changes the relative positions,
and possibly attributes and properties, of DOM elements on the fly,
that is, without requiring the page to be refreshed or updated from the web server.
A useful live DOM editor should also probably be able to add and delete DOM elements.
A useful DOM editor will likely be able to persist these changes
by saving them locally or on the web server.
What is the alpha prototype of the Zen live DOM editor?
containing the alpha prototype of the Zen live DOM editor, is a demonstration of a
very clear and simple way to program a complex GUI
(graphical user interface). Being an alpha prototype, it still has bugs
and does not yet work in Explorer or mobile browsers. In case you do
not find the operation of this DOM editor to be obvious, there are
instructions at the bottom of the page.
This DOM editor prompts you in large green text.
It will instruct you to choose a tool.
Currently, "Copy-insert", "Copy-before", "Move-insert", and "Move-before"
are the only tools that work.
Clicking on any other tool will produce the message
The program will eventually implement 4 rules for insertions and moves:
Branches of the DOM will be designable as draggable
and other branches of the DOM will be designable as not draggable.
However, currently just one branch can be designated as draggable
at startup. That branch currently comprises the elements
in the large gray block.
Branches of the DOM will be designable as valid drop targets
and other branches of the DOM will be designable as not valid
The HTML Content Model places restrictions upon what elements
are allowed to be nested inside which other elements.
The program will implement rules to enforce these
(Refer to the relevant sections of
A good but simple
can be found on ClearlyDecoded.com.)
An element cannot be moved into itself, nor into a descendent of itself.
For example, if a "Move-insert" operation is attempted
and an element around for awhile then dropped at its original position,
the operation is invalid.
Likewise, if a "Move-before" operation is attempted and an element
is dropped on its own child element or its child's child element,
the operation is invalid.
Invalid operations will produce no change to the DOM structure.
So far, only the 4th rule is implemented. The 1st rule is partially
implemented. The demo will be improved as time permits.