Commits

ms2ger  committed 08f8f4b Draft

Update to link to a maintained version of the specification.

  • Participants
  • Parent commits 376aeb5

Comments (0)

Files changed (5)

 ANOLIS = anolis
 
-all: Overview.html dom-core.html data/xrefs/dom/dom.json
+all: Overview.html dom-core.html
 
-Overview.html: Overview.src.html data Makefile
+Overview.html dom-core.html: Overview.src.html Makefile
 	$(ANOLIS) --output-encoding=ascii --omit-optional-tags --quote-attr-values \
-	--w3c-compat --enable=xspecxref --enable=refs --w3c-shortname="dom" \
-	--filter=".publish, .now3c" $< $@
-
-data/xrefs/dom/dom.json: Overview.src.html Makefile
-	$(ANOLIS) --dump-xrefs=$@ $< /tmp/spec
-
-publish:: Overview.src.html data Makefile
-	$(ANOLIS) --output-encoding=ascii --omit-optional-tags --quote-attr-values \
-	--w3c-compat --enable=xspecxref --enable=refs --w3c-shortname="dom" \
-	--filter=".dontpublish, .now3c" --pubdate="$(PUBDATE)" --w3c-status=WD \
-	$< Overview.html
-
-dom-core.html: Overview.src.html data Makefile
-	$(ANOLIS) --output-encoding=ascii --omit-optional-tags --quote-attr-values \
-	--w3c-compat-xref-a-placement --enable=xspecxref --enable=refs \
-	--filter=".publish, .w3conly, title + style" $< $@
+	$< $@

File Overview.html

-<!DOCTYPE html><html lang="en-US"><head>
-  <meta charset="UTF-8">
-  <title>DOM4</title>
-  <!-- W3C only -->
-  <style>
-   pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
-   pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
-   pre code { color:inherit; background:transparent }
-   .example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
-   .note { margin-left:2em; font-weight:bold; font-style:italic; color:#008000 }
-   p.note::before { content:"Note: " }
-   .XXX { padding:.5em; border:solid #f00 }
-   p.XXX::before { content:"Issue: " }
-   dl.switch { padding-left:2em }
-   dl.switch > dt { text-indent:-1.5em }
-   dl.switch > dt:before { content:'\21AA'; padding:0 0.5em 0 0; display:inline-block; width:1em; text-align:right; line-height:0.5em }
-   dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
-   dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
-   dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
-   dl.domintro dd p { margin: 0.5em 0; }
-   dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: red; border: solid 2px; background: white; padding: 0 0.25em; }
-   em.ct { text-transform:lowercase; font-variant:small-caps; font-style:normal }
-   dfn { font-weight:bold; font-style:normal }
-   code { color:orangered }
-   code :link, code :visited { color:inherit }
-   hr:not(.top) { display:block; background:none; border:none; padding:0; margin:2em 0; height:auto }
-   table { border-collapse:collapse; border-style:hidden hidden none hidden }
-   table thead { border-bottom:solid }
-   table tbody th:first-child { border-left:solid }
-   table td, table th { border-left:solid; border-right:solid; border-bottom:solid thin; vertical-align:top; padding:0.2em }
-
-   .warning { color: red; background: transparent; font-weight: bolder; font-style: italic; }
-   .warning p:first-child { margin-top: 0; }
-   .warning p:last-child { margin-bottom: 0; }
-   .warning:before { font-style: normal; }
-   p.warning:before { content: '\26A0 Warning! '; }
-  </style>
-  <style>
-   @media print {
-     [data-anolis-spec]::after { content:"[" attr(data-anolis-spec) "]"; font-size:.6em; vertical-align:super; text-transform:uppercase }
-   }
-  </style>
-  <link class="w3conly" href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
-  </head>
- <body>
-
-<div class="head">
-<div class="w3conly">
-
-<!--begin-logo-->
-<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
-<!--end-logo-->
-</div>
- <h1>DOM4</h1>
- <h2 class="no-num no-toc" id="editor's-draft-7-july-2012">
-  <span class="w3conly">Editor's Draft 7 July 2012</span>
-  </h2>
-
- <dl>
-  <dt>This Version:
-  <dd class="dontpublish w3conly"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html</a>
-  <dt class="dontpublish">Participate:</dt>
-  <dd class="dontpublish">Send feedback to
-  <a href="mailto:www-dom@w3.org?subject=%5Bdom%5D%20">www-dom@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-dom/">archives</a>) or
-  <a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=WebAppsWG&amp;component=DOM">file a bug</a>
-  (<a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=WebAppsWG&amp;component=DOM&amp;resolution=---">open bugs</a>)
-  <dd class="dontpublish"><a href="http://wiki.whatwg.org/wiki/IRC">IRC: #whatwg on Freenode</a>
-
-  <dt class="dontpublish">Version History:
-  <dd class="dontpublish"><a href="http://bitbucket.org/ms2ger/dom-core/">http://bitbucket.org/ms2ger/dom-core/</a>
-
-  <dt class="w3conly">Previous Versions:
-  <dd class="w3conly"><a href="http://www.w3.org/TR/2012/WD-dom-20120405/">http://www.w3.org/TR/2012/WD-dom-20120405/</a>
-  <dd class="w3conly"><a href="http://www.w3.org/TR/2012/WD-dom-20120105/">http://www.w3.org/TR/2012/WD-dom-20120105/</a>
-  <dd class="w3conly"><a href="http://www.w3.org/TR/2011/WD-dom-20110915/">http://www.w3.org/TR/2011/WD-dom-20110915/</a>
-  <dd class="w3conly"><a href="http://www.w3.org/TR/2011/WD-domcore-20110531/">http://www.w3.org/TR/2011/WD-domcore-20110531/</a>
-  <dd class="w3conly"><a href="http://www.w3.org/TR/2010/WD-domcore-20101007/">http://www.w3.org/TR/2010/WD-domcore-20101007/</a>
-
-  <dt>Editors:
-  <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
-    (<a href="http://www.opera.com/">Opera Software ASA</a>)
-    &lt;<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>&gt;
-  <dd>Aryeh Gregor
-   (<a href="http://www.mozilla.org/">Mozilla Foundation</a>)
-   &lt;<a href="mailto:ayg@aryeh.name">ayg@aryeh.name</a>&gt;
-  <dd>Ms2ger (<a href="http://www.mozilla.org/">Mozilla Foundation</a>)
-    &lt;<a href="mailto:ms2ger@gmail.com">ms2ger@gmail.com</a>&gt;
- </dl>
-
-<script async="" src="//dvcs.w3.org/hg/quirks-mode/raw-file/tip/file-bug.js"></script>
-
-<div class="w3conly">
-<!--begin-copyright-->
-<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
-<!--end-copyright--></div>
-</div>
-
-
-
-<h2 class="no-num no-toc" id="table-of-contents">Table of Contents</h2>
-
-<!--begin-toc-->
-<ol class="toc">
- <li><a class="no-num" href="#goals">Goals</a></li>
- <li><a href="#conformance"><span class="secno">1 </span>Conformance</a>
-  <ol class="toc">
-   <li><a href="#dependencies"><span class="secno">1.1 </span>Dependencies</a></li>
-   <li><a href="#extensibility"><span class="secno">1.2 </span>Extensibility</a></ol></li>
- <li><a href="#terminology"><span class="secno">2 </span>Terminology</a>
-  <ol class="toc">
-   <li><a href="#trees"><span class="secno">2.1 </span>Trees</a></li>
-   <li><a href="#strings"><span class="secno">2.2 </span>Strings</a></li>
-   <li><a href="#common-microsyntaxes"><span class="secno">2.3 </span>Common microsyntaxes</a>
-    <ol class="toc">
-     <li><a href="#common-parser-idioms"><span class="secno">2.3.1 </span>Common parser idioms</a></li>
-     <li><a href="#space-separated-tokens"><span class="secno">2.3.2 </span>Space-separated tokens</a></ol></li>
-   <li><a href="#namespaces"><span class="secno">2.4 </span>Namespaces</a></ol></li>
- <li><a href="#errors"><span class="secno">3 </span>Errors</a>
-  <ol class="toc">
-   <li><a href="#exception-domexception"><span class="secno">3.1 </span>Exception <code>DOMException</code></a></li>
-   <li><a href="#interface-domerror"><span class="secno">3.2 </span>Interface <code>DOMError</code></a></li>
-   <li><a href="#error-names-0"><span class="secno">3.3 </span>Error names</a></ol></li>
- <li><a href="#events"><span class="secno">4 </span>Events</a>
-  <ol class="toc">
-   <li><a href="#introduction-to-dom-events"><span class="secno">4.1 </span>Introduction to "DOM Events"</a></li>
-   <li><a href="#interface-event"><span class="secno">4.2 </span>Interface <code>Event</code></a></li>
-   <li><a href="#interface-customevent"><span class="secno">4.3 </span>Interface <code>CustomEvent</code></a></li>
-   <li><a href="#constructing-events"><span class="secno">4.4 </span>Constructing events</a></li>
-   <li><a href="#interface-eventtarget"><span class="secno">4.5 </span>Interface <code>EventTarget</code></a></li>
-   <li><a href="#dispatching-events"><span class="secno">4.6 </span>Dispatching events</a></li>
-   <li><a href="#firing-events"><span class="secno">4.7 </span>Firing events</a></ol></li>
- <li><a href="#nodes"><span class="secno">5 </span>Nodes</a>
-  <ol class="toc">
-   <li><a href="#introduction-to-the-dom"><span class="secno">5.1 </span>Introduction to "The DOM"</a></li>
-   <li><a href="#node-tree"><span class="secno">5.2 </span>Node tree</a>
-    <ol class="toc">
-     <li><a href="#mutation-algorithms"><span class="secno">5.2.1 </span>Mutation algorithms</a></li>
-     <li><a href="#mutation-methods"><span class="secno">5.2.2 </span>Mutation methods</a></li>
-     <li><a href="#legacy-mutation-methods"><span class="secno">5.2.3 </span>Legacy mutation methods</a></li>
-     <li><a href="#mutation-observers"><span class="secno">5.2.4 </span>Mutation observers</a></li>
-     <li><a href="#interface-mutationrecord"><span class="secno">5.2.5 </span>Interface <code>MutationRecord</code></a></ol></li>
-   <li><a href="#interface-node"><span class="secno">5.3 </span>Interface <code>Node</code></a></li>
-   <li><a href="#interface-document"><span class="secno">5.4 </span>Interface <code>Document</code></a>
-    <ol class="toc">
-     <li><a href="#interface-domimplementation"><span class="secno">5.4.1 </span>Interface <code>DOMImplementation</code></a></ol></li>
-   <li><a href="#interface-documentfragment"><span class="secno">5.5 </span>Interface <code>DocumentFragment</code></a></li>
-   <li><a href="#interface-documenttype"><span class="secno">5.6 </span>Interface <code>DocumentType</code></a></li>
-   <li><a href="#interface-element"><span class="secno">5.7 </span>Interface <code>Element</code></a>
-    <ol class="toc">
-     <li><a href="#interface-attr"><span class="secno">5.7.1 </span>Interface <code>Attr</code></a></ol></li>
-   <li><a href="#interface-characterdata"><span class="secno">5.8 </span>Interface <code>CharacterData</code></a></li>
-   <li><a href="#interface-text"><span class="secno">5.9 </span>Interface <code>Text</code></a></li>
-   <li><a href="#interface-processinginstruction"><span class="secno">5.10 </span>Interface <code>ProcessingInstruction</code></a></li>
-   <li><a href="#interface-comment"><span class="secno">5.11 </span>Interface <code>Comment</code></a></ol></li>
- <li><a href="#ranges"><span class="secno">6 </span>Ranges</a>
-  <ol class="toc">
-   <li><a href="#interface-range"><span class="secno">6.1 </span>Interface <code>Range</code></a></ol></li>
- <li><a href="#traversal"><span class="secno">7 </span>Traversal</a>
-  <ol class="toc">
-   <li><a href="#interface-nodeiterator"><span class="secno">7.1 </span>Interface <code>NodeIterator</code></a></li>
-   <li><a href="#interface-treewalker"><span class="secno">7.2 </span>Interface <code>TreeWalker</code></a></li>
-   <li><a href="#interface-nodefilter"><span class="secno">7.3 </span>Interface <code>NodeFilter</code></a></ol></li>
- <li><a href="#collections"><span class="secno">8 </span>Collections</a>
-  <ol class="toc">
-   <li><a href="#interface-nodelist"><span class="secno">8.1 </span>Interface <code>NodeList</code></a></li>
-   <li><a href="#interface-htmlcollection"><span class="secno">8.2 </span>Interface <code>HTMLCollection</code></a></ol></li>
- <li><a href="#lists"><span class="secno">9 </span>Lists</a>
-  <ol class="toc">
-   <li><a href="#interface-domstringlist"><span class="secno">9.1 </span>Interface <code>DOMStringList</code></a></li>
-   <li><a href="#interface-domtokenlist"><span class="secno">9.2 </span>Interface <code>DOMTokenList</code></a></li>
-   <li><a href="#interface-domsettabletokenlist"><span class="secno">9.3 </span>Interface <code>DOMSettableTokenList</code></a></ol></li>
- <li><a href="#historical"><span class="secno">10 </span>Historical</a>
-  <ol class="toc">
-   <li><a href="#dom-events"><span class="secno">10.1 </span>DOM Events</a></li>
-   <li><a href="#dom-core"><span class="secno">10.2 </span>DOM Core</a></li>
-   <li><a href="#dom-range"><span class="secno">10.3 </span>DOM Range</a></li>
-   <li><a href="#dom-traversal"><span class="secno">10.4 </span>DOM Traversal</a></ol></li>
- <li><a class="no-num" href="#references">References</a></li>
- <li><a class="no-num" href="#acknowledgments">Acknowledgments</a></ol>
-<!--end-toc-->
-
-
-
-<h2 class="no-num" id="goals">Goals</h2>
-
-<p>This specification standardizes the DOM. It does so as follows:</p>
-
-<ol>
- <li>
-  <p>By consolidating <cite>DOM Level 3 Core</cite>
-  <a class="informative" href="#refsDOM3CORE">[DOM3CORE]</a>,
-  <cite>Element Traversal</cite>
-  <a class="informative" href="#refsELEMENTTRAVERSAL">[ELEMENTTRAVERSAL]</a>, the
-  "DOM Event Architecture" and "Basic Event Interfaces" chapters of
-  <cite>DOM Level 3 Events</cite>
-  <a class="informative" href="#refsDOM3EVENTS">[DOM3EVENTS]</a> (specific type
-  of events do not belong in the base specification), and
-  <cite>DOM Level 2 Traversal and Range</cite>
-  <a class="informative" href="#refsDOM2TR">[DOM2TR]</a>, and:
-
-  <ul>
-   <li>Aligning them with the needs of ECMAScript where possible.
-   <li>Aligning them with existing implementations.
-   <li>Simplifying them as much as possible.
-  </ul>
-
- <li><p>By moving features from HTML5 that ought to be part of the DOM
- platform here, while preventing a dependency on HTML5.
- <a class="informative" href="#refsHTML">[HTML]</a>
-
- <li>
-  <p>By defining a replacement for the "Mutation Events" and
-  "Mutation Name Event Types" chapters of <cite>DOM Level 3 Events</cite>
-  <a class="informative" href="#refsDOM3EVENTS">[DOM3EVENTS]</a> as the old model
-  was problematic.
-
-  <p class="note">The old model is expected to be removed from implementations
-  in due course.
-
- <li><p>By defining new features that simplify common DOM operations.
-</ol>
-
-
-
-<h2 id="conformance"><span class="secno">1 </span>Conformance</h2>
-<p>All diagrams, examples, and notes in this specification are
-non-normative, as are all sections explicitly marked non-normative.
-Everything else in this specification is normative.
-
-<p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
-NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
-"OPTIONAL" in the normative parts of this document are to be
-interpreted as described in RFC2119. For readability, these words do
-not appear in all uppercase letters in this specification.
-<a href="#refsRFC2119">[RFC2119]</a>
-
-<p>Requirements phrased in the imperative as part of algorithms
-(such as "strip any leading space characters" or "return false and
-terminate these steps") are to be interpreted with the meaning of the
-key word ("must", "should", "may", etc) used in introducing the
-algorithm.
-
-<p>Conformance requirements phrased as algorithms or specific steps
-may be implemented in any manner, so long as the end result is
-equivalent. (In particular, the algorithms defined in this
-specification are intended to be easy to follow, and not intended to
-be performant.)
-
-<p id="hardwareLimitations">User agents may impose
-implementation-specific limits on otherwise unconstrained inputs,
-e.g. to prevent denial of service attacks, to guard against running
-out of memory, or to work around platform-specific limitations.
-
-<p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
-
-<p>Unless otherwise stated, string comparisons are done in a <a href="#case-sensitive">case-sensitive</a> manner.
-
-<h3 id="dependencies"><span class="secno">1.1 </span>Dependencies</h3>
-
-<p>The IDL fragments in this specification must be interpreted as
-required for conforming IDL fragments, as described in the Web IDL
-specification. <a href="#refsWEBIDL">[WEBIDL]</a>
-
-<p>Some of the terms used in this specification are defined in
-<cite>Web IDL</cite>, <cite>XML</cite> and <cite>Namespaces in XML</cite>.
-<a href="#refsWEBIDL">[WEBIDL]</a>
-<a href="#refsXML">[XML]</a>
-<a href="#refsXMLNS">[XMLNS]</a>
-
-<h3 id="extensibility"><span class="secno">1.2 </span>Extensibility</h3>
-
-<p>Vendor-specific proprietary extensions to this specification are
-strongly discouraged. Authors must not use such extensions, as
-doing so reduces interoperability and fragments the user base,
-allowing only users of specific user agents to access the content in
-question.
-
-<p>If vendor-specific extensions are needed, the members should be
-prefixed by vendor-specific strings to prevent clashes with future
-versions of this specification. Extensions must be defined so that
-the use of extensions neither contradicts nor causes the
-non-conformance of functionality defined in the specification.
-<!-- thanks to QA Framework -->
-
-<p>When vendor-neutral extensions to this specification are needed,
-either this specification can be updated accordingly, or an
-extension specification can be written that overrides the
-requirements in this specification. When someone applying this
-specification to their activities decides that they will recognize
-the requirements of such an extension specification, it becomes an
-<dfn id="other-applicable-specifications" title="other applicable specifications">applicable
-specification</dfn> for the purposes of conformance requirements in
-this specification.
-<!-- http://www.w3.org/mid/17E341CD-E790-422C-9F9A-69347EE01CEB@iki.fi -->
-
-
-<h2 id="terminology"><span class="secno">2 </span>Terminology</h2>
-
-<p>The term <dfn id="context-object">context object</dfn> means the object on which the method
-or attribute being discussed was called. When the
-<a href="#context-object">context object</a> is unambiguous, the term can be omitted.
-
-<!-- XXX we should prolly explain that "set attribute X to Y" works even for
-readonly attributes when it is language for implementors -->
-
-<p>The <dfn id="preferred-mime-name">preferred MIME name</dfn> of a
-character encoding is the name or alias labeled as "preferred MIME name" in
-the IANA <cite>Character Sets</cite> registry, if there is one, or the
-encoding's name, if none of the aliases are so labeled.
-<a href="#refsIANACHARSET">[IANACHARSET]</a>
-<!-- copied from HTML -->
-
-<h3 id="trees"><span class="secno">2.1 </span>Trees</h3> <!-- Sorry reddit, this is not /r/trees -->
-
-<p>Just like most programming paradigms the Web platform has finite
-hierarchical tree structures, simply named
-<dfn id="concept-tree" title="concept-tree">trees</dfn>. The
-<dfn id="concept-tree-order" title="concept-tree-order">tree order</dfn> is preorder, depth-first
-traversal.
-<!-- http://en.wikipedia.org/wiki/Tree_traversal#Depth-first_Traversal -->
-
-<p>An object that <dfn id="concept-tree-participate" title="concept-tree-participate">participates</dfn> in
-a <a href="#concept-tree" title="concept-tree">tree</a> has a
-<dfn id="concept-tree-parent" title="concept-tree-parent">parent</dfn>, which is either another object
-or null, and an ordered list of zero or more
-<dfn id="concept-tree-child" title="concept-tree-child">child</dfn> objects.
-
-<p>The <dfn id="concept-tree-root" title="concept-tree-root">root</dfn> of an object is itself, if it
-has no <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>, or else it is the
-<a href="#concept-tree-root" title="concept-tree-root">root</a> of its
-<a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.
-
-<p>An object <var title="">A</var> is called a
-<dfn id="concept-tree-descendant" title="concept-tree-descendant">descendant</dfn> of an object
-<var title="">B</var>, if either <var title="">A</var> is a
-<a href="#concept-tree-child" title="concept-tree-child">child</a> of <var title="">B</var> or
-<var title="">A</var> is a <a href="#concept-tree-child" title="concept-tree-child">child</a> of an
-object <var title="">C</var> that is a
-<a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of <var title="">B</var>.
-
-<p>An
-<dfn id="concept-tree-inclusive-descendant" title="concept-tree-inclusive-descendant">inclusive descendant</dfn> is
-an object or one of its
-<a href="#concept-tree-descendant" title="concept-tree-descendant">descendants</a>.
-
-<p>An object <var title="">A</var> is called an
-<dfn id="concept-tree-ancestor" title="concept-tree-ancestor">ancestor</dfn> of an object
-<var title="">B</var> if and only if <var title="">B</var> is a
-<a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of
-<var title="">A</var>.
-
-<p>An <dfn id="concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</dfn> is
-an object or one of its <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestors</a>.
-
-<p>An object <var title="">A</var> is called a
-<dfn id="concept-tree-sibling" title="concept-tree-sibling">sibling</dfn> of an object
-<var title="">B</var>, if and only if <var title="">B</var> and <var title="">A</var>
-share the same non-null <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.
-
-<p>An object <var title="">A</var> is
-<dfn id="concept-tree-preceding" title="concept-tree-preceding">preceding</dfn> an object
-<var title="">B</var> if <var title="">A</var> and <var title="">B</var> are in the
-same <a href="#concept-tree" title="concept-tree">tree</a> and <var title="">A</var> comes
-before <var title="">B</var> in
-<a href="#concept-tree-order" title="concept-tree-order">tree order</a>.
-
-<p>An object <var title="">A</var> is
-<dfn id="concept-tree-following" title="concept-tree-following">following</dfn> an object
-<var title="">B</var> if <var title="">A</var> and <var title="">B</var> are in the
-same <a href="#concept-tree" title="concept-tree">tree</a> and <var title="">A</var> comes
-after <var title="">B</var> in
-<a href="#concept-tree-order" title="concept-tree-order">tree order</a>.
-
-<p>The <dfn id="concept-tree-first-child" title="concept-tree-first-child">first child</dfn> of an object is
-its first <a href="#concept-tree-child" title="concept-tree-child">child</a> or null if it has no
-<a href="#concept-tree-child" title="concept-tree-child">child</a>.
-
-<p>The <dfn id="concept-tree-last-child" title="concept-tree-last-child">last child</dfn> of an object is
-its last <a href="#concept-tree-child" title="concept-tree-child">child</a> or null if it has no
-<a href="#concept-tree-child" title="concept-tree-child">child</a>.
-
-<p>The <dfn id="concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</dfn> of an
-object is its first <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
-<a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a> or null if it has no
-<a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
-<a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a>.
-
-<p>The <dfn id="concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</dfn> of an
-object is its first <a href="#concept-tree-following" title="concept-tree-following">following</a>
-<a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a> or null if it has no
-<a href="#concept-tree-following" title="concept-tree-following">following</a>
-<a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a>.
-
-<p>The <dfn id="concept-tree-index" title="concept-tree-index">index</dfn> of an object is its number
-of <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
-<a href="#concept-tree-sibling" title="concept-tree-sibling">siblings</a>.
-
-
-<h3 id="strings"><span class="secno">2.2 </span>Strings</h3>
-<p>Comparing two strings in a <dfn id="case-sensitive">case-sensitive</dfn> manner means comparing them exactly, code point for code point.
-
-<p>Comparing two strings in a <dfn id="ascii-case-insensitive">ASCII case-insensitive</dfn> manner means comparing them exactly, code point for code point, except that the characters in the range U+0041 .. U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding characters in the range U+0061 .. U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z) are considered to also match.
-
-<p><dfn id="converted-to-ascii-uppercase" title="converted to ascii uppercase">Converting a string to ASCII uppercase</dfn> means replacing all characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z) with the corresponding characters in the range U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
-
-<p><dfn id="converted-to-ascii-lowercase" title="converted to ascii lowercase">Converting a string to ASCII lowercase</dfn> means replacing all characters in the range U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) with the corresponding characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z).
-
-<p>A string <var title="">pattern</var> is a <dfn id="prefix-match">prefix match</dfn> for a string
-<var title="">s</var> when <var title="">pattern</var> is not longer than
-<var title="">s</var> and truncating <var title="">s</var> to
-<var title="">pattern</var>'s length leaves the two strings as matches of each
-other.
-
-<p>The <dfn id="space-character" title="space character">space characters</dfn>, for the
-purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER
-TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and
-U+000D CARRIAGE RETURN (CR).
-
-
-<h3 id="common-microsyntaxes"><span class="secno">2.3 </span>Common microsyntaxes</h3>
-<h4 id="common-parser-idioms"><span class="secno">2.3.1 </span>Common parser idioms</h4>
-<p>Some of the micro-parsers described below follow the pattern of having an
-<var title="">input</var> variable that holds the string being parsed, and having a
-<var title="">position</var> variable pointing at the next character to parse in
-<var title="">input</var>.
-
-<p>For parsers based on this pattern, a step that requires the user agent to
-<dfn id="collect-a-sequence-of-characters">collect a sequence of characters</dfn> means that the following algorithm
-must be run, with <var title="">characters</var> being the set of characters that
-can be collected:
-
-<ol>
- <li><p>Let <var title="">input</var> and <var title="">position</var> be the same
- variables as those of the same name in the algorithm that invoked these steps.
-
- <li><p>Let <var title="">result</var> be the empty string.
-
- <li><p>While <var title="">position</var> does not point past the end of
- <var title="">input</var> and the character at <var title="">position</var> is one of
- the <var title="">characters</var>, append that character to the end of
- <var title="">result</var> and advance <var title="">position</var> to the next
- character in <var title="">input</var>.
-
- <li><p>Return <var title="">result</var>.
-</ol>
-
-<p>The step <dfn id="skip-whitespace">skip whitespace</dfn> means that the user agent
-must <a href="#collect-a-sequence-of-characters">collect a sequence of characters</a> that are <a href="#space-character" title="space character">space characters</a>. The collected
-characters are not used.
-
-<h4 id="space-separated-tokens"><span class="secno">2.3.2 </span>Space-separated tokens</h4>
-
-<p>A <dfn id="set-of-space-separated-tokens">set of space-separated tokens</dfn> is a string containing
-zero or more words (known as tokens) separated by one or more <a href="#space-character" title="space character">space characters</a>, where words consist
-of any string of one or more characters, none of which are <a href="#space-character" title="space character">space characters</a>.
-
-<p>A string containing a <a href="#set-of-space-separated-tokens">set of space-separated tokens</a>
-may have leading or trailing <a href="#space-character" title="space character">space
-characters</a>.
-
-<p>An <dfn id="unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</dfn> is a
-<a href="#set-of-space-separated-tokens">set of space-separated tokens</a> where none of the tokens
-are duplicated.
-
-<p>An <dfn id="ordered-set-of-unique-space-separated-tokens">ordered set of unique space-separated tokens</dfn> is a
-<a href="#set-of-space-separated-tokens">set of space-separated tokens</a> where none of the tokens
-are duplicated but where the order of the tokens is meaningful.
-
-<p><a href="#set-of-space-separated-tokens" title="set of space-separated tokens">Sets of
-space-separated tokens</a> sometimes have a defined set of
-allowed values. When a set of allowed values is defined, the tokens
-must all be from that list of allowed values; other values are
-non-conforming. If no such set of allowed values is provided, then
-all values are conforming.
-
-<p class="note">How tokens in a <a href="#set-of-space-separated-tokens">set of space-separated
-tokens</a> are to be compared (e.g. case-sensitively or not) is
-defined on a per-set basis.
-
-<div class="impl">
-
-<p>When a user agent has to <dfn id="split-a-string-on-spaces">split a string on spaces</dfn>, it
-must use the following algorithm:
-
-<ol>
- <li><p>Let <var title="">input</var> be the string being parsed.
-
- <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>,
- initially pointing at the start of the string.
-
- <li><p>Let <var title="">tokens</var> be a list of tokens, initially empty.
-
- <li><p><a href="#skip-whitespace">Skip whitespace</a>.
-
- <li><p>While <var title="">position</var> is not past the end of
- <var title="">input</var>:
-
-  <ol>
-   <li><p><a href="#collect-a-sequence-of-characters">Collect a sequence of characters</a> that are not
-   <a href="#space-character" title="space character">space characters</a>.
-
-   <li><p>Add the string collected in the previous step to
-   <var title="">tokens</var>.
-
-   <li><p><a href="#skip-whitespace">Skip whitespace</a>.
-  </ol>
-
- <li><p>Return <var title="">tokens</var>.
-</ol>
-
-<p>When a user agent has to <dfn id="remove-a-token-from-a-string">remove a token from a string</dfn>,
-it must use the following algorithm:
-
-<ol>
- <li><p>Let <var title="">input</var> be the string being modified.
-
- <li><p>Let <var title="">token</var> be the token being removed. It will not
- contain any <a href="#space-character" title="space character">space characters</a>.
-
- <li><p>Let <var title="">output</var> be the output string, initially empty.
-
- <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>,
- initially pointing at the start of the string.
-
- <li><p><i title="">Loop</i>: If <var title="">position</var> is beyond the end of
- <var title="">input</var>, terminate these steps.
-
- <li>
-  <p>If the character at <var title="">position</var> is a <a href="#space-character">space
-  character</a>:
-
-  <ol>
-   <li><p>Append the character at <var title="">position</var> to the end of <var title="">output</var>.
-
-   <li><p>Advance <var title="">position</var> so it points at the next character
-   in <var title="">input</var>.
-
-   <li><p>Return to the step labeled <i title="">loop</i>.
-  </ol>
-
- <li><p>Otherwise, the character at <var title="">position</var> is the first
- character of a token. <a href="#collect-a-sequence-of-characters">Collect a sequence of characters</a> that are
- not <a href="#space-character" title="space character">space characters</a>, and let that be <var title="">s</var>.
-
- <li>
-  <p>If <var title="">s</var> is exactly equal to <var title="">token</var>, then:
-
-  <ol>
-   <li><p><a href="#skip-whitespace">Skip whitespace</a> (in <var title="">input</var>).
-
-   <li><p>Remove any <a href="#space-character" title="space character">space characters</a>
-   currently at the end of <var title="">output</var>.
-
-   <li><p>If <var title="">position</var> is not past the end of <var title="">input</var>, and <var title="">output</var> is not the empty string,
-   append a single U+0020 SPACE character at the end of <var title="">output</var>.
-  </ol>
-
- <li><p>Otherwise, append <var title="">s</var> to the end of <var title="">output</var>.
-
- <li><p>Return to the step labeled <i title="">loop</i>.
-</ol>
-
-<p class="note">This causes any occurrences of the token to be
-removed from the string, and any spaces that were surrounding the
-token to be collapsed to a single space, except at the start and end
-of the string, where such spaces are removed.
-
-</div>
-
-
-<h3 id="namespaces"><span class="secno">2.4 </span>Namespaces</h3>
-<p>The <dfn id="html-namespace">HTML namespace</dfn> is <code title="">http://www.w3.org/1999/xhtml</code>.
-
-<p>The <dfn id="xml-namespace">XML namespace</dfn> is <code title="">http://www.w3.org/XML/1998/namespace</code>.
-
-<p>The <dfn id="xmlns-namespace">XMLNS namespace</dfn> is <code title="">http://www.w3.org/2000/xmlns/</code>.
-
-
-<h2 id="errors"><span class="secno">3 </span>Errors</h2>
-<h3 id="exception-domexception"><span class="secno">3.1 </span>Exception <code><a href="#domexception">DOMException</a></code></h3>
-<pre class="idl">exception <dfn id="domexception">DOMException</dfn> {
-  const unsigned short <a href="#dom-domexception-index_size_err" title="dom-DOMException-INDEX_SIZE_ERR">INDEX_SIZE_ERR</a> = 1;
-  const unsigned short <span title="dom-DOMException-DOMSTRING_SIZE_ERR">DOMSTRING_SIZE_ERR</span> = 2; // historical
-  const unsigned short <a href="#dom-domexception-hierarchy_request_err" title="dom-DOMException-HIERARCHY_REQUEST_ERR">HIERARCHY_REQUEST_ERR</a> = 3;
-  const unsigned short <a href="#dom-domexception-wrong_document_err" title="dom-DOMException-WRONG_DOCUMENT_ERR">WRONG_DOCUMENT_ERR</a> = 4;
-  const unsigned short <a href="#dom-domexception-invalid_character_err" title="dom-DOMException-INVALID_CHARACTER_ERR">INVALID_CHARACTER_ERR</a> = 5;
-  const unsigned short <span title="dom-DOMException-NO_DATA_ALLOWED_ERR">NO_DATA_ALLOWED_ERR</span> = 6; // historical
-  const unsigned short <a href="#dom-domexception-no_modification_allowed_err" title="dom-DOMException-NO_MODIFICATION_ALLOWED_ERR">NO_MODIFICATION_ALLOWED_ERR</a> = 7;
-  const unsigned short <a href="#dom-domexception-not_found_err" title="dom-DOMException-NOT_FOUND_ERR">NOT_FOUND_ERR</a> = 8;
-  const unsigned short <a href="#dom-domexception-not_supported_err" title="dom-DOMException-NOT_SUPPORTED_ERR">NOT_SUPPORTED_ERR</a> = 9;
-  const unsigned short <span title="dom-DOMException-INUSE_ATTRIBUTE_ERR">INUSE_ATTRIBUTE_ERR</span> = 10; // historical
-  const unsigned short <a href="#dom-domexception-invalid_state_err" title="dom-DOMException-INVALID_STATE_ERR">INVALID_STATE_ERR</a> = 11;
-  const unsigned short <a href="#dom-domexception-syntax_err" title="dom-DOMException-SYNTAX_ERR">SYNTAX_ERR</a> = 12;
-  const unsigned short <a href="#dom-domexception-invalid_modification_err" title="dom-DOMException-INVALID_MODIFICATION_ERR">INVALID_MODIFICATION_ERR</a> = 13;
-  const unsigned short <a href="#dom-domexception-namespace_err" title="dom-DOMException-NAMESPACE_ERR">NAMESPACE_ERR</a> = 14;
-  const unsigned short <a href="#dom-domexception-invalid_access_err" title="dom-DOMException-INVALID_ACCESS_ERR">INVALID_ACCESS_ERR</a> = 15;
-  const unsigned short <span title="dom-DOMException-VALIDATION_ERR">VALIDATION_ERR</span> = 16; // historical
-  const unsigned short <a href="#dom-domexception-type_mismatch_err" title="dom-DOMException-TYPE_MISMATCH_ERR">TYPE_MISMATCH_ERR</a> = 17;
-  const unsigned short <a href="#dom-domexception-security_err" title="dom-DOMException-SECURITY_ERR">SECURITY_ERR</a> = 18;
-  const unsigned short <a href="#dom-domexception-network_err" title="dom-DOMException-NETWORK_ERR">NETWORK_ERR</a> = 19;
-  const unsigned short <a href="#dom-domexception-abort_err" title="dom-DOMException-ABORT_ERR">ABORT_ERR</a> = 20;
-  const unsigned short <a href="#dom-domexception-url_mismatch_err" title="dom-DOMException-URL_MISMATCH_ERR">URL_MISMATCH_ERR</a> = 21;
-  const unsigned short <a href="#dom-domexception-quota_exceeded_err" title="dom-DOMException-QUOTA_EXCEEDED_ERR">QUOTA_EXCEEDED_ERR</a> = 22;
-  const unsigned short <a href="#dom-domexception-timeout_err" title="dom-DOMException-TIMEOUT_ERR">TIMEOUT_ERR</a> = 23;
-  const unsigned short <a href="#dom-domexception-invalid_node_type_err" title="dom-DOMException-INVALID_NODE_TYPE_ERR">INVALID_NODE_TYPE_ERR</a> = 24;
-  const unsigned short <a href="#dom-domexception-data_clone_err" title="dom-DOMException-DATA_CLONE_ERR">DATA_CLONE_ERR</a> = 25;
-  unsigned short <a href="#dom-domexception-code" title="dom-DOMException-code">code</a>;
-};</pre>
-
-<p>The <dfn id="dom-domexception-code" title="dom-DOMException-code"><code>code</code></dfn> exception
-field must return the value it was initialized to. When an exception is
-created it must be initialized to zero.
-
-<p>To <dfn id="concept-throw" title="concept-throw">throw</dfn> a <var title="">name</var> exception
-these steps must be run:
-
-<ol>
- <li><p>Create a new <code><a href="#domexception">DOMException</a></code> exception whose
- <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-exception-name">name</a> is <var title="">name</var>.
-
- <li><p>Set its <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-exception-message">message</a> to a
- user agent-defined value.
-
- <li><p>If its <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-exception-name">name</a> is in the first
- column of the <a href="#error-names-table">error names table</a> and has a corresponding legacy
- <code title="dom-DOMException-code"><a href="#dom-domexception-code">code</a></code> exception field value in the
- third column, set its <code title="dom-DOMException-code"><a href="#dom-domexception-code">code</a></code>
- exception field to that value.
-
- <li><p><a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-throw">Throw</a> the exception.
-</ol>
-
-<p class="example">To
-<i title="">throw a "<code><a href="#timeouterror">TimeoutError</a></code>" exception</i>, a
-user agent would construct a <code><a href="#domexception">DOMException</a></code> exception whose
-<a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-exception-name">name</a> is
-"<code><a href="#timeouterror">TimeoutError</a></code>" and
-<code title="dom-DOMException-code"><a href="#dom-domexception-code">code</a></code> exception field value is 23,
-and actually throw that object as an exception. In JavaScript, this
-exception will have a <code title="">name</code> property whose value is
-"<code><a href="#timeouterror">TimeoutError</a></code>".
-
-
-<h3 id="interface-domerror"><span class="secno">3.2 </span>Interface <code><a href="#domerror">DOMError</a></code></h3>
-
-<p class="note">This interface is intended for other specifications that want
-to introduce error handling through other means than exceptions. As with
-exceptions, the <a href="#error-names-table">error names table</a> is used.
-
-<pre class="idl">interface <dfn id="domerror">DOMError</dfn> {
-  readonly attribute DOMString <a href="#dom-domerror-name" title="dom-DOMError-name">name</a>;
-};</pre>
-
-<p>The <dfn id="dom-domerror-name" title="dom-DOMError-name"><code>name</code></dfn> attribute must
-return the value it was initialized to.
-
-<p>A
-<dfn id="concept-domerror" title="concept-DOMError"><var title="">name</var> <code>DOMError</code></dfn>
-means a <code><a href="#domerror">DOMError</a></code> object whose
-<code title="dom-DOMError-name"><a href="#dom-domerror-name">name</a></code> attribute is initialized to
-<var title="">name</var>.
-
-<p class="example">A specification could say that an <code title="">error</code>
-attribute must return a
-<a href="#concept-domerror" title="concept-DOMError">"<code>SyntaxError</code>" <code>DOMError</code></a>.
-
-
-<h3 id="error-names-0"><span class="secno">3.3 </span>Error names</h3>
-
-<p>The <dfn id="error-names-table">error names table</dfn> below lists all the allowed error names,
-a description, and legacy <code title="dom-DOMException-code"><a href="#dom-domexception-code">code</a></code>
-exception field values (when the error name is used for
-<a href="#concept-throw" title="concept-throw">throwing</a> an exception).
-
-<p class="note">If your specification requires an error name not listed here,
-please file a bug as indicated at the top of this specification and it will
-be addressed shortly. Thanks!
-
-<table id="error-names">
- <thead>
- <tr><th>Name<th>Description<th>Legacy <code title="dom-DOMException-code"><a href="#dom-domexception-code">code</a></code> exception field value (if any)
- <tbody>
- <tr>
-  <td>"<dfn id="indexsizeerror"><code>IndexSizeError</code></dfn>"
-  <td>The index is not in the allowed range.
-  <td><dfn id="dom-domexception-index_size_err" title="dom-DOMException-INDEX_SIZE_ERR"><code>INDEX_SIZE_ERR</code></dfn> (1)
- <tr>
-  <td>"<dfn id="hierarchyrequesterror"><code>HierarchyRequestError</code></dfn>"
-  <td>The operation would yield an incorrect <a href="#node-tree">node tree</a>.
-  <td><dfn id="dom-domexception-hierarchy_request_err" title="dom-DOMException-HIERARCHY_REQUEST_ERR"><code>HIERARCHY_REQUEST_ERR</code></dfn> (3)
- <tr>
-  <td>"<dfn id="wrongdocumenterror"><code>WrongDocumentError</code></dfn>"
-  <td>The object is in the wrong <a href="#concept-document" title="concept-document">document</a>.
-  <td><dfn id="dom-domexception-wrong_document_err" title="dom-DOMException-WRONG_DOCUMENT_ERR"><code>WRONG_DOCUMENT_ERR</code></dfn> (4)
- <tr>
-  <td>"<dfn id="invalidcharactererror"><code>InvalidCharacterError</code></dfn>"
-  <td>The string contains invalid characters.
-  <td><dfn id="dom-domexception-invalid_character_err" title="dom-DOMException-INVALID_CHARACTER_ERR"><code>INVALID_CHARACTER_ERR</code></dfn> (5)
- <tr>
-  <td>"<dfn id="nomodificationallowederror"><code>NoModificationAllowedError</code></dfn>"
-  <td>The object can not be modified.
-  <td><dfn id="dom-domexception-no_modification_allowed_err" title="dom-DOMException-NO_MODIFICATION_ALLOWED_ERR"><code>NO_MODIFICATION_ALLOWED_ERR</code></dfn> (7)
- <tr>
-  <td>"<dfn id="notfounderror"><code>NotFoundError</code></dfn>"
-  <td>The object can not be found here.
-  <td><dfn id="dom-domexception-not_found_err" title="dom-DOMException-NOT_FOUND_ERR"><code>NOT_FOUND_ERR</code></dfn> (8)
- <tr>
-  <td>"<dfn id="notsupportederror"><code>NotSupportedError</code></dfn>"
-  <td>The operation is not supported.
-  <td><dfn id="dom-domexception-not_supported_err" title="dom-DOMException-NOT_SUPPORTED_ERR"><code>NOT_SUPPORTED_ERR</code></dfn> (9)
- <tr>
-  <td>"<dfn id="invalidstateerror"><code>InvalidStateError</code></dfn>"
-  <td>The object is in an invalid state.
-  <td><dfn id="dom-domexception-invalid_state_err" title="dom-DOMException-INVALID_STATE_ERR"><code>INVALID_STATE_ERR</code></dfn> (11)
- <tr>
-  <td>"<dfn id="syntaxerror"><code>SyntaxError</code></dfn>"
-  <td>The string did not match the expected pattern.
-  <td><dfn id="dom-domexception-syntax_err" title="dom-DOMException-SYNTAX_ERR"><code>SYNTAX_ERR</code></dfn> (12)
- <tr>
-  <td>"<dfn id="invalidmodificationerror"><code>InvalidModificationError</code></dfn>"
-  <td>The object can not be modified in this way.
-  <td><dfn id="dom-domexception-invalid_modification_err" title="dom-DOMException-INVALID_MODIFICATION_ERR"><code>INVALID_MODIFICATION_ERR</code></dfn> (13)
- <tr>
-  <td>"<dfn id="namespaceerror"><code>NamespaceError</code></dfn>"
-  <td>The operation is not allowed by <cite>Namespaces in XML</cite>. <a href="#refsXMLNS">[XMLNS]</a>
-  <td><dfn id="dom-domexception-namespace_err" title="dom-DOMException-NAMESPACE_ERR"><code>NAMESPACE_ERR</code></dfn> (14)
- <tr>
-  <td>"<dfn id="invalidaccesserror"><code>InvalidAccessError</code></dfn>"
-  <td>The object does not support the operation or argument.
-  <td><dfn id="dom-domexception-invalid_access_err" title="dom-DOMException-INVALID_ACCESS_ERR"><code>INVALID_ACCESS_ERR</code></dfn> (15)
- <tr>
-  <td>"<dfn id="typemismatcherror"><code>TypeMismatchError</code></dfn>"
-  <td>The type of the object does not match the expected type.
-  <td><dfn id="dom-domexception-type_mismatch_err" title="dom-DOMException-TYPE_MISMATCH_ERR"><code>TYPE_MISMATCH_ERR</code></dfn> (17)
- <tr>
-  <!-- XHR -->
-  <td>"<dfn id="securityerror"><code>SecurityError</code></dfn>"
-  <td>The operation is insecure.
-  <td><dfn id="dom-domexception-security_err" title="dom-DOMException-SECURITY_ERR"><code>SECURITY_ERR</code></dfn> (18)
- <tr>
-  <!-- XHR -->
-  <td>"<dfn id="networkerror"><code>NetworkError</code></dfn>"
-  <td>A network error occurred.
-  <td><dfn id="dom-domexception-network_err" title="dom-DOMException-NETWORK_ERR"><code>NETWORK_ERR</code></dfn> (19)
- <tr>
-  <!-- XHR -->
-  <td>"<dfn id="aborterror"><code>AbortError</code></dfn>"
-  <td>The operation was aborted.
-  <td><dfn id="dom-domexception-abort_err" title="dom-DOMException-ABORT_ERR"><code>ABORT_ERR</code></dfn> (20)
- <tr>
-  <!-- Workers -->
-  <td>"<dfn id="urlmismatcherror"><code>URLMismatchError</code></dfn>"
-  <td>The given URL does not match another URL.
-  <td><dfn id="dom-domexception-url_mismatch_err" title="dom-DOMException-URL_MISMATCH_ERR"><code>URL_MISMATCH_ERR</code></dfn> (21)
- <tr>
-  <!-- HTML -->
-  <td>"<dfn id="quotaexceedederror"><code>QuotaExceededError</code></dfn>"
-  <td>The quota has been exceeded.
-  <td><dfn id="dom-domexception-quota_exceeded_err" title="dom-DOMException-QUOTA_EXCEEDED_ERR"><code>QUOTA_EXCEEDED_ERR</code></dfn> (22)
- <tr>
-  <!-- XHR -->
-  <td>"<dfn id="timeouterror"><code>TimeoutError</code></dfn>"
-  <td>The operation timed out.
-  <td><dfn id="dom-domexception-timeout_err" title="dom-DOMException-TIMEOUT_ERR"><code>TIMEOUT_ERR</code></dfn> (23)
- <tr>
-  <td>"<dfn id="invalidnodetypeerror"><code>InvalidNodeTypeError</code></dfn>"
-  <td>The supplied node is incorrect or has an incorrect ancestor for this operation.
-  <td><dfn id="dom-domexception-invalid_node_type_err" title="dom-DOMException-INVALID_NODE_TYPE_ERR"><code>INVALID_NODE_TYPE_ERR</code></dfn> (24)
- <tr>
-  <!-- HTML -->
-  <td>"<dfn id="datacloneerror"><code>DataCloneError</code></dfn>"
-  <td>The object can not be cloned.
-  <td><dfn id="dom-domexception-data_clone_err" title="dom-DOMException-DATA_CLONE_ERR"><code>DATA_CLONE_ERR</code></dfn> (25)
-</table>
-
-
-
-<h2 id="events"><span class="secno">4 </span>Events</h2>
-
-<h3 id="introduction-to-dom-events"><span class="secno">4.1 </span>Introduction to "DOM Events"</h3>
-
-<p>Throughout the web platform <a href="#concept-event" title="concept-event">events</a> are
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> to objects to signal an
-occurrence, such as network activity or user interaction. These objects
-implement the <code><a href="#eventtarget">EventTarget</a></code> interface and can therefore add
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a> to observe
-<a href="#concept-event" title="concept-event">events</a>:
-
-<pre><code>obj.addEventListener("load", imgFetched)
-
-function imgFetched(ev) {
-  // great success
-  &hellip;
-}</code></pre>
-
-<p><a href="#concept-event-listener" title="concept-event-listener">Event listeners</a> can be removed
-by utilizing the
-<code title="dom-EventTarget-removeEventListener"><a href="#dom-eventtarget-removeeventlistener">removeEventListener()</a></code>
-method, passing the same arguments.
-
-<p><a href="#concept-event" title="concept-event">Events</a> are objects too and implement the
-<code><a href="#event">Event</a></code> interface (or a derived interface). In the example above
-<var title="">ev</var> is the <a href="#concept-event" title="concept-event">event</a>. It is
-passed as argument to
-<a href="#concept-event-listener" title="concept-event-listener">event listener</a>'s <b>callback</b>
-(typically a JavaScript Function as shown above).
-<a href="#concept-event-listener" title="concept-event-listener">Event listeners</a> key off the
-<a href="#concept-event" title="concept-event">event</a>'s
-<code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute value
-("<code title="">load</code>" in the above example). The
-<a href="#concept-event" title="concept-event">event</a>'s
-<code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value returns the
-object to which the <a href="#concept-event" title="concept-event">event</a> was
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> (<var title="">obj</var>
-above).
-
-<p>Now while typically <a href="#concept-event" title="concept-event">events</a> are
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> by the user agent as
-the result of user interaction or the completion of some task, applications
-can <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatch</a>
-<a href="#concept-event" title="concept-event">events</a> themselves, commonly known as
-synthetic events:
-
-<pre><code>// add an appropriate event listener
-obj.addEventListener("cat", function(e) { process(e.detail) })
-
-// create and dispatch the event
-var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
-obj.dispatchEvent(event)</code></pre>
-
-<p>Apart from signaling, <a href="#concept-event" title="concept-event">events</a> are
-sometimes also used to let an application control what happens next in an
-operation. For instance as part of form submission an
-<a href="#concept-event" title="concept-event">event</a> whose
-<code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute value is
-"<code title="">submit</code>" is
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a>. If this
-<a href="#concept-event" title="concept-event">event</a>'s
-<code title="dom-Event-preventDefault"><a href="#dom-event-preventdefault">preventDefault()</a></code> method is
-invoked, form submission will be terminated. Applications who wish to make
-use of this functionality through <a href="#concept-event" title="concept-event">events</a>
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> by the application
-(synthetic events) can make use of the return value of the
-<code title="dom-EventTarget-dispatchEvent"><a href="#dom-eventtarget-dispatchevent">dispatchEvent()</a></code> method:
-
-<pre><code>if(obj.dispatchEvent(event)) {
-  // event was not canceled, time for some magic
-  &hellip;
-}</code></pre>
-
-<p>When an <a href="#concept-event" title="concept-event">event</a> is
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> to an object that
-<a href="#concept-tree-participate" title="concept-tree-participate">participates</a> in a
-<a href="#concept-tree" title="concept-tree">tree</a> (e.g. an
-<a href="#concept-element" title="concept-element">element</a>), it can reach
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a> on that object's
-<a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestors</a> too. First all object's
-<a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a>
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a> whose
-<b>capture</b> variable is set to true are invoked, in
-<a href="#concept-tree-order" title="concept-tree-order">tree order</a>. Second, object's own
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a> are invoked. And
-finally, and only if <a href="#concept-event" title="concept-event">event</a>'s
-<a href="#dom-event-bubbles" title="dom-Event-bubbles">bubbles</a> attribute value is true,
-object's  <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a>
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a> are invoked again,
-but now in reverse <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.
-
-<p>Lets look at an example on how <a href="#concept-event" title="concept-event">events</a>
-work in a <a href="#concept-tree" title="concept-tree">tree</a>:
-
-<pre><code>&lt;!doctype html&gt;
-&lt;html&gt;
- &lt;head&gt;
-  &lt;title&gt;Boring example&lt;/title&gt;
- &lt;/head&gt;
- &lt;body&gt;
-  &lt;p&gt;Hello &lt;span id=x&gt;world&lt;/span&gt;!&lt;/p&gt;
-  &lt;script&gt;
-   function test(e) {
-     debug(e.target, e.currentTarget, e.eventPhase)
-   }
-   document.addEventListener("hey", test, true)
-   document.body.addEventListener("hey", test)
-   var ev = new Event("hey", {bubbles:true})
-   document.getElementById("x").dispatchEvent(ev)
-  &lt;/script&gt;
- &lt;/body&gt;
-&lt;/html&gt;</code></pre>
-
-<p>The <code title="">debug</code> function will be invoked twice. Each time
-the <a href="#concept-event" title="concept-event">events</a>'s
-<code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value will be the
-<code title="">span</code> <a href="#concept-element" title="concept-element">element</a>. The
-first time <code title="dom-Event-target"><a href="#dom-event-target">currentTarget</a></code> attribute's
-value will be the <a href="#concept-document" title="concept-document">document</a>, the second
-time the <code title="">body</code> <a href="#concept-element" title="concept-element">element</a>.
-<code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute's value
-switches from <code title="dom-Event-CAPTURING_PHASE"><a href="#dom-event-capturing_phase">CAPTURING_PHASE</a></code>
-to <code title="dom-Event-BUBBLING_PHASE"><a href="#dom-event-bubbling_phase">BUBBLING_PHASE</a></code>. If an
-<a href="#concept-event-listener" title="concept-event-listener">event listener</a> was registered for
-the <code title="">span</code> <a href="#concept-element" title="concept-element">element</a>,
-<code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute's value
-would have been <code title="dom-Event-AT_TARGET"><a href="#dom-event-at_target">AT_TARGET</a></code>.
-
-
-<h3 id="interface-event"><span class="secno">4.2 </span>Interface <code><a href="#event">Event</a></code></h3>
-
-<pre class="idl">[Constructor(DOMString <var title="">type</var>, optional <a href="#eventinit">EventInit</a> <var title="">eventInitDict</var>)]
-interface <dfn id="event">Event</dfn> {
-  readonly attribute DOMString <a href="#dom-event-type" title="dom-Event-type">type</a>;
-  readonly attribute <a href="#eventtarget">EventTarget</a>? <a href="#dom-event-target" title="dom-Event-target">target</a>;
-  readonly attribute <a href="#eventtarget">EventTarget</a>? <a href="#dom-event-currenttarget" title="dom-Event-currentTarget">currentTarget</a>;
-
-  const unsigned short <a href="#dom-event-none" title="dom-Event-NONE">NONE</a> = 0;
-  const unsigned short <a href="#dom-event-capturing_phase" title="dom-Event-CAPTURING_PHASE">CAPTURING_PHASE</a> = 1;
-  const unsigned short <a href="#dom-event-at_target" title="dom-Event-AT_TARGET">AT_TARGET</a> = 2;
-  const unsigned short <a href="#dom-event-bubbling_phase" title="dom-Event-BUBBLING_PHASE">BUBBLING_PHASE</a> = 3;
-  readonly attribute unsigned short <a href="#dom-event-eventphase" title="dom-Event-eventPhase">eventPhase</a>;
-
-  void <a href="#dom-event-stoppropagation" title="dom-Event-stopPropagation">stopPropagation</a>();
-  void <a href="#dom-event-stopimmediatepropagation" title="dom-Event-stopImmediatePropagation">stopImmediatePropagation</a>();
-
-  readonly attribute boolean <a href="#dom-event-bubbles" title="dom-Event-bubbles">bubbles</a>;
-  readonly attribute boolean <a href="#dom-event-cancelable" title="dom-Event-cancelable">cancelable</a>;
-  void <a href="#dom-event-preventdefault" title="dom-Event-preventDefault">preventDefault</a>();
-  readonly attribute boolean <a href="#dom-event-defaultprevented" title="dom-Event-defaultPrevented">defaultPrevented</a>;
-
-  readonly attribute boolean <a href="#dom-event-istrusted" title="dom-Event-isTrusted">isTrusted</a>;
-  readonly attribute DOMTimeStamp <a href="#dom-event-timestamp" title="dom-Event-timeStamp">timeStamp</a>;
-
-  void <a href="#dom-event-initevent" title="dom-Event-initEvent">initEvent</a>(DOMString <var title="">type</var>, boolean <var title="">bubbles</var>, boolean <var title="">cancelable</var>);
-};
-
-dictionary <dfn id="eventinit">EventInit</dfn> {
-  boolean <span title="dom-EventInit-bubbles">bubbles</span>;
-  boolean <span title="dom-EventInit-cancelable">cancelable</span>;
-};</pre>
-
-<p>An <dfn id="concept-event" title="concept-event">event</dfn> allows for signaling that
-something has occurred. E.g. that an image has completed downloading. It is
-represented by the <code><a href="#event">Event</a></code> interface or an interface that
-inherits from the <code><a href="#event">Event</a></code> interface.</p>
-
-<dl class="domintro">
- <dt><code>var <var title="">event</var> = new Event(<var title="">type</var> [, <var title="">eventInitDict</var>])</code>
- <dd><p>Returns a new <var title="">event</var> whose
- <code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute value is set to
- <var title="">type</var>. The optional <var title="">eventInitDict</var> argument
- allows for setting the <code title="dom-Event-bubbles"><a href="#dom-event-bubbles">bubbles</a></code> and
- <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attributes via object
- members of the same name.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-type" title="dom-Event-type">type</a></code>
- <dd><p>Returns the type of <var title="">event</var>, e.g.
- "<code title="">click</code>", "<code title="">hashchange</code>", or
- "<code title="">submit</code>".
-
- <dt><code><var title="">event</var> . <a href="#dom-event-target" title="dom-Event-target">target</a></code>
- <dd><p>Returns the object <var title="">event</var> is
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> to.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-currenttarget" title="dom-Event-currentTarget">currentTarget</a></code>
- <dd><p>Returns the object whose
- <a href="#concept-event-listener" title="concept-event-listener">event listener</a>'s <b>callback</b>
- is invoked.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-eventphase" title="dom-Event-eventPhase">eventPhase</a></code>
- <dd><p>Returns the <a href="#concept-event" title="concept-event">event</a>'s phase, which is
- one of <code title="dom-Event-NONE"><a href="#dom-event-none">NONE</a></code>,
- <code title="dom-Event-CAPTURING_PHASE"><a href="#dom-event-capturing_phase">CAPTURING_PHASE</a></code>,
- <code title="dom-Event-AT_TARGET"><a href="#dom-event-at_target">AT_TARGET</a></code>, and
- <code title="dom-Event-BUBBLING_PHASE"><a href="#dom-event-bubbling_phase">BUBBLING_PHASE</a></code>.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-stoppropagation" title="dom-Event-stopPropagation">stopPropagation</a>()</code>
- <dd><p>When <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> in a
- <a href="#concept-tree" title="concept-tree">tree</a>, invoking this method prevents
- <var title="">event</var> from reaching any other objects than the current.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-stopimmediatepropagation" title="dom-Event-stopImmediatePropagation">stopImmediatePropagation</a>()</code>
- <dd><p>Invoking this method prevents <var title="">event</var> from reaching
- any <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> registered
- after the current one and when
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> in a
- <a href="#concept-tree" title="concept-tree">tree</a> also prevents
- <var title="">event</var> from reaching any other objects.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-bubbles" title="dom-Event-bubbles">bubbles</a></code>
- <dd><p>Returns true if <var title="">event</var>'s goes through its <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value's <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestors</a> in reverse <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, or false otherwise.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-cancelable" title="dom-Event-cancelable">cancelable</a></code>
- <dd><p>Returns true or false depending on how <var title="">event</var> was
- initialized. Its return value does not always carry meaning, but true can
- indicate that part of the operation during which <var title="">event</var> was
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a>, can be canceled by
- invoking the <code title="dom-Event-preventDefault"><a href="#dom-event-preventdefault">preventDefault()</a></code>
- method.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-preventdefault" title="dom-Event-preventDefault">preventDefault</a>()</code>
- <dd><p>If invoked when the
- <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attribute value is true,
- signals to the operation that caused <var title="">event</var> to be
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> that it needs to be
- canceled.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-defaultprevented" title="dom-Event-defaultPrevented">defaultPrevented</a></code>
- <dd><p>Returns true if
- <code title="dom-Event-preventDefault"><a href="#dom-event-preventdefault">preventDefault()</a></code> was invoked
- while the <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attribute
- value is true, or false otherwise.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-istrusted" title="dom-Event-isTrusted">isTrusted</a></code>
- <dd><p>Returns true if <var title="">event</var> was
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> by the user agent, or
- false otherwise.
-
- <dt><code><var title="">event</var> . <a href="#dom-event-timestamp" title="dom-Event-timeStamp">timeStamp</a></code>
- <dd><p>Returns the creation time of <var title="">event</var> in the number of
- milliseconds that passed since 00:00:00 UTC on 1 January 1970.
-
- <!-- initEvent is dead -->
-</dl>
-
-<p>The <dfn id="dom-event-type" title="dom-Event-type"><code>type</code></dfn> attribute must
-return the value it was initialized to. When an
-<a href="#concept-event" title="concept-event">event</a> is created the attribute must be
-initialized to the empty string.
-
-<p>The <dfn id="dom-event-target" title="dom-Event-target"><code>target</code></dfn> and
-<dfn id="dom-event-currenttarget" title="dom-Event-currentTarget"><code>currentTarget</code></dfn>
-attributes must return the values they were initialized to. When an
-<a href="#concept-event" title="concept-event">event</a> is created the attributes must be
-initialized to null.
-
-<p>The <dfn id="dom-event-eventphase" title="dom-Event-eventPhase"><code>eventPhase</code></dfn>
-attribute must return the value it was initialized to, which must be one of
-the following:</p>
-<dl>
- <dt><dfn id="dom-event-none" title="dom-Event-NONE"><code>NONE</code></dfn> (numeric value 0)
- <dd><p><a href="#concept-event" title="concept-event">Events</a> not currently
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> are in this phase.
- <dt><dfn id="dom-event-capturing_phase" title="dom-Event-CAPTURING_PHASE"><code>CAPTURING_PHASE</code></dfn> (numeric value 1)</dt>
- <dd><p>When an <a href="#concept-event" title="concept-event">event</a> is
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> to an object that
- <a href="#concept-tree-participate" title="concept-tree-participate">participates</a> in a
- <a href="#concept-tree" title="concept-tree">tree</a> it will be in this phase before it
- reaches its <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value.
- <dt><dfn id="dom-event-at_target" title="dom-Event-AT_TARGET"><code>AT_TARGET</code></dfn> (numeric value 2)
- <dd><p>When an <a href="#concept-event" title="concept-event">event</a> is
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> it will be in this
- phase on its <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value.
- <dt><dfn id="dom-event-bubbling_phase" title="dom-Event-BUBBLING_PHASE"><code>BUBBLING_PHASE</code></dfn> (numeric value 3)
- <dd><p>When an <a href="#concept-event" title="concept-event">event</a> is
- <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> to an object that
- <a href="#concept-tree-participate" title="concept-tree-participate">participates</a> in a
- <a href="#concept-tree" title="concept-tree">tree</a> it will be in this phase after it
- reaches its <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value.
-</dl>
-<p>Initially the attribute must be initialized to
-<code title="dom-Event-NONE"><a href="#dom-event-none">NONE</a></code>.
-
-<hr>
-
-<p>Each <a href="#concept-event" title="concept-event">event</a> has the following associated
-flags that are all initially unset:</p>
-<ul>
- <li><dfn id="stop-propagation-flag">stop propagation flag</dfn>
- <li><dfn id="stop-immediate-propagation-flag">stop immediate propagation flag</dfn>
- <li><dfn id="canceled-flag">canceled flag</dfn>
- <li><dfn id="initialized-flag">initialized flag</dfn>
- <li><dfn id="dispatch-flag">dispatch flag</dfn>
-</ul>
-
-<p>When the
-<dfn id="dom-event-stoppropagation" title="dom-Event-stopPropagation"><code>stopPropagation()</code></dfn>
-method is invoked the <a href="#stop-propagation-flag">stop propagation flag</a> must be set.
-<p>When the
-<dfn id="dom-event-stopimmediatepropagation" title="dom-Event-stopImmediatePropagation"><code>stopImmediatePropagation()</code></dfn>
-method is invoked both the <a href="#stop-propagation-flag">stop propagation flag</a> and
-<a href="#stop-immediate-propagation-flag">stop immediate propagation flag</a> must be set.
-
-<p>The <dfn id="dom-event-bubbles" title="dom-Event-bubbles"><code>bubbles</code></dfn> and
-<dfn id="dom-event-cancelable" title="dom-Event-cancelable"><code>cancelable</code></dfn> attributes
-must return the values they were initialized to. When an
-<a href="#concept-event" title="concept-event">event</a> is created the attributes must be
-initialized to false.
-
-<p>When the
-<dfn id="dom-event-preventdefault" title="dom-Event-preventDefault"><code>preventDefault()</code></dfn>
-method is invoked and the <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code>
-attribute is true, the <a href="#canceled-flag">canceled flag</a> must be set.
-
-<p>The <dfn id="dom-event-defaultprevented" title="dom-Event-defaultPrevented"><code>defaultPrevented</code></dfn>
-attribute must return true if the <a href="#canceled-flag">canceled flag</a> is set and
-false otherwise.
-
-<hr>
-
-<p>The <dfn id="dom-event-istrusted" title="dom-Event-isTrusted"><code>isTrusted</code></dfn> attribute
-must return the value it was initialized to. When an
-<a href="#concept-event" title="concept-event">event</a> is created the attribute must be
-initialized to false.
-
-<p>The <dfn id="dom-event-timestamp" title="dom-Event-timeStamp"><code>timeStamp</code></dfn> attribute
-must return the value it was initialized to. When an
-<a href="#concept-event" title="concept-event">event</a> is created the attribute must be
-initialized to the number of milliseconds that has passed since
-00:00:00 UTC on 1 January 1970.
-
-<!-- XXX leap seconds?
-         http://krijnhoetmer.nl/irc-logs/whatwg/20110707#l-330 -->
-
-<hr>
-
-<p>When the <dfn id="dom-event-initevent" title="dom-Event-initEvent"><code>initEvent(<var title="">type</var>, <var title="">bubbles</var>, <var title="">cancelable</var>)</code></dfn>
-method is invoked these steps must be run:</p>
-
-<ol>
- <li><p>Set the <a href="#initialized-flag">initialized flag</a>.
- <li><p>If the <a href="#dispatch-flag">dispatch flag</a> is set, terminate these steps.
- <li><p>Unset the <a href="#stop-propagation-flag">stop propagation flag</a>,
- <a href="#stop-immediate-propagation-flag">stop immediate propagation flag</a>, and
- <a href="#canceled-flag">canceled flag</a>.
- <li><p>Set the <code title="dom-Event-isTrusted"><a href="#dom-event-istrusted">isTrusted</a></code> attribute
- to false.
- <li><p>Set the <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute to
- null.
- <li><p>Set the <code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute to the
- <var title="">type</var> argument.
- <li><p>Set the <code title="dom-Event-bubbles"><a href="#dom-event-bubbles">bubbles</a></code> attribute to
- the <var title="">bubbles</var> argument.
- <li><p>Set the <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attribute
- to the <var title="">cancelable</var> argument.
-</ol>
-
-<p class="note">As <a href="#concept-event" title="concept-event">events</a> have constructors
-<code title="dom-Event-initEvent"><a href="#dom-event-initevent">initEvent()</a></code> is superfluous. However,
-it has to be supported for legacy content.
-
-
-<h3 id="interface-customevent"><span class="secno">4.3 </span>Interface <code><a href="#customevent">CustomEvent</a></code></h3>
-
-<pre class="idl">[Constructor(DOMString <var title="">type</var>, optional <a href="#customeventinit">CustomEventInit</a> <var title="">eventInitDict</var>)]
-interface <dfn id="customevent">CustomEvent</dfn> : <a href="#event">Event</a> {
-  readonly attribute any <a href="#dom-customevent-detail" title="dom-CustomEvent-detail">detail</a>;
-};
-
-dictionary <dfn id="customeventinit">CustomEventInit</dfn> : <a href="#eventinit">EventInit</a> {
-  any <span title="dom-CustomEventInit-detail">detail</span>;
-};</pre>
-
-<p><a href="#concept-event" title="concept-event">Events</a> using the
-<code><a href="#customevent">CustomEvent</a></code> interface can be used to carry custom data.</p>
-
-<dl class="domintro">
- <dt><code>var <var title="">event</var> = new CustomEvent(<var title="">type</var> [, <var title="">eventInitDict</var>])</code>
- <dd><p>Works analogously to the constructor for <code><a href="#event">Event</a></code> except
- that the optional <var title="">eventInitDict</var> argument now
- allows for setting the <code title="dom-Event-detail">detail</code> attribute
- too.
-
- <dt><code><var title="">event</var> . <a href="#dom-customevent-detail" title="dom-CustomEvent-detail">detail</a></code>
- <dd><p>Returns any custom data <var title="">event</var> was created with.
- Typically used for synthetic events.
-</dl>
-
-<p>The <dfn id="dom-customevent-detail" title="dom-CustomEvent-detail"><code>detail</code></dfn> attribute
-must return the value it was initialized to. When an
-<a href="#concept-event" title="concept-event">event</a> is created the attribute must be
-initialized to null.
-
-
-<h3 id="constructing-events"><span class="secno">4.4 </span>Constructing events</h3>
-
-<p>When a constructor of the <code><a href="#event">Event</a></code> interface, or of an
-interface that inherits from the <code><a href="#event">Event</a></code> interface, is invoked,
-these steps must be run:
-
-<ol>
- <li><p>Create an <a href="#concept-event" title="concept-event">event</a> that uses the
- interface the constructor was invoked upon.
-
- <li><p>Set its <a href="#initialized-flag">initialized flag</a>.
-
- <li><p>Initialize the <code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute to
- the <var title="">type</var> argument.
-
- <li><p>If there is an <var title="">eventInitDict</var> argument then for each
- <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-dictionary-member">dictionary member</a> defined therein find
- the attribute on <a href="#concept-event" title="concept-event">event</a> whose
- <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-identifier">identifier</a> matches the key of
- the <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-dictionary-member">dictionary member</a> and then
- set the attribute to the value of that
- <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-dictionary-member">dictionary member</a>.
-
- <li><p>Return the <a href="#concept-event" title="concept-event">event</a>.
-</ol>
-
-
-<h3 id="interface-eventtarget"><span class="secno">4.5 </span>Interface <code><a href="#eventtarget">EventTarget</a></code></h3>
-
-<pre class="idl">interface <dfn id="eventtarget">EventTarget</dfn> {
-  void <a href="#dom-eventtarget-addeventlistener" title="dom-EventTarget-addEventListener">addEventListener</a>(DOMString <var title="">type</var>, <a href="#eventlistener">EventListener</a>? <var title="">callback</var>, optional boolean <var title="">capture</var> = false);
-  void <a href="#dom-eventtarget-removeeventlistener" title="dom-EventTarget-removeEventListener">removeEventListener</a>(DOMString <var title="">type</var>, <a href="#eventlistener">EventListener</a>? <var title="">callback</var>, optional boolean <var title="">capture</var> = false);
-  boolean <a href="#dom-eventtarget-dispatchevent" title="dom-EventTarget-dispatchEvent">dispatchEvent</a>(<a href="#event">Event</a> <var title="">event</var>);
-};
-
-callback interface <dfn id="eventlistener">EventListener</dfn> {
-  void <span title="dom-EventListener-handleEvent">handleEvent</span>(<a href="#event">Event</a> <var title="">event</var>);
-};</pre>
-
-<p><code><a href="#eventtarget">EventTarget</a></code> is an object to which an
-<a href="#concept-event" title="concept-event">event</a> is
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> when something has
-occurred. Each <code><a href="#eventtarget">EventTarget</a></code> has an associated list of
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a>.
-
-<p>An <dfn id="concept-event-listener" title="concept-event-listener">event listener</dfn> is a handler
-for a specific <a href="#concept-event" title="concept-event">event</a>. Each
-<a href="#concept-event-listener" title="concept-event-listener">event listener</a> consists of a
-<b>type</b> (of the <a href="#concept-event" title="concept-event">event</a>),
-<b>callback</b>, and <b>capture</b> variable.
-
-<dl class="domintro">
- <dt><code><var title="">target</var> . <a href="#dom-eventtarget-addeventlistener" title="dom-EventTarget-addEventListener">addEventListener</a>(<var title="">type</var>, <var title="">callback</var> [, <var title="">capture</var> = false])</code>
- <dd>
-  <p>Appends an <a href="#concept-event-listener" title="concept-event-listener">event listener</a>
-  for <a href="#concept-event" title="concept-event">events</a> whose
-  <code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute value is
-  <var title="">type</var>. The <var title="">callback</var> argument sets the
-  <b>callback</b> that will be invoked when the
-  <a href="#concept-event" title="concept-event">event</a> is
-  <a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a>. When set to true,
-  the <var title="">capture</var> argument ensures <b>callback</b> is only
-  invoked when the <a href="#concept-event" title="concept-event">event</a>'s
-  <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute value is
-  <code title="dom-Event-CAPTURING_PHASE"><a href="#dom-event-capturing_phase">CAPTURING_PHASE</a></code>.
-
-  <p>The <a href="#concept-event-listener" title="concept-event-listener">event listener</a> is
-  appended to <var title="">target</var>'s list of
-  <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> and is not
-  appended if it is a duplicate (the
-  <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> in the list are
-  unique).
-
- <dt><code><var title="">target</var> . <a href="#dom-eventtarget-removeeventlistener" title="dom-EventTarget-removeEventListener">removeEventListener</a>(<var title="">type</var>, <var title="">callback</var> [, <var title="">capture</var> = false])</code>
- <dd><p>Remove the <a href="#concept-event-listener" title="concept-event-listener">event listener</a>
- in <var title="">target</var>'s list of
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> with the same
- <var title="">type</var>, <var title="">callback</var>, and
- <var title="">capture</var>.
-
- <dt><code><var title="">target</var> . <a href="#dom-eventtarget-dispatchevent" title="dom-EventTarget-dispatchEvent">dispatchEvent</a>(<var title="">event</var>)</code>
- <dd><p><a href="#concept-event-dispatch" title="concept-event-dispatch">Dispatches</a> a synthetic
- event <var title="">event</var> to <var title="">target</var> and returns true
- if either <var title="">event</var>'s
- <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attribute value is false
- or it's <code title="dom-Event-preventDefault"><a href="#dom-event-preventdefault">preventDefault()</a></code> method
- was not invoked, or false otherwise.
-</dl>
-
-<p>When the
-<dfn id="dom-eventtarget-addeventlistener" title="dom-EventTarget-addEventListener"><code>addEventListener(<var title="">type</var>, <var title="">callback</var>, <var title="">capture</var>)</code></dfn>
-method is invoked these steps must be run:
-<ol>
- <li><p>If <var title="">callback</var> is null terminate these steps.
- <li><p>Append an <a href="#concept-event-listener" title="concept-event-listener">event listener</a>
- to the associated list of
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> with <b>type</b>
- set to <var title="">type</var>, <b>callback</b> set to <var title="">callback</var>, and
- <b>capture</b> set to <var title="">capture</var>, unless there
- already is an <a href="#concept-event-listener" title="concept-event-listener">event listener</a> in
- that list with the same <b>type</b>, <b>callback</b>, and <b>capture</b>.
-</ol>
-
-<p>When the <dfn id="dom-eventtarget-removeeventlistener" title="dom-EventTarget-removeEventListener"><code>removeEventListener(<var title="">type</var>, <var title="">callback</var>, <var title="">capture</var>)</code></dfn> method is invoked these steps must be run:
-<ol>
- <li><p>Remove an <a href="#concept-event-listener" title="concept-event-listener">event listener</a>
- from the associated list of
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a>, whose
- <b>type</b> is <var title="">name</var>, <b>callback</b> is <var title="">callback</var>, and
- <b>capture</b> is <var title="">capture</var>.</p>
-</ol>
-
-<p>When the
-<dfn id="dom-eventtarget-dispatchevent" title="dom-EventTarget-dispatchEvent"><code>dispatchEvent(<var title="">event</var>)</code></dfn> method is invoked these steps must be run:
-<ol>
- <li><p>If <var title="">event</var>'s <a href="#dispatch-flag">dispatch flag</a> is set, or if
- its <a href="#initialized-flag">initialized flag</a> is not set,
- <a href="#concept-throw" title="concept-throw">throw</a> an
- "<code><a href="#invalidstateerror">InvalidStateError</a></code>" exception and terminate these steps.
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-isTrusted"><a href="#dom-event-istrusted">isTrusted</a></code> attribute to false.
- <li><p><a href="#concept-event-dispatch" title="concept-event-dispatch">Dispatch</a> the
- <var title="">event</var> and return the value that returns.
-</ol>
-
-
-<h3 id="dispatching-events"><span class="secno">4.6 </span>Dispatching events</h3>
-
-<p>To <dfn id="concept-event-dispatch" title="concept-event-dispatch">dispatch</dfn> an
-<a href="#concept-event" title="concept-event">event</a> to a given object run these steps:
-<!-- other specifications turn this into a requirement  -->
-
-<ol>
- <li><p>Let <var title="">event</var> be the
- <a href="#concept-event" title="concept-event">event</a> that is dispatched.
-
- <li><p>Set <var title="">event</var>'s <a href="#dispatch-flag">dispatch flag</a>.
-
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute to the object to which
- <var title="">event</var> is dispatched.
-
- <li><p>If <var title="">event</var>'s
- <code title="dom-Event-target"><a href="#dom-event-target">target</a></code> attribute value is
- <a href="#concept-tree-participate" title="concept-tree-participate">participating</a> in a
- <a href="#concept-tree" title="concept-tree">tree</a>, let <var title="">event path</var> be a
- static ordered list of all its
- <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestors</a> in
- <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, or let
- <var title="">event path</var> be the empty list otherwise.
-
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute to
- <code title="dom-Event-CAPTURING_PHASE"><a href="#dom-event-capturing_phase">CAPTURING_PHASE</a></code>.
-
- <li><p>For each object in the <var title="">event path</var>
- <a href="#concept-event-listener-invoke" title="concept-event-listener-invoke">invoke</a> its
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> with event
- <var title="">event</var>, as long as <var title="">event</var>'s
- <a href="#stop-propagation-flag">stop propagation flag</a> is unset.
-
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute to
- <code title="dom-Event-AT_TARGET"><a href="#dom-event-at_target">AT_TARGET</a></code>.
-
- <li><p><a href="#concept-event-listener-invoke" title="concept-event-listener-invoke">Invoke</a> the
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> of
- <var title="">event</var>'s <code title="dom-Event-target"><a href="#dom-event-target">target</a></code>
- attribute value with <var title="">event</var>, if <var title="">event</var>'s
- <a href="#stop-propagation-flag">stop propagation flag</a> is unset.
-
- <li>
-  <p>If <var title="">event</var>'s
-  <code title="dom-Event-bubbles"><a href="#dom-event-bubbles">bubbles</a></code> attribute value is true, run
-  these substeps:
-
-  <ol>
-   <li><p>Reverse the order of <var title="">event path</var>.
-
-   <li><p>Initialize <var title="">event</var>'s
-   <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute to
-   <code title="dom-Event-BUBBLING_PHASE"><a href="#dom-event-bubbling_phase">BUBBLING_PHASE</a></code>.
-
-   <li><p>For each object in the <var title="">event path</var>
-   <a href="#concept-event-listener-invoke" title="concept-event-listener-invoke">invoke</a> its
-   <a href="#concept-event-listener" title="concept-event-listener">event listeners</a>, with event
-   <var title="">event</var> as long as <var title="">event</var>'s
-   <a href="#stop-propagation-flag">stop propagation flag</a> is unset.
-  </ol>
-
- <li><p>Unset <var title="">event</var>'s <a href="#dispatch-flag">dispatch flag</a>.
-
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute to
- <code title="dom-Event-NONE"><a href="#dom-event-none">NONE</a></code>.
-
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-currentTarget"><a href="#dom-event-currenttarget">currentTarget</a></code> attribute to null.
-
- <li><p>Return false if <var title="">event</var>'s <a href="#canceled-flag">canceled flag</a>
- is set, or true otherwise.
-</ol>
-
-
-<p>To <dfn id="concept-event-listener-invoke" title="concept-event-listener-invoke">invoke</dfn> the
-<a href="#concept-event-listener" title="concept-event-listener">event listeners</a> for an object with an
-event run these steps:</p>
-<ol>
- <li><p>Let <var title="">event</var> be the
- <a href="#concept-event" title="concept-event">event</a> for which the
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> are invoked.
- <li><p>Let <var title="">listeners</var> be a static list of the
- <a href="#concept-event-listener" title="concept-event-listener">event listeners</a> associated with
- the object for which these steps are run.
- <li><p>Initialize <var title="">event</var>'s
- <code title="dom-Event-currentTarget"><a href="#dom-event-currenttarget">currentTarget</a></code> attribute to the
- object for which these steps are run.
- <li>
-  <p>Then run these substeps for each
-  <a href="#concept-event-listener" title="concept-event-listener">event listener</a> in
-  <var title="">listeners</var>:</p>
-  <ol>
-   <li><p>If <var title="">event</var>'s
-   <a href="#stop-immediate-propagation-flag">stop immediate propagation flag</a> is set, terminate the
-   <a href="#concept-event-listener-invoke" title="concept-event-listener-invoke">invoke</a> algorithm.
-   <li><p>Let <var title="">listener</var> be the
-   <a href="#concept-event-listener" title="concept-event-listener">event listener</a>.
-   <li><p>If <var title="">event</var>'s <code title="dom-Event-type"><a href="#dom-event-type">type</a></code>
-   attribute value is not <var title="">listener</var>'s <b>type</b>, terminate
-   these substeps (and run them for the next
-   <a href="#concept-event-listener" title="concept-event-listener">event listener</a>).
-   <li><p>If <var title="">event</var>'s
-   <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute value is
-   <code title="dom-Event-CAPTURING_PHASE"><a href="#dom-event-capturing_phase">CAPTURING_PHASE</a></code> and
-   <var title="">listener</var>'s <b>capture</b> is false, terminate these
-   substeps (and run them for the next
-   <a href="#concept-event-listener" title="concept-event-listener">event listener</a>).
-   <li><p>If <var title="">event</var>'s
-   <code title="dom-Event-eventPhase"><a href="#dom-event-eventphase">eventPhase</a></code> attribute value is
-   <code title="dom-Event-BUBBLING_PHASE"><a href="#dom-event-bubbling_phase">BUBBLING_PHASE</a></code> and
-   <var title="">listener</var>'s <b>capture</b> is true, terminate these
-   substeps (and run them for the next
-   <a href="#concept-event-listener" title="concept-event-listener">event listener</a>).
-   <li><p>If <var title="">listener</var>'s <b>callback</b> is a
-   Function<!-- WebIDL uses <span class=estype> --> object, its
-   <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-callback-this-value">callback this value</a> is the
-   <var title="">event</var>'s
-   <code title="dom-Event-currentTarget"><a href="#dom-event-currenttarget">currentTarget</a></code> attribute value.
-   <li><p>Call <var title="">listener</var>'s <b>callback</b>, with the event
-   passed to this algorithm as the first argument.
-  </ol>
- </li>
-</ol>
-
-
-<h3 id="firing-events"><span class="secno">4.7 </span>Firing events</h3>
-
-<p>To
-<dfn id="concept-event-fire" title="concept-event-fire">fire an event named <var title="">e</var></dfn>
-means that an <a href="#concept-event" title="concept-event">event</a> using the
-<code><a href="#event">Event</a></code> interface, with its
-<code title="dom-Event-type"><a href="#dom-event-type">type</a></code> attribute initialized to
-<var title="">e</var>, and its <code title="dom-Event-isTrusted"><a href="#dom-event-istrusted">isTrusted</a></code>
-attribute initialized to true, is to be
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatched</a> to the given object.
-
-<p class="note">Fire is short for initializing and
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatching</a> an
-<a href="#concept-event" title="concept-event">event</a>.
-
-<p class="note"><a href="#concept-event-fire" title="concept-event-fire">Fire an event</a> is a
-concept to make initializing and
-<a href="#concept-event-dispatch" title="concept-event-dispatch">dispatching</a> an
-<a href="#concept-event" title="concept-event">event</a> easier to write down. If the
-<a href="#concept-event" title="concept-event">event</a> needs its <code>bubbles</code> or
-<code>cancelable</code> attribute initialized, one could write
-"<a href="#concept-event-fire" title="concept-event-fire">fire an event</a> named
-<code title="">submit</code> with its <code>cancelable</code> attribute
-initialized to true".
-
-
-
-<h2 id="nodes"><span class="secno">5 </span>Nodes</h2>
-
-<h3 id="introduction-to-the-dom"><span class="secno">5.1 </span>Introduction to "The DOM"</h3>
-
-<p>In its original sense, "The DOM" is an API for
-accessing and manipulating documents (in particular, HTML and XML
-documents). In this specification, the term "document" is used for any
-markup-based resource, ranging from short static documents to long essays or
-reports with rich multimedia, as well as to fully-fledged interactive
-applications.
-
-<p>These documents are presented as a
-<a href="#concept-tree" title="concept-tree">tree</a> of
-<a href="#concept-node" title="concept-node">nodes</a> of various types. Some of those
-<a href="#concept-node" title="concept-node">nodes</a> can have
-<a href="#concept-tree-child" title="concept-tree-child">child</a>
-<a href="#concept-node" title="concept-node">nodes</a>, while others are leaves. These
-restrictions are explained in <a href="#node-tree">the <cite>Node tree</cite>
-section</a>, and the descriptions of the distinct types of
-<a href="#concept-node" title="concept-node">nodes</a> comprise the remaining sections in
-this chapter.
-
-<p>To illustrate, consider this HTML document:
-
-<pre><code>&lt;!DOCTYPE html&gt;
-&lt;html class=e&gt;
- &lt;head&gt;&lt;title&gt;Aliens?&lt;/title&gt;&lt;/head&gt;
- &lt;body&gt;Why yes.&lt;/body&gt;
-&lt;/html&gt;</code></pre>
-
-<p>It is represented as follows:
-
-<ul class="domTree">
- <li>
-  <a href="#concept-document" title="concept-document">Document</a>
-  <ul>
-   <li class="t10"><a href="#concept-doctype" title="concept-doctype">Doctype:</a> <code>html</code></li>
-   <li class="t1"><a href="#concept-element" title="concept-element">Element:</a> <code>html</code> <span class="t2"><code class="attribute name">class</code>="<code class="attribute value">e</code>"</span>
-    <ul>
-     <li class="t1">
-      <a href="#concept-element" title="concept-element">Element:</a> <code>head</code>
-      <ul>
-       <li class="t1">
-        <a href="#concept-element" title="concept-element">Element:</a> <code>title</code>
-        <ul>
-         <li class="t3"><code><a href="#text">Text</a></code>: <span>Aliens?</span></li>
-        </ul>
-       </li>
-      </ul>
-     </li>
-     <li class="t3"><code><a href="#text">Text</a></code>: <span>&#9166;&#9251;</span></li>
-     <li class="t1">
-      <a href="#concept-element" title="concept-element">Element:</a> <code>body</code>
-      <ul>
-       <li class="t3"><code><a href="#text">Text</a></code>: <span>Why yes.&#9166;</span></li>
-      </ul>
-     </li>
-    </ul>
-   </li>
-  </ul>
- </li>
-</ul>
-
-<!--
-http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20class%3De%3E%0D%0A%20%3Chead%3E%3Ctitle%3EAliens%3F%3C%2Ftitle%3E%3C%2Fhead%3E%0D%0A%20%3Cbody%3EWhy%20yes.%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E
--->
-
-<p>Note that, due to the magic that is
-<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#html-parser" title="HTML parser">HTML parsing</a>, not all
-<a href="#space-character" title="space character">space characters</a> were turned into
-<code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a>, but the general
-concept is clear. Markup goes in, a <a href="#concept-tree" title="concept-tree">tree</a> of
-<a href="#concept-node" title="concept-node">nodes</a> comes out.
-<!-- You /can/ explain that! harharhar -->
-
-<p class="note">If you are interested in exploring this further, take a look
-at the most excellent
-<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM Viewer</a>.
-
-<p class="XXX">How much should be explained here? Ideas?
-
-
-<h3 id="node-tree"><span class="secno">5.2 </span>Node tree</h3>
-
-<p>Objects implementing the <code><a href="#document">Document</a></code>,
-<code><a href="#documentfragment">DocumentFragment</a></code>, <code><a href="#documenttype">DocumentType</a></code>,
-<code><a href="#element">Element</a></code>, <code><a href="#text">Text</a></code>, <code><a href="#processinginstruction">ProcessingInstruction</a></code>,
-or <code><a href="#comment">Comment</a></code> interface (simply called
-<dfn id="concept-node" title="concept-node">nodes</dfn>)
-<a href="#concept-tree-participate" title="concept-tree-participate">participate</a> in a
-<a href="#concept-tree" title="concept-tree">tree</a>.
-
-<p>A <a href="#concept-tree" title="concept-tree">tree</a> of
-<a href="#concept-node" title="concept-node">nodes</a> is constrained as follows, expressed
-as a relationship between the type of <a href="#concept-node" title="concept-node">node</a>
-and its allowed <a href="#concept-tree-child" title="concept-tree-child">children</a>:
-<dl>
- <dt><code><a href="#document">Document</a></code>
- <dd>
-  <p>In <a href="#concept-tree-order" title="concept-tree-order">tree order</a>:
-  <ol>
-   <li><p>Zero or more nodes each of which is either
-   <code><a href="#processinginstruction">ProcessingInstruction</a></code> or <code><a href="#comment">Comment</a></code>.
-   <li><p>Optionally one <code><a href="#documenttype">DocumentType</a></code> node.
-   <li><p>Zero or more nodes each of which is either
-   <code><a href="#processinginstruction">ProcessingInstruction</a></code> or <code><a href="#comment">Comment</a></code>.
-   <li><p>Optionally one <code><a href="#element">Element</a></code> node.
-   <li><p>Zero or more nodes each of which is either
-   <code><a href="#processinginstruction">ProcessingInstruction</a></code> or <code><a href="#comment">Comment</a></code>.
-  </ol>
- <dt><code><a href="#documentfragment">DocumentFragment</a></code>
- <dt><code><a href="#element">Element</a></code>
- <dd><p>Zero or more nodes each of which is one of <code><a href="#element">Element</a></code>,
- <code><a href="#processinginstruction">ProcessingInstruction</a></code>, <code><a href="#comment">Comment</a></code>, or
- <code><a href="#text">Text</a></code>.
- <dt><code><a href="#documenttype">DocumentType</a></code>
- <dt><code><a href="#text">Text</a></code>
- <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
- <dt><code><a href="#comment">Comment</a></code>
- <dd><p>None.
-</dl>
-
-<!--AttrExodus -->
-
-<h4 id="mutation-algorithms"><span class="secno">5.2.1 </span>Mutation algorithms</h4>
-
-<p>At certain points in the algorithms below it is said that
-<dfn id="nodes-are-inserted">nodes are inserted</dfn> or <dfn id="nodes-are-removed">nodes are removed</dfn>. These are
-hooks for <a href="#other-applicable-specifications">other applicable specifications</a> to process the
-<a href="#concept-node" title="concept-node">nodes</a> that have been inserted or removed
-further and ensures that when multiple <a href="#concept-node" title="concept-node">nodes</a>
-are inserted or removed this happens atomically.
-
-<p>To <dfn id="concept-node-pre-insert" title="concept-node-pre-insert">pre-insert</dfn> a
-<var title="">node</var> into a <var title="">parent</var> before a
-<var title="">child</var>, run these steps:
-
-<ol>
- <li><p>If <var title="">parent</var> is not a <code><a href="#document">Document</a></code>,
- <code><a href="#documentfragment">DocumentFragment</a></code>, or <code><a href="#element">Element</a></code>
- <a href="#concept-node" title="concept-node">node</a>,
- <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
- <li><p>If <var title="">node</var> is an
- <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
- <var title="">parent</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
- <li><p>If <var title="">child</var> is not null and its
- <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is not
- <var title="">parent</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#notfounderror">NotFoundError</a></code>" exception and terminate these steps.
-
- <li>
-  <p>If <var title="">parent</var> is a
-  <a href="#concept-document" title="concept-document">document</a>, run these substeps:
-
-  <ol>
-   <li><p>If <var title="">node</var> is not a <code><a href="#documentfragment">DocumentFragment</a></code>,
-   <code><a href="#documenttype">DocumentType</a></code>, <code><a href="#element">Element</a></code>,
-   <code><a href="#processinginstruction">ProcessingInstruction</a></code>, or <code><a href="#comment">Comment</a></code>
-   <a href="#concept-node" title="concept-node">node</a>,
-   <a href="#concept-throw" title="concept-throw">throw</a> a
-   "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
-   <li>
-    <p>If <var title="">node</var> is a <code><a href="#documentfragment">DocumentFragment</a></code>
-    <a href="#concept-node" title="concept-node">node</a>, run these inner substeps:
-
-    <ol>
-     <li><p>If <var title="">node</var> has more than one
-     <a href="#concept-element" title="concept-element">element</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a> or has a <code><a href="#text">Text</a></code>
-     <a href="#concept-node" title="concept-node">node</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a>,
-     <a href="#concept-throw" title="concept-throw">throw</a> a
-     "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
-     <li><p>If <var title="">node</var> has one
-     <a href="#concept-element" title="concept-element">element</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a>, and
-     <var title="">parent</var> has an
-     <a href="#concept-element" title="concept-element">element</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a>,
-     <var title="">child</var> is a <a href="#concept-doctype" title="concept-doctype">doctype</a>,
-     or <var title="">child</var> is not null and a
-     <a href="#concept-doctype" title="concept-doctype">doctype</a> is
-     <a href="#concept-tree-following" title="concept-tree-following">following</a>
-     <var title="">child</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
-     "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-     <!--"inclusively following"-->
-    </ol>
-
-   <li><p>If <var title="">node</var> is an
-   <a href="#concept-element" title="concept-element">element</a>, and
-   <var title="">parent</var> has an <a href="#concept-element" title="concept-element">element</a>
-   <a href="#concept-tree-child" title="concept-tree-child">child</a>,
-   <var title="">child</var> is a <a href="#concept-doctype" title="concept-doctype">doctype</a>,
-   or <var title="">child</var> is not null and a
-   <a href="#concept-doctype" title="concept-doctype">doctype</a> is
-   <a href="#concept-tree-following" title="concept-tree-following">following</a>
-   <var title="">child</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
-   "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-   <!--"inclusively following"-->
-
-   <li><p>If <var title="">node</var> is a
-   <a href="#concept-doctype" title="concept-doctype">doctype</a> and either
-   <var title="">parent</var> has a <a href="#concept-doctype" title="concept-doctype">doctype</a>
-   <a href="#concept-tree-child" title="concept-tree-child">child</a>, an
-   <a href="#concept-element" title="concept-element">element</a> is
-   <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
-   <var title="">child</var>, or <var title="">child</var> is null and
-   <var title="">parent</var> has an <a href="#concept-element" title="concept-element">element</a>
-   <a href="#concept-tree-child" title="concept-tree-child">child</a>,
-   <a href="#concept-throw" title="concept-throw">throw</a> a
-   "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-  </ol>
-
- <li><p>Otherwise if <var title="">parent</var> is a
- <code><a href="#documentfragment">DocumentFragment</a></code> or <code><a href="#element">Element</a></code>
- <a href="#concept-node" title="concept-node">node</a> and <var title="">node</var> is not a
- <code><a href="#documentfragment">DocumentFragment</a></code>, <code><a href="#element">Element</a></code>, <code><a href="#text">Text</a></code>,
- <code><a href="#processinginstruction">ProcessingInstruction</a></code>, or <code><a href="#comment">Comment</a></code>
- <a href="#concept-node" title="concept-node">node</a>,
- <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
- <li><p>Let <var title="">reference child</var> be <var title="">child</var>.
-
- <li><p>If <var title="">reference child</var> is <var title="">node</var>, set it
- to <var title="">node</var>'s
- <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
-
- <li><p><a href="#concept-node-adopt" title="concept-node-adopt">Adopt</a>
- <var title="">node</var> with <var title="">parent</var>'s
- <a href="#concept-node-document" title="concept-node-document">node document</a>.
-
- <li><p><a href="#concept-node-insert" title="concept-node-insert">Insert</a> <var title="">node</var>
- into <var title="">parent</var> before <var title="">reference child</var>.
-
- <li><p>Return <var title="">node</var>.
- <!-- technically this is post-insert -->
-</ol>
-
-
-<p>To <dfn id="concept-node-insert" title="concept-node-insert">insert</dfn> a <var title="">node</var>
-into a <var title="">parent</var> before a <var title="">child</var>, optionally
-with a <i title="">suppress observers flag</i>, run these steps:
-
-<ol>
- <li><p>Let <var title="">count</var> be the number of
- <a href="#concept-tree-child" title="concept-tree-child">children</a> of <var title="">node</var> if
- it is a <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a>,
- or one otherwise.
-
- <li><p>For each <a href="#concept-range" title="concept-range">range</a> whose
- <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is
- <var title="">parent</var> and
- <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is greater than
- <var title="">child</var>'s <a href="#concept-tree-index" title="concept-tree-index">index</a>,
- increase its <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> by
- <var title="">count</var>.
-
- <li><p>For each <a href="#concept-range" title="concept-range">range</a> whose
- <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> is
- <var title="">parent</var> and
- <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> is greater than
- <var title="">child</var>'s <a href="#concept-tree-index" title="concept-tree-index">index</a>,
- increase its <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> by
- <var title="">count</var>.
-
- <li><p>Let <var title="">nodes</var> be <var title="">node</var>'s
- <a href="#concept-tree-child" title="concept-tree-child">children</a> if <var title="">node</var> is
- a <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a>, or a
- list containing solely <var title="">node</var> otherwise.
-
- <li>
-  <p>If <var title="">node</var> is a <code><a href="#documentfragment">DocumentFragment</a></code>
-  <a href="#concept-node" title="concept-node">node</a>,
-  <a href="#concept-mo-queue-childlist" title="concept-MO-queue-childList">queue a "<code>childList</code>" record</a>
-  with target <var title="">node</var>, addedNodes null, removedNodes
-  <var title="">nodes</var>, nextSibling null, and previousSibling null.
-
-  <p class="note">This step does intentionally not pay attention to the
-  <i title="">suppress observers flag</i>.
-
- <li><p>If <var title="">node</var> is a <code><a href="#documentfragment">DocumentFragment</a></code>
- <a href="#concept-node" title="concept-node">node</a>,
- <a href="#concept-node-remove" title="concept-node-remove">remove</a> its
- <a href="#concept-tree-child" title="concept-tree-child">children</a> with the
- <i title="">suppress observers flag</i> set.
-
- <li><p>If <i title="">suppress observers flag</i> is unset,
- <a href="#concept-mo-queue-childlist" title="concept-MO-queue-childList">queue a "<code>childList</code>" record</a>
- with target <var title="">parent</var>, addedNodes <var title="">nodes</var>,
- removedNodes null, nextSibling <var title="">child</var>, and previousSibling
- <var title="">child</var>'s
- <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a>
- or <var title="">parent</var>'s
- <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a> if
- <var title="">child</var> is null.
-
- <li><p>Insert all nodes in <var title="">nodes</var> before
- <var title="">child</var> or at the end of <var title="">parent</var> if
- <var title="">child</var> is null.
-
- <li><p>If <i title="">suppress observers flag</i> is unset,
- <a href="#nodes-are-inserted">nodes are inserted</a>.
-</ol>
-
-
-<p>To <dfn id="concept-node-append" title="concept-node-append">append</dfn> a <var title="">node</var>
-to a <var title="">parent</var>,
-<a href="#concept-node-pre-insert" title="concept-node-pre-insert">pre-insert</a> <var title="">node</var>
-into <var title="">parent</var> before null.
-
-
-<p>To <dfn id="concept-node-replace" title="concept-node-replace">replace</dfn> a <var title="">child</var>
-with <var title="">node</var> within a <var title="">parent</var>, run these
-steps:
-
-<ol>
- <li>
-  <p>If <var title="">child</var>'s
-  <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is not
-  <var title="">parent</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
-  "<code><a href="#notfounderror">NotFoundError</a></code>" exception and terminate these steps.
-
-  <p class="note">This implies <var title="">parent</var> is a
-  <code><a href="#document">Document</a></code>, <code><a href="#documentfragment">DocumentFragment</a></code>, or
-  <code><a href="#element">Element</a></code> <a href="#concept-node" title="concept-node">node</a>.
-
- <li><p>If <var title="">node</var> is an
- <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
- <var title="">parent</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
- <li>
-  <p>If <var title="">parent</var> is a
-  <a href="#concept-document" title="concept-document">document</a>, run these substeps:
-
-  <ol>
-   <li><p>If <var title="">node</var> is not a <code><a href="#documentfragment">DocumentFragment</a></code>,
-   <code><a href="#documenttype">DocumentType</a></code>, <code><a href="#element">Element</a></code>,
-   <code><a href="#processinginstruction">ProcessingInstruction</a></code>, or <code><a href="#comment">Comment</a></code>
-   <a href="#concept-node" title="concept-node">node</a>,
-   <a href="#concept-throw" title="concept-throw">throw</a> a
-   "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
-   <li>
-    <p>If <var title="">node</var> is a <code><a href="#documentfragment">DocumentFragment</a></code>
-    <a href="#concept-node" title="concept-node">node</a>, run these inner substeps:
-
-    <ol>
-     <li><p>If <var title="">node</var> has more than one
-     <a href="#concept-element" title="concept-element">element</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a> or has a <code><a href="#text">Text</a></code>
-     <a href="#concept-node" title="concept-node">node</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a>,
-     <a href="#concept-throw" title="concept-throw">throw</a> a
-     "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
-     <li><p>If <var title="">node</var> has one
-     <a href="#concept-element" title="concept-element">element</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a> and either
-     <var title="">parent</var> has an
-     <a href="#concept-element" title="concept-element">element</a>
-     <a href="#concept-tree-child" title="concept-tree-child">child</a> that is not
-     <var title="">child</var> or a <a href="#concept-doctype" title="concept-doctype">doctype</a>
-     is <a href="#concept-tree-following" title="concept-tree-following">following</a>
-     <var title="">child</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
-     "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-    </ol>
-
-   <li><p>If <var title="">node</var> is an
-   <a href="#concept-element" title="concept-element">element</a> and either
-   <var title="">parent</var> has an <a href="#concept-element" title="concept-element">element</a>
-   <a href="#concept-tree-child" title="concept-tree-child">child</a> that is not
-   <var title="">child</var> or a <a href="#concept-doctype" title="concept-doctype">doctype</a> is
-   <a href="#concept-tree-following" title="concept-tree-following">following</a>
-   <var title="">child</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
-   "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
-   <li><p>If <var title="">node</var> is a
-   <a href="#concept-doctype" title="concept-doctype">doctype</a> and either
-   <var title="">parent</var> has a <a href="#concept-doctype" title="concept-doctype">doctype</a>
-   <a href="#concept-tree-child" title="concept-tree-child">child</a> that is not
-   <var title="">child</var>, or an <a href="#concept-element" title="concept-element">element</a>
-   is <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
-   <var title="">child</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
-   "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-  </ol>
-
- <li><p>Otherwise if <var title="">parent</var> is a
- <code><a href="#documentfragment">DocumentFragment</a></code> or <code><a href="#element">Element</a></code>
- <a href="#concept-node" title="concept-node">node</a> and <var title="">node</var> is not a
- <code><a href="#documentfragment">DocumentFragment</a></code>, <code><a href="#element">Element</a></code>, <code><a href="#text">Text</a></code>,
- <code><a href="#processinginstruction">ProcessingInstruction</a></code>, or <code><a href="#comment">Comment</a></code>
- <a href="#concept-node" title="concept-node">node</a>,
- <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" and terminate these steps.
-
- <li><p>Let <var title="">reference child</var> be <var title="">child</var>'s
- <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
-
- <li><p>If <var title="">reference child</var> is <var title="">node</var>, set it
- to <var title="">node</var>'s
- <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
-
- <li><p><a href="#concept-node-adopt" title="concept-node-adopt">Adopt</a>
- <var title="">node</var> with <var title="">parent</var>'s
- <a href="#concept-node-document" title="concept-node-document">node document</a>.
-
- <li><p><a href="#concept-node-remove" title="concept-node-remove">Remove</a> <var title="">child</var>
- from its <var title="">parent</var> with the
- <i title="">suppress observers flag</i> set.
-
- <li><p><a href="#concept-node-insert" title="concept-node-insert">Insert</a> <var title="">node</var>
- into <var title="">parent</var> before <var title="">reference child</var> with
- the <i title="">suppress observers flag</i> set.
-
- <li><p>Let <var title="">nodes</var> be <var title="">node</var>'s
- <a href="#concept-tree-child" title="concept-tree-child">children</a> if <var title="">node</var> is
- a <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a>, or a
- list containing solely <var title="">node</var> otherwise.
-
- <li><p><a href="#concept-mo-queue-childlist" title="concept-MO-queue-childList">queue a "<code>childList</code>" record</a>
- with target <var title="">parent</var>, addedNodes
- <var title="">nodes</var>, removedNodes a list solely containing
- <var title="">child</var>, nextSibling <var title="">reference child</var>, and
- previousSibling <var title="">child</var>'s
- <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a>.
-
- <li><p>At this point <a href="#nodes-are-removed">nodes are removed</a> and
- <a href="#nodes-are-inserted">nodes are inserted</a>.
-
- <li><p>Return <var title="">child</var>.
-</ol>
-
-
-<p>To <dfn id="concept-node-replace-all" title="concept-node-replace-all">replace all</dfn> with a
-<var title="">node</var> within a <var title="">parent</var>, run these steps:
-
-<ol>
- <li><p><a href="#concept-node-adopt" title="concept-node-adopt">Adopt</a>
- <var title="">node</var> with <var title="">parent</var>'s
- <a href="#concept-node-document" title="concept-node-document">node document</a>.
-
- <li><p><a href="#concept-node-remove" title="concept-node-remove">Remove</a> all
- <var title="">parent</var>'s <a href="#concept-tree-child" title="concept-tree-child">children</a>,
- with the <i title="">suppress observers flag</i> set.
-
- <li><p>If <var title="">node</var> is not null,
- <a href="#concept-node-insert" title="concept-node-insert">insert</a> <var title="">node</var> into
- <var title="">parent</var> before null with the
- <i title="">suppress observers flag</i> set.
-
- <li><p>Let <var title="">nodes</var> be null if <var title="">node</var> is null,
- <var title="">node</var>'s <a href="#concept-tree-child" title="concept-tree-child">children</a> if
- <var title="">node</var> is a <code><a href="#documentfragment">DocumentFragment</a></code>
- <a href="#concept-node" title="concept-node">node</a>, or a list containing
- <var title="">node</var> otherwise.
-
- <li><p><a href="#concept-mo-queue-childlist" title="concept-MO-queue-childList">queue a "<code>childList</code>" record</a>
- with target <var title="">parent</var>, addedNodes
- <var title="">nodes</var>, removedNodes <var title="">parent</var>'s
- <a href="#concept-tree-child" title="concept-tree-child">children</a>, nextSibling null, and
- previousSibling null.
-
- <li><p>At this point <a href="#nodes-are-removed">nodes are removed</a> and
- <a href="#nodes-are-inserted">nodes are inserted</a>.
-</ol>
-
-<p class="note">This algorithm does not make any checks with regards to the
-<a href="#node-tree">node tree</a>. Use it wisely.
-
-
-<p>To <dfn id="concept-node-pre-remove" title="concept-node-pre-remove">pre-remove</dfn> a
-<var title="">child</var> from a <var title="">parent</var>, run these steps:</p>
-
-<ol>
- <li><p>If <var title="">child</var>'s
- <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is not
- <var title="">parent</var>, <a href="#concept-throw" title="concept-throw">throw</a> a
- "<code><a href="#notfounderror">NotFoundError</a></code>" exception and terminate these steps.
-
- <li><p><a href="#concept-node-remove" title="concept-node-remove">Remove</a> <var title="">child</var>
- from <var title="">parent</var>.
-
- <li><p>Return <var title="">child</var>.
- <!-- technically this is post-remove -->
-</ol>
-
-
-<p>To <dfn id="concept-node-remove" title="concept-node-remove">remove</dfn> a <var title="">node</var>
-from a <var title="">parent</var>, optionally with
-<i title="">suppress observers flag</i> set, run these steps:
-
-<ol>
- <li><p>Let <var title="">index</var> be <var title="">node</var>'s
- <a href="#concept-tree-index" title="concept-tree-index">index</a>.
-
- <li><p>For each <a href="#concept-range" title="concept-range">range</a> whose
- <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is a
- <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of
- <var title="">node</var>, set its
- <a href="#concept-range-start" title="concept-range-start">start</a> to
- (<var title="">parent</var>, <var title="">index</var>).
-
- <li><p>For each <a href="#concept-range" title="concept-range">range</a> whose
- <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> is a
- <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of
- <var title="">node</var>, set its
- <a href="#concept-range-end" title="concept-range-end">end</a> to
- (<var title="">parent</var>, <var title="">index</var>).
-
- <li><p>For each <a href="#concept-range" title="concept-range">range</a> whose
- <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is
- <var title="">parent</var> and
- <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is greater than
- <var title="">index</var>, decrease its
- <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> by one.