dom-core.html

<!DOCTYPE html><html lang="en-US"><head>
  <meta charset="UTF-8">
  <title>DOM Standard</title>
  <link href="http://www.whatwg.org/style/specification" rel="stylesheet">
  <link href="//resources.whatwg.org/logo-dom.svg" rel="icon">
 </head>
 <body>

<div class="head">

<p><a class="logo" href="//www.whatwg.org/"><img alt="WHATWG" height="100" src="//resources.whatwg.org/logo-dom.svg" width="100"></a></p>

<h1>DOM</h1>
<h2 class="no-num no-toc" id="living-standard-—-last-updated-20-may-2013">Living Standard — Last Updated 20 May 2013</h2>

<dl>
 <dt>This Version:
 <dd><a href="http://dom.spec.whatwg.org/">http://dom.spec.whatwg.org/</a>

 <dt>Participate:</dt>
 <dd class="dontpublish">Send feedback to
 <a href="mailto:www-dom@w3.org?subject=DOM%3A%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>Version History:
 <dd><a href="https://github.com/whatwg/dom/commits">https://github.com/whatwg/dom/commits</a>
 <dd><a href="https://twitter.com/thedomstandard">@thedomstandard</a>

 <dt>Editors:
 <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
  (<a href="http://www.mozilla.org/">Mozilla</a>)
  &lt;<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>&gt;
 <dd>Aryeh Gregor
  (<a href="http://www.mozilla.org/">Mozilla</a>)
  &lt;<a href="mailto:ayg@aryeh.name">ayg@aryeh.name</a>&gt;
 <dd>Ms2ger
  (<a href="http://www.mozilla.org/">Mozilla</a>)
  &lt;<a href="mailto:ms2ger@gmail.com">ms2ger@gmail.com</a>&gt;
</dl>

<script async="" src="//resources.whatwg.org/file-bug.js"></script>

<p class="copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="http://i.creativecommons.org/p/zero/1.0/80x15.png"></a>
To the extent possible under law, the editors have waived all copyright and
related or neighboring rights to this work. In addition, as of
20 May 2013, the editors have made this specification available
under the
<a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
which is available at
http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.

</div>


<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>DOM defines a platform-neutral model for events, futures, and document nodes.


<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>
   <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>
   <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="#ordered-sets"><span class="secno">2.3 </span>Ordered sets</a></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>
   <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="#futures"><span class="secno">4 </span>Futures</a>
  <ol>
   <li><a href="#introduction-to-the-future"><span class="secno">4.1 </span>Introduction to the <code title="">Future</code></a></li>
   <li><a href="#futures-model"><span class="secno">4.2 </span>Futures Model</a></li>
   <li><a href="#futures-api"><span class="secno">4.3 </span>Futures API</a></ol></li>
 <li><a href="#events"><span class="secno">5 </span>Events</a>
  <ol>
   <li><a href="#introduction-to-dom-events"><span class="secno">5.1 </span>Introduction to "DOM Events"</a></li>
   <li><a href="#interface-event"><span class="secno">5.2 </span>Interface <code>Event</code></a></li>
   <li><a href="#interface-customevent"><span class="secno">5.3 </span>Interface <code>CustomEvent</code></a></li>
   <li><a href="#constructing-events"><span class="secno">5.4 </span>Constructing events</a></li>
   <li><a href="#defining-event-interfaces"><span class="secno">5.5 </span>Defining event interfaces</a></li>
   <li><a href="#interface-eventtarget"><span class="secno">5.6 </span>Interface <code>EventTarget</code></a></li>
   <li><a href="#dispatching-events"><span class="secno">5.7 </span>Dispatching events</a></li>
   <li><a href="#firing-events"><span class="secno">5.8 </span>Firing events</a></ol></li>
 <li><a href="#nodes"><span class="secno">6 </span>Nodes</a>
  <ol>
   <li><a href="#introduction-to-the-dom"><span class="secno">6.1 </span>Introduction to "The DOM"</a></li>
   <li><a href="#node-tree"><span class="secno">6.2 </span>Node tree</a>
    <ol>
     <li><a href="#mutation-algorithms"><span class="secno">6.2.1 </span>Mutation algorithms</a></li>
     <li><a href="#interface-parentnode"><span class="secno">6.2.2 </span>Interface <code>ParentNode</code></a></li>
     <li><a href="#interface-childnode"><span class="secno">6.2.3 </span>Interface <code>ChildNode</code></a></ol></li>
   <li><a href="#mutation-observers"><span class="secno">6.3 </span>Mutation observers</a>
    <ol>
     <li><a href="#interface-mutationobserver"><span class="secno">6.3.1 </span>Interface <code>MutationObserver</code></a></li>
     <li><a href="#queuing-a-mutation-record"><span class="secno">6.3.2 </span>Queuing a mutation record</a></li>
     <li><a href="#interface-mutationrecord"><span class="secno">6.3.3 </span>Interface <code>MutationRecord</code></a></li>
     <li><a href="#garbage-collection"><span class="secno">6.3.4 </span>Garbage collection</a></ol></li>
   <li><a href="#interface-node"><span class="secno">6.4 </span>Interface <code>Node</code></a></li>
   <li><a href="#interface-document"><span class="secno">6.5 </span>Interface <code>Document</code></a>
    <ol>
     <li><a href="#interface-domimplementation"><span class="secno">6.5.1 </span>Interface <code>DOMImplementation</code></a></ol></li>
   <li><a href="#interface-documentfragment"><span class="secno">6.6 </span>Interface <code>DocumentFragment</code></a></li>
   <li><a href="#interface-documenttype"><span class="secno">6.7 </span>Interface <code>DocumentType</code></a></li>
   <li><a href="#interface-element"><span class="secno">6.8 </span>Interface <code>Element</code></a>
    <ol>
     <li><a href="#interface-attr"><span class="secno">6.8.1 </span>Interface <code>Attr</code></a></ol></li>
   <li><a href="#interface-characterdata"><span class="secno">6.9 </span>Interface <code>CharacterData</code></a></li>
   <li><a href="#interface-text"><span class="secno">6.10 </span>Interface <code>Text</code></a></li>
   <li><a href="#interface-processinginstruction"><span class="secno">6.11 </span>Interface <code>ProcessingInstruction</code></a></li>
   <li><a href="#interface-comment"><span class="secno">6.12 </span>Interface <code>Comment</code></a></ol></li>
 <li><a href="#ranges"><span class="secno">7 </span>Ranges</a>
  <ol>
   <li><a href="#introduction-to-dom-ranges"><span class="secno">7.1 </span>Introduction to "DOM Ranges"</a></li>
   <li><a href="#interface-range"><span class="secno">7.2 </span>Interface <code>Range</code></a></ol></li>
 <li><a href="#traversal"><span class="secno">8 </span>Traversal</a>
  <ol>
   <li><a href="#interface-nodeiterator"><span class="secno">8.1 </span>Interface <code>NodeIterator</code></a></li>
   <li><a href="#interface-treewalker"><span class="secno">8.2 </span>Interface <code>TreeWalker</code></a></li>
   <li><a href="#interface-nodefilter"><span class="secno">8.3 </span>Interface <code>NodeFilter</code></a></ol></li>
 <li><a href="#collections"><span class="secno">9 </span>Collections</a>
  <ol>
   <li><a href="#interface-nodelist"><span class="secno">9.1 </span>Interface <code>NodeList</code></a></li>
   <li><a href="#interface-htmlcollection"><span class="secno">9.2 </span>Interface <code>HTMLCollection</code></a></ol></li>
 <li><a href="#lists"><span class="secno">10 </span>Lists</a>
  <ol>
   <li><a href="#interface-domtokenlist"><span class="secno">10.1 </span>Interface <code>DOMTokenList</code></a></li>
   <li><a href="#interface-domsettabletokenlist"><span class="secno">10.2 </span>Interface <code>DOMSettableTokenList</code></a></ol></li>
 <li><a href="#historical"><span class="secno">11 </span>Historical</a>
  <ol>
   <li><a href="#dom-events"><span class="secno">11.1 </span>DOM Events</a></li>
   <li><a href="#dom-core"><span class="secno">11.2 </span>DOM Core</a></li>
   <li><a href="#dom-ranges"><span class="secno">11.3 </span>DOM Ranges</a></li>
   <li><a href="#dom-traversal"><span class="secno">11.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 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", "NOT RECOMMENDED", "MAY", and
"OPTIONAL" in this document are to be interpreted as described in RFC 2119.
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>Encoding</cite>, <cite>Web IDL</cite>, <cite>XML</cite>, and
<cite>Namespaces in XML</cite>.
<a href="#refsENCODING">[ENCODING]</a>
<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 -->

<h3 id="trees"><span class="secno">2.1 </span>Trees</h3> <!-- Sorry reddit, this is not /r/trees -->

<p>A <dfn id="concept-tree" title="concept-tree">tree</dfn> is a finite hierarchical tree structure. In
<dfn id="concept-tree-order" title="concept-tree-order">tree order</dfn> is preorder, depth-first
traversal of a <a href="#concept-tree" title="concept-tree">tree</a>.
<!-- 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. An object <var title="">A</var> whose
<a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is object <var title="">B</var> is a
<a href="#concept-tree-child" title="concept-tree-child">child</a> of <var title="">B</var>.

<p>The <dfn id="concept-tree-root" title="concept-tree-root">root</dfn> of an object is itself, if its
<a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is null, 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.


<h3 id="ordered-sets"><span class="secno">2.3 </span>Ordered sets</h3>

<p>The <dfn id="concept-set-parser" title="concept-set-parser">set parser</dfn> takes a string
<var title="">input</var> and then runs these steps:

<ol>
 <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-ascii-whitespace">Skip ASCII 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-code-point-sequence">Collect a code point sequence</a> of code points that are
   not <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>.

   <li><p>If the collected string is not in <var title="">tokens</var>, append the
   collected string to <var title="">tokens</var>.

   <li><p><a href="#skip-ascii-whitespace">Skip ASCII whitespace</a>.
  </ol>

 <li><p>Return <var title="">tokens</var>.
</ol>

<p>To <dfn id="collect-a-code-point-sequence">collect a code point sequence</dfn> of
<var title="">code points</var>, run these steps:

<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 code point at <var title="">position</var> is
 one of the <var title="">code points</var>, append that code point to the end
 of <var title="">result</var> and advance <var title="">position</var> to the
 next code point in <var title="">input</var>.

 <li><p>Return <var title="">result</var>.
</ol>

<p>To <dfn id="skip-ascii-whitespace">skip ASCII whitespace</dfn> means to
<a href="#collect-a-code-point-sequence">collect a code point sequence</a> of
<a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a> and discard the
return value.

<p>The <dfn id="concept-set-serializer" title="concept-set-serializer">set serializer</dfn> takes a
<var title="">set</var> and returns the concatenation of the strings in
<var title="">set</var>, separated from each other by U+0020.


<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 <span title="dom-DOMException-TYPE_MISMATCH_ERR">TYPE_MISMATCH_ERR</span> = 17; // historical; use JavaScript's TypeError instead
  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.

<p>To <dfn id="concept-throw" title="concept-throw">throw</dfn> a <var title="">name</var> exception
run these steps:

<ol>
 <li><p>Let <var title="">code</var> be zero.

 <li><p>If <var title="">name</var> 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 <var title="">code</var> to that value.

 <li><p><a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-throw">Throw</a> a new
 <code><a href="#domexception">DOMException</a></code> exception, whose
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-exception-message">message</a> is a user agent-defined value,
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-exception-name">name</a> is <var title="">name</var>, and
 whose <code title="dom-DOMException-code"><a href="#dom-domexception-code">code</a></code> exception field is
 <var title="">code</var>.
</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" data-anolis-spec="webidl" 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">[<a href="#dom-domerror" title="dom-DOMError">Constructor</a>(DOMString <var title="">name</var>, optional DOMString <var title="">message</var> = "")]
interface <dfn id="domerror">DOMError</dfn> {
  readonly attribute DOMString <a href="#dom-domerror-name" title="dom-DOMError-name">name</a>;
  readonly attribute DOMString <a href="#dom-domerror-message" title="dom-DOMError-message">message</a>;
};</pre>

<p>The <dfn id="dom-domerror" title="dom-DOMError"><code>DOMError(<var title="">name</var>, <var title="">message</var>)</code></dfn>
constructor must return a new <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> and whose <code title="dom-DOMError-message"><a href="#dom-domerror-message">message</a></code> attribute
is initialized to <var title="">message</var>.

<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>The <dfn id="dom-domerror-message" title="dom-DOMError-message"><code>message</code></dfn> attribute must
return the value it was initialized to.

<p class="note">The value of the <code title="dom-DOMError-message"><a href="#dom-domerror-message">message</a></code> will
typically be implementation-dependent and for informational purposes only.

<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> and whose <code title="dom-DOMError-message"><a href="#dom-domerror-message">message</a></code> attribute
is initialized to a helpful implementation-dependent message that explains the error.

<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 an error name is 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="#concept-node-tree" title="concept-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>
  <!-- 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)
 <tr>
  <td>"<dfn id="encodingerror"><code>EncodingError</code></dfn>"
  <td>The encoding operation (either encoded or decoding) failed.
  <td>—
</table>


<h2 id="futures"><span class="secno">4 </span>Futures</h2>

<h3 id="introduction-to-the-future"><span class="secno">4.1 </span>Introduction to the <code title="">Future</code></h3>

<p><a href="#concept-future" title="concept-future">Futures</a> provide a convenient way to get access to the
result of an operation.

<p><a href="#concept-future" title="concept-future">Futures</a> can be returned by platform APIs, but can
also be used in conjunction with an existing API to make it easier to work with.

<div class="example">

<p>This example demonstrates creating a <code title="">fetchJSON(<var>url</var>)</code>
function that returns a <code><a href="#future">Future</a></code> that is responsible for fetching a
<a class="external" data-anolis-spec="url" href="http://url.spec.whatwg.org/#url">URL</a> and parsing the response as JSON.

<pre>function fetchJSON(url) {
  return new Future(function(resolver) {
    var xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.responseType = "json"
    xhr.send()
    // resolver.reject() is ignored once resolver.resolve() has been invoked
    xhr.onload = function() {
      if(xhr.response)
        resolver.resolve(xhr.response)
      resolver.reject(new DOMError("JSONError"))
    }
    xhr.onloadend = function() { resolver.reject(new DOMError("NetworkError")) }
  })
}</pre>

<p>This can be used to create more idiomatic code:

<pre>fetchJSON("/user/posts").done(showPosts, showFailcat)</pre>

<p>Using static methods <a href="#concept-future" title="concept-future">futures</a> can be combined to
create new <a href="#concept-future" title="concept-future">futures</a>, which allows for operating on the
results of several asynchronous requests at once:

<pre>Future.every(fetchJSON("/user/mario"), fetchJSON("/user/luigi")).done(
  function(mario, luigi) { … },
  showFailcat
)</pre>

<p>Enjoy!

</div>


<h3 id="futures-model"><span class="secno">4.2 </span>Futures Model</h3>

<p>A <dfn id="concept-future" title="concept-future">future</dfn> provides asynchronous access to the result of
an operation that is ongoing, has yet to start, or has completed.

<p>A <a href="#concept-future" title="concept-future">future</a> has associated
<dfn id="concept-future-accept-callbacks" title="concept-future-accept-callbacks">accept callbacks</dfn> and
<dfn id="concept-future-reject-callbacks" title="concept-future-reject-callbacks">reject callbacks</dfn>, an associated
<dfn id="concept-future-state" title="concept-future-state">state</dfn>, and an associated
<dfn id="concept-future-result" title="concept-future-result">result</dfn>. Unless stated otherwise, a
<a href="#concept-future" title="concept-future">future</a>'s <a href="#concept-future-state" title="concept-future-state">state</a>
is <i title="">pending</i>.

<p>A <a href="#concept-future" title="concept-future">future</a> also has an associated
<a href="#concept-resolver" title="concept-resolver">resolver</a>.

<p>To <dfn id="concept-future-append" title="concept-future-append">append</dfn> an
<var title="">acceptCallback</var> and a <var title="">rejectCallback</var> to a
<var title="">future</var>, run these steps:

<ol>
 <li><p>Append <var title="">acceptCallback</var> to <var title="">future</var>'s
 <a href="#concept-future-accept-callbacks" title="concept-future-accept-callbacks">accept callbacks</a>.

 <li><p>Append <var title="">rejectCallback</var> to <var title="">future</var>'
 <a href="#concept-future-reject-callbacks" title="concept-future-reject-callbacks">reject callbacks</a>.

 <li><p>If <var title="">future</var>'s <a href="#concept-future-state" title="concept-future-state">state</a> is
 <i title="">accepted</i>, <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> to
 <a href="#concept-future-process" title="concept-future-process">process</a> <var title="">future</var>'s
 <a href="#concept-future-accept-callbacks" title="concept-future-accept-callbacks">accept callbacks</a> with
 <var title="">future</var>'s <a href="#concept-future-result" title="concept-future-result">result</a>.

 <li><p>If <var title="">future</var>'s <a href="#concept-future-state" title="concept-future-state">state</a> is
 <i title="">rejected</i>, <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> to
 <a href="#concept-future-process" title="concept-future-process">process</a> <var title="">future</var>'s
 <a href="#concept-future-reject-callbacks" title="concept-future-reject-callbacks">reject callbacks</a> with
 <var title="">future</var>'s <a href="#concept-future-result" title="concept-future-result">result</a>.
</ol>

<p>A <dfn id="concept-future-callback" title="concept-future-callback">future callback</dfn> for a
<a href="#concept-resolver" title="concept-resolver">resolver</a> <var title="">resolver</var> and algorithm
<var title="">algorithm</var> is a JavaScript <code title="">Function</code> Object which when
called runs these steps:

<ol>
 <li><p>Let <var title="">value</var> be the first argument that is passed, and
 <code title="">undefined</code> otherwise.

 <li><p>Run <var title="">resolver</var>'s <var title="">algorithm</var> with
 <var title="">value</var> and the <i title="">synchronous flag</i> set.
</ol>

<p>A <dfn id="concept-future-wrapper-callback" title="concept-future-wrapper-callback">future wrapper callback</dfn> for a
<a href="#concept-resolver" title="concept-resolver">resolver</a> <var title="">resolver</var> and callback
<var title="">callback</var> is a JavaScript <code title="">Function</code> Object which when
called runs these steps:

<ol>
 <li><p>Let <var title="">argument</var> be the first argument that is passed, and
 <code title="">undefined</code> otherwise.

 <li><p>Set <var title="">callback</var>'s
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-callback-this-value">callback this value</a> to <var title="">resolver</var>'s
 associated <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">value</var> be the result of invoking <var title="">callback</var>
 with <var title="">argument</var> as argument.

 <li><p>If invoking <var title="">callback</var> threw an exception, run
 <var title="">resolver</var>'s <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> with the
 thrown exception as argument and the <i title="">synchronous flag</i> set.

 <li><p>Otherwise, run <var title="">resolver</var>'s
 <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> with <var title="">value</var> and the
 <i title="">synchronous flag</i> set.
</ol>

<p>To <dfn id="concept-future-process" title="concept-future-process">process</dfn> a <var title="">future</var>'s
<a href="#concept-future-accept-callbacks" title="concept-future-accept-callbacks">accept callbacks</a> or
<a href="#concept-future-reject-callbacks" title="concept-future-reject-callbacks">reject callbacks</a> with a given
<var title="">value</var>, call each callback with <var title="">value</var> as argument and
then discard it.

<p>A <dfn id="concept-resolver" title="concept-resolver">resolver</dfn> is in control of a
<a href="#concept-future" title="concept-future">future</a>'s <a href="#concept-future-state" title="concept-future-state">state</a>.

<p>A <a href="#concept-resolver" title="concept-resolver">resolver</a> has an associated
<dfn id="resolved-flag">resolved flag</dfn>. Unless stated otherwise a
<a href="#concept-resolver" title="concept-resolver">resolver</a>'s <a href="#resolved-flag">resolved flag</a> is unset.

<p>A <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
<dfn id="concept-resolver-accept" title="concept-resolver-accept">accept</dfn> algorithm takes a <var title="">value</var>
and optionally a <i title="">synchronous flag</i>, and runs these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a>'s <a href="#resolved-flag">resolved flag</a> is set, terminate
 these steps.

 <li><p>Let <var title="">future</var> be the <a href="#context-object">context object</a>'s associated
 <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Set <var title="">future</var>'s <a href="#concept-future-state" title="concept-future-state">state</a> to
 <i title="">accepted</i>.

 <li><p>Set <var title="">future</var>'s <a href="#concept-future-result" title="concept-future-result">result</a> to
 <var title="">value</var>.

 <li><p>Set the <a href="#context-object">context object</a>'s <a href="#resolved-flag">resolved flag</a>.

 <li><p>If the <i title="">synchronous flag</i> is set,
 <a href="#concept-future-process" title="concept-future-process">process</a> <var title="">future</var>'s
 <a href="#concept-future-accept-callbacks" title="concept-future-accept-callbacks">accept callbacks</a> with
 <var title="">value</var>.

 <li><p>Otherwise, the <i title="">synchronous flag</i> is unset,
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> to
 <a href="#concept-future-process" title="concept-future-process">process</a> <var title="">future</var>'s
 <a href="#concept-future-accept-callbacks" title="concept-future-accept-callbacks">accept callbacks</a> with
 <var title="">value</var>.
</ol>

<p>A <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
<dfn id="concept-resolver-resolve" title="concept-resolver-resolve">resolve</dfn> algorithm takes a <var title="">value</var>
and optionally a <i title="">synchronous flag</i>, and runs these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a>'s <a href="#resolved-flag">resolved flag</a> is set, terminate
 these steps.

 <li>
  <p>Let <var title="">then</var> be null.

  <p class="note">Starting here the algorithm is described in terms of the JavaScript
  specification. (Or ECMAScript, if you feel that is a more suitable name.)

 <li><p>If <var title="">value</var> is a JavaScript Object, set <var title="">then</var> to
 the result of calling the JavaScript <code title="">[[Get]]</code> internal method of
 <var title="">value</var> with property name <code title="">then</code>.

 <li><p>If calling the <code title="">[[Get]]</code> internal method threw an exception, run
 <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> with the thrown exception and the
 <i title="">synchronous flag</i> if set, and then terminate these steps.

 <li>
  <p>If JavaScript IsCallable(<var title="">then</var>) is true, run these substeps and then
  terminate these steps:

  <ol>
   <li><p>Let <var title="">acceptCallback</var> be a
   <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for the
   <a href="#context-object">context object</a> and its <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a>
   algorithm.

   <li><p>Let <var title="">rejectCallback</var> be a
   <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for the
   <a href="#context-object">context object</a> and its <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a>
   algorithm.

   <li><p>Call the JavaScript <code title="">[[Call]]</code> internal method of
   <var title="">then</var> with <b title="">this</b> value <var title="">value</var> and
   <var title="">acceptCallback</var> and <var title="">rejectCallback</var> as arguments.

   <li><p>If calling the <code title="">[[Call]]</code> internal method threw an exception,
   run <a href="#context-object">context object</a>'s <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a>
   with the thrown exception and the <i title="">synchronous flag</i> if set.
  </ol>

 <li><p>Run <a href="#context-object">context object</a>'s
 <a href="#concept-resolver-accept" title="concept-resolver-accept">accept</a> with <var title="">value</var> and the
 <i title="">synchronous flag</i> if set.
</ol>

<p>A <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
<dfn id="concept-resolver-reject" title="concept-resolver-reject">reject</dfn> algorithm takes a <var title="">value</var>
and optionally a <i title="">synchronous flag</i>, and runs these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a>'s <a href="#resolved-flag">resolved flag</a> is set, terminate
 these steps.

 <li><p>Let <var title="">future</var> be the <a href="#context-object">context object</a>'s associated
 <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Set <var title="">future</var>'s <a href="#concept-future-state" title="concept-future-state">state</a> to
 <i title="">rejected</i>.

 <li><p>Set <var title="">future</var>'s <a href="#concept-future-result" title="concept-future-result">result</a> to
 <var title="">value</var>.

 <li><p>Set the <a href="#context-object">context object</a>'s <a href="#resolved-flag">resolved flag</a>.

 <li><p>If the <i title="">synchronous flag</i> is set,
 <a href="#concept-future-process" title="concept-future-process">process</a> <var title="">future</var>'s
 <a href="#concept-future-reject-callbacks" title="concept-future-reject-callbacks">reject callbacks</a> with
 <var title="">value</var>.

 <li><p>Otherwise, the <i title="">synchronous flag</i> is unset,
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">queue a task</a> to
 <a href="#concept-future-process" title="concept-future-process">process</a> <var title="">future</var>'s
 <a href="#concept-future-reject-callbacks" title="concept-future-reject-callbacks">reject callbacks</a> with
 <var title="">value</var>.
</ol>

<p>Unless stated otherwise, the <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#task-source">task source</a> used by
<a href="#concept-future" title="concept-future">futures</a> and their
<a href="#concept-resolver" title="concept-resolver">resolvers</a> is the
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#dom-manipulation-task-source">DOM manipulation task source</a>.


<h3 id="futures-api"><span class="secno">4.3 </span>Futures API</h3>

<pre class="idl">interface <dfn id="futureresolver">FutureResolver</dfn> {
  void <a href="#dom-futureresolver-accept" title="dom-FutureResolver-accept">accept</a>(optional any <var title="">value</var>);
  void <a href="#dom-futureresolver-resolve" title="dom-FutureResolver-resolve">resolve</a>(optional any <var title="">value</var>);
  void <a href="#dom-futureresolver-reject" title="dom-FutureResolver-reject">reject</a>(optional any <var title="">value</var>);
};

callback <dfn id="futureinit">FutureInit</dfn> = void (<a href="#futureresolver">FutureResolver</a> <var title="">resolver</var>);
callback <dfn id="anycallback">AnyCallback</dfn> = any (optional any <var title="">value</var>);

[<a href="#dom-future" title="dom-Future">Constructor</a>(<a href="#futureinit">FutureInit</a> <var title="">init</var>)]
interface <dfn id="future">Future</dfn> {
  static <a href="#future">Future</a> <a href="#dom-future-accept" title="dom-Future-accept">accept</a>(any <var title="">value</var>);
  static <a href="#future">Future</a> <a href="#dom-future-resolve" title="dom-Future-resolve">resolve</a>(any <var title="">value</var>); // same as <a href="#dom-future-any" title="dom-Future-any">any(<var>value</var>)</a>
  static <a href="#future">Future</a> <a href="#dom-future-reject" title="dom-Future-reject">reject</a>(any <var title="">value</var>);

  static <a href="#future">Future</a> <a href="#dom-future-any" title="dom-Future-any">_any</a>(any... <var title="">values</var>); // exposed as "any" in JavaScript, without "_"
  static <a href="#future">Future</a> <a href="#dom-future-every" title="dom-Future-every">every</a>(any... <var title="">values</var>);
  static <a href="#future">Future</a> <a href="#dom-future-some" title="dom-Future-some">some</a>(any... <var title="">values</var>);

  <a href="#future">Future</a> <a href="#dom-future-then" title="dom-Future-then">then</a>([TreatUndefinedAs=Missing] optional <a href="#anycallback">AnyCallback</a> <var title="">acceptCallback</var>, [TreatUndefinedAs=Missing] optional <a href="#anycallback">AnyCallback</a> <var title="">rejectCallback</var>);
  <a href="#future">Future</a> <a href="#dom-future-catch" title="dom-Future-catch">catch</a>([TreatUndefinedAs=Missing] optional <a href="#anycallback">AnyCallback</a> <var title="">rejectCallback</var>);
  void <a href="#dom-future-done" title="dom-Future-done">done</a>([TreatUndefinedAs=Missing] optional <a href="#anycallback">AnyCallback</a> <var title="">acceptCallback</var>, [TreatUndefinedAs=Missing] optional <a href="#anycallback">AnyCallback</a> <var title="">rejectCallback</var>);
};</pre>

<p>A <code><a href="#futureresolver">FutureResolver</a></code> object is a <a href="#concept-resolver" title="concept-resolver">resolver</a>.

<dl class="domintro">
 <dt><code><var title="">resolver</var> . <a href="#dom-futureresolver-accept" title="dom-FutureResolver-accept">accept</a>(<var title="">value</var>)</code>
 <dd><p>Runs <var title="">resolver</var>'s
 <a href="#concept-resolver-accept" title="concept-resolver-accept">accept</a>.

 <dt><code><var title="">resolver</var> . <a href="#dom-futureresolver-resolve" title="dom-FutureResolver-resolve">resolve</a>(<var title="">value</var>)</code>
 <dd><p>Runs <var title="">resolver</var>'s
 <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a>.

 <dt><code><var title="">resolver</var> . <a href="#dom-futureresolver-reject" title="dom-FutureResolver-reject">reject</a>(<var title="">value</var>)</code>
 <dd><p>Runs <var title="">resolver</var>'s
 <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a>.
</dl>

<p>The <dfn id="dom-futureresolver-accept" title="dom-FutureResolver-accept"><code>accept(<var>value</var>)</code></dfn>
method must run <a href="#context-object">context object</a>'s
<a href="#concept-resolver-accept" title="concept-resolver-accept">accept</a> with <var title="">value</var>.

<p>The <dfn id="dom-futureresolver-resolve" title="dom-FutureResolver-resolve"><code>resolve(<var>value</var>)</code></dfn>
method must run <a href="#context-object">context object</a>'s
<a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> with <var title="">value</var>.

<p>The <dfn id="dom-futureresolver-reject" title="dom-FutureResolver-reject"><code>reject(<var>value</var>)</code></dfn>
method must run <a href="#context-object">context object</a>'s
<a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> with <var title="">value</var>.

<p>A <code><a href="#future">Future</a></code> object is a <a href="#concept-future" title="concept-future">future</a>.

<dl class="domintro">
 <dt><code><var title="">future</var> = new <a href="#dom-future" title="dom-Future">Future</a>(<var title="">init</var>)</code>
 <dd><p>Creates a new <a href="#concept-future" title="concept-future">future</a>. The <var title="">init</var>
 callback is passed the associated <a href="#concept-resolver" title="concept-resolver">resolver</a>. If the
 callback throws an exception, the <a href="#concept-future" title="concept-future">future</a>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
 <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> is run with the thrown exception.

 <dt><code><var title="">newFuture</var> = <var title="">future</var>.<a href="#dom-future-then" title="dom-Future-then">then</a>([<var title="">acceptCallback</var> [, <var title="">rejectCallback</var>]])</code>
 <dd>
  <p>Appends callbacks to <var title="">future</var> of which one will be invoked with
  <var title="">future</var>'s <a href="#concept-future-result" title="concept-future-result">result</a> at some point
  after <var title="">future</var>'s <a href="#concept-future-state" title="concept-future-state">state</a> is set to
  either <i title="">accepted</i> or <i title="">rejected</i>.

  <p>If <var title="">acceptCallback</var> or <var title="">rejectCallback</var> is omitted or undefined, a
  callback will be appended that when invoked runs <var title="">newFuture</var>'s associated
  <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
  <span title="concept-resolve">resolve</span> or <span title="concept-reject">reject</span>
  algorithm respectively, with <var title="">future</var>'s
  <a href="#concept-future-result" title="concept-future-result">result</a>.

  <p>If they are not omitted or undefined, when invoked their return value is passed to
  <var title="">newFuture</var>'s associated <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
  <span title="concept-resolve">resolve</span> algorithm. If a callback throws an exception,
  that exception is passed to <var title="">newFuture</var>'s associated
  <a href="#concept-resolver" title="concept-resolver">resolver</a>'s
  <span title="concept-reject">reject</span> algorithm.

 <dt><code><var title="">newFuture</var> = <var title="">future</var>.<a href="#dom-future-catch" title="dom-Future-catch">catch</a>([<var title="">rejectCallback</var>])</code>
 <dd><p>Identical to invoking <code><var title="">future</var>.<a href="#dom-future-then" title="dom-Future-then">then</a>(undefined, <var title="">rejectCallback</var>)</code>.

 <dt><code><var title="">future</var>.<a href="#dom-future-done" title="dom-Future-done">done</a>([<var title="">acceptCallback</var> [, <var title="">rejectCallback</var>]])</code>
 <dd>
  <p>Appends callbacks to <var title="">future</var> of which one will be invoked with
  <var title="">future</var>'s <a href="#concept-future-result" title="concept-future-result">result</a> at some point
  after <var title="">future</var>'s <a href="#concept-future-state" title="concept-future-state">state</a> is set to
  either <i title="">accepted</i> or <i title="">rejected</i>.

  <p>Exceptions raised will reach <code title="">window.onerror</code>.
</dl>

<p>The <dfn id="dom-future" title="dom-Future"><code>Future(<var>init</var>)</code></dfn> constructor must
run these steps:

<ol>
 <li><p>Let <var title="">future</var> be a new <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">resolver</var> be <var title="">future</var>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>.

 <li><p>Set <var title="">init</var>'s
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-callback-this-value">callback this value</a> to <var title="">future</var>.

 <li><p>Invoke <var title="">init</var> with <var title="">resolver</var> passed as parameter.

 <li><p>If <var title="">init</var> threw an exception, run <var title="">resolver</var>'s
 <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> with the thrown exception as argument.

 <li><p>Return <var title="">future</var>.
</ol>

<p>The
<dfn id="dom-future-then" title="dom-Future-then"><code>then(<var>acceptCallback</var>, <var>rejectCallback</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">future</var> be a new <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">resolver</var> be <var title="">future</var>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>.

 <li><p>Let <var title="">acceptWrapper</var> be a
 <a href="#concept-future-wrapper-callback" title="concept-future-wrapper-callback">future wrapper callback</a> for
 <var title="">resolver</var> and <var title="">acceptCallback</var> if
 <var title="">acceptCallback</var> is not omitted and a
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-accept" title="concept-resolver-accept">accept</a> algorithm otherwise.

 <li><p>Let <var title="">rejectWrapper</var> be a
 <a href="#concept-future-wrapper-callback" title="concept-future-wrapper-callback">future wrapper callback</a> for
 <var title="">resolver</var> and <var title="">rejectCallback</var> if
 <var title="">rejectCallback</var> is not omitted and a
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> algorithm otherwise.

 <li><p><a href="#concept-future-append" title="concept-future-append">Append</a> <var title="">acceptWrapper</var> and
 <var title="">rejectWrapper</var> to the <a href="#context-object">context object</a>.

 <li><p>Return <var title="">future</var>.
</ol>

<p>The <dfn id="dom-future-catch" title="dom-Future-catch"><code>catch(<var>rejectCallback</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">future</var> be a new <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">resolver</var> be <var title="">future</var>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>.

 <li><p>Let <var title="">acceptCallback</var> be a new
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-accept" title="concept-resolver-accept">accept</a> algorithm.

 <li><p>Let <var title="">rejectWrapper</var> be a
 <a href="#concept-future-wrapper-callback" title="concept-future-wrapper-callback">future wrapper callback</a> for
 <var title="">resolver</var> and <var title="">rejectCallback</var> if
 <var title="">rejectCallback</var> is not omitted and a
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> algorithm otherwise.

 <li><p><a href="#concept-future-append" title="concept-future-append">Append</a> <var title="">acceptCallback</var> and
 <var title="">rejectWrapper</var> to the <a href="#context-object">context object</a>.

 <li><p>Return <var title="">future</var>.
</ol>

<p>The
<dfn id="dom-future-done" title="dom-Future-done"><code>done(<var>acceptCallback</var>, <var>rejectCallback</var>)</code></dfn>
method must <a href="#concept-future-append" title="concept-future-append">append</a>
<var title="">acceptCallback</var> and <var title="">rejectCallback</var> to the
<a href="#context-object">context object</a>.

<p class="note">The <code title="dom-Future-done"><a href="#dom-future-done">done()</a></code> method is useful at the end of
a chain of <a href="#concept-future" title="concept-future">futures</a> as exceptions thrown by its callbacks
will reach <code title="">window.onerror</code>.

<hr>

<dl class="domintro">
 <dt><code><a href="#future">Future</a>.<a href="#dom-future-accept" title="dom-Future-accept">accept</a>(<var>value</var>)</code>
 <dd><p>Returns a <a href="#concept-future" title="concept-future">future</a> that is <i title="">accepted</i>
 with <a href="#concept-future-result" title="concept-future-result">result</a> <var title="">value</var>.

 <dt><code><a href="#future">Future</a>.<a href="#dom-future-resolve" title="dom-Future-resolve">resolve</a>(<var>value</var>)</code>
 <dd><p>Returns a <a href="#concept-future" title="concept-future">future</a> that depends upon
 <var title="">value</var>.

 <dt><code><a href="#future">Future</a>.<a href="#dom-future-reject" title="dom-Future-reject">reject</a>(<var>value</var>)</code>
 <dd><p>Returns a <a href="#concept-future" title="concept-future">future</a> that is <i title="">rejected</i>
 with <a href="#concept-future-result" title="concept-future-result">result</a> <var title="">value</var>.
</dl>

<p>To <dfn id="concept-future-resolve-wrap" title="concept-future-resolve-wrap">resolve wrap</dfn> a <var title="">value</var>,
return a new <a href="#concept-future" title="concept-future">future</a> whose associated
<a href="#concept-resolver" title="concept-resolver">resolver</a>'s
<a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> is run with <var title="">value</var>.

<p>The static <dfn id="dom-future-accept" title="dom-Future-accept"><code>accept(<var>value</var>)</code></dfn>
method must return a new <a href="#concept-future" title="concept-future">future</a> whose associated
<a href="#concept-resolver" title="concept-resolver">resolver</a>'s
<a href="#concept-resolver-accept" title="concept-resolver-accept">accept</a> is run with <var title="">value</var>.

<p>The static <dfn id="dom-future-resolve" title="dom-Future-resolve"><code>resolve(<var>value</var>)</code></dfn>
method must return <var title="">value</var>
<a href="#concept-future-resolve-wrap" title="concept-future-resolve-wrap">resolve wrapped</a>.

<p>The static <dfn id="dom-future-reject" title="dom-Future-reject"><code>reject(<var>value</var>)</code></dfn>
method must return a new <a href="#concept-future" title="concept-future">future</a> whose associated
<a href="#concept-resolver" title="concept-resolver">resolver</a>'s
<a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> is run with <var title="">value</var>.

<hr>

<dl class="domintro">
 <dt><code><a href="#future">Future</a>.<a href="#dom-future-any" title="dom-Future-any">any</a>(<var>values</var>)</code>
 <dd><p>Returns a <a href="#concept-future" title="concept-future">future</a> that is <i title="">accepted</i>
 or <i title="">rejected</i> when any of <var>values</var> is either <i title="">accepted</i> or
 <i title="">rejected</i>.

 <dt><code><a href="#future">Future</a>.<a href="#dom-future-every" title="dom-Future-every">every</a>(<var>values</var>)</code>
 <dd><p>Returns a <a href="#concept-future" title="concept-future">future</a> that is <i title="">accepted</i>
 or <i title="">rejected</i> when all <var>values</var> are <i title="">accepted</i> or any is
 <i title="">rejected</i>.

 <dt><code><a href="#future">Future</a>.<a href="#dom-future-some" title="dom-Future-some">some</a>(<var>values</var>)</code>
 <dd><p>Returns a <a href="#concept-future" title="concept-future">future</a> that is <i title="">accepted</i>
 or <i title="">rejected</i> when one of <var>values</var> is <i title="">accepted</i> or all
 are <i title="">rejected</i>.
</dl>

<p>The static <dfn id="dom-future-any" title="dom-Future-any"><code>any(<var>values</var>)</code></dfn> method
must run these steps:

<ol>
 <li><p>Let <var title="">future</var> be a new <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">resolver</var> be <var title="">future</var>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>.

 <li><p>Let <var title="">acceptCallback</var> be a new
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> algorithm.

 <li><p>Let <var title="">rejectCallback</var> be a new
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> algorithm.

 <li><p>If <var>values</var> is the empty list, invoke <var title="">resolver</var>'s
 <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> with <code title="">undefined</code>.

 <li><p>Otherwise, for each <var title="">value</var> in <var title="">values</var>, in given order,
 <a href="#concept-future-append" title="concept-future-append">append</a> <var title="">acceptCallback</var> and
 <var title="">rejectCallback</var> to the result of
 <a href="#concept-future-resolve-wrap" title="concept-future-resolve-wrap">resolve wrapping</a> <var title="">value</var>.

 <li><p>Return <var title="">future</var>.
</ol>

<p>The static <dfn id="dom-future-every" title="dom-Future-every"><code>every(<var>values</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">future</var> be a new <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">resolver</var> be <var title="">future</var>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>.

 <li><p>Let <var title="">index</var> be zero.

 <li><p>Let <var title="">countdown</var> be the number of <var title="">values</var>.

 <li><p>Let <var title="">arguments</var> be a JavaScript <code title="">Array</code> array
 object whose length is <var title="">countdown</var>.

 <li><p>Let <var title="">rejectCallback</var> be a new
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> algorithm.

 <li><p>If <var>values</var> is the empty list, invoke <var title="">resolver</var>'s
 <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> with <code title="">undefined</code>.

 <li>
  <p>Otherwise, for each <var title="">value</var> in <var title="">values</var>, in given order,
  run these substeps:

  <ol>
   <li>
    <p>Let <var title="">acceptCallback</var> be a JavaScript <code title="">Function</code> Object
    which when called runs these steps:

    <ol>
     <li><p>Let <var title="">argument</var> be the first argument that is passed, and
     <code title="">undefined</code> otherwise.

     <li><p>Insert <var title="">argument</var> into <var title="">arguments</var> at index
     current value of <var title="">index</var>.

     <li><p>Decrease <var title="">countdown</var> by one.

     <li><p>If <var title="">countdown</var> is zero, run <var title="">resolver</var>'s
     <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> with <var title="">arguments</var>
     and the <i title="">synchronous flag</i> set.
    </ol>

   <li><p>Increase <var title="">index</var> by one.

   <li><p><a href="#concept-future-append" title="concept-future-append">Append</a> <var title="">acceptCallback</var>
   and <var title="">rejectCallback</var> to the result of
   <a href="#concept-future-resolve-wrap" title="concept-future-resolve-wrap">resolve wrapping</a> <var title="">value</var>.
  </ol>

 <li><p>Return <var title="">future</var>.
</ol>

<p>The static <dfn id="dom-future-some" title="dom-Future-some"><code>some(<var>values</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">future</var> be a new <a href="#concept-future" title="concept-future">future</a>.

 <li><p>Let <var title="">resolver</var> be <var title="">future</var>'s associated
 <a href="#concept-resolver" title="concept-resolver">resolver</a>.

 <li><p>Let <var title="">index</var> be zero.

 <li><p>Let <var title="">countdown</var> be the number of <var title="">values</var>.

 <li><p>Let <var title="">arguments</var> be a JavaScript <code title="">Array</code> array
 object whose length is <var title="">countdown</var>.

 <li><p>Let <var title="">acceptCallback</var> be a new
 <a href="#concept-future-callback" title="concept-future-callback">future callback</a> for <var title="">resolver</var>
 and its <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> algorithm.

 <li><p>If <var>values</var> is the empty list, invoke <var title="">resolver</var>'s
 <a href="#concept-resolver-resolve" title="concept-resolver-resolve">resolve</a> with <code title="">undefined</code>.

 <li>
  <p>Otherwise, for each <var title="">value</var> in <var title="">values</var>, in given order,
  run these substeps:

  <ol>

   <li>
    <p>Let <var title="">rejectCallback</var> be a JavaScript <code title="">Function</code> Object
    which when called runs these steps:

    <ol>
     <li><p>Let <var title="">argument</var> be the first argument that is passed, and
     <code title="">undefined</code> otherwise.

     <li><p>Insert <var title="">argument</var> into <var title="">arguments</var> at index
     current value of <var title="">index</var>.

     <li><p>Decrease <var title="">countdown</var> by one.

     <li><p>If <var title="">countdown</var> is zero, run <var title="">resolver</var>'s
     <a href="#concept-resolver-reject" title="concept-resolver-reject">reject</a> with <var title="">arguments</var> and
     the <i title="">synchronous flag</i> set.
    </ol>

   <li><p>Increase <var title="">index</var> by one.

   <li><p><a href="#concept-future-append" title="concept-future-append">Append</a> <var title="">acceptCallback</var>
   and <var title="">rejectCallback</var> to the result of
   <a href="#concept-future-resolve-wrap" title="concept-future-resolve-wrap">resolve wrapping</a> <var title="">value</var>.
  </ol>

 <li><p>Return <var title="">future</var>.
</ol>


<h2 id="events"><span class="secno">5 </span>Events</h2>

<h3 id="introduction-to-dom-events"><span class="secno">5.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
  …
}</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
  …
}</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">5.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>;

  [Unforgeable] 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> = false;
  boolean <span title="dom-EventInit-cancelable">cancelable</span> = false;
};</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>, and 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, and 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, and
 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>The
<dfn id="dom-event-stoppropagation" title="dom-Event-stopPropagation"><code>stopPropagation()</code></dfn>
method must set the <a href="#stop-propagation-flag">stop propagation flag</a>.

<p>The
<dfn id="dom-event-stopimmediatepropagation" title="dom-Event-stopImmediatePropagation"><code>stopImmediatePropagation()</code></dfn>
method must set both the <a href="#stop-propagation-flag">stop propagation flag</a> and
<a href="#stop-immediate-propagation-flag">stop immediate propagation flag</a>.

<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, they must be initialized
to false. <span class="note">The <code><a href="#eventinit">EventInit</a></code> dictionary is not sufficient due to
the existence of the legacy
<code title="dom-Document-createEvent"><a href="#dom-document-createevent">createEvent()</a></code>.</span>

<p>The
<dfn id="dom-event-preventdefault" title="dom-Event-preventDefault"><code>preventDefault()</code></dfn>
method must set the <a href="#canceled-flag">canceled flag</a> if the
<code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attribute value is true.

<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>To <dfn id="concept-event-initialize" title="concept-event-initialize">initialize</dfn> an
<var title="">event</var>, with <var title="">type</var>,
<var title="">bubbles</var>, and <var title="">cancelable</var>, run these steps:

<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
 <var title="">type</var>.
 <li><p>Set the <code title="dom-Event-bubbles"><a href="#dom-event-bubbles">bubbles</a></code> attribute to
 <var title="">bubbles</var>.
 <li><p>Set the <code title="dom-Event-cancelable"><a href="#dom-event-cancelable">cancelable</a></code> attribute
 to <var title="">cancelable</var>.
</ol>

<p>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 must <a href="#concept-event-initialize" title="concept-event-initialize">initialize</a> the
<a href="#context-object">context object</a> with <var title="">type</var>,
<var title="">bubbles</var>, and <var title="">cancelable</var>.

<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">5.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>;

  void <a href="#dom-customevent-initcustomevent" title="dom-CustomEvent-initCustomEvent">initCustomEvent</a>(DOMString <var title="">type</var>, boolean <var title="">bubbles</var>, boolean <var title="">cancelable</var>, any <var title="">detail</var>);
};

dictionary <dfn id="customeventinit">CustomEventInit</dfn> : <a href="#eventinit">EventInit</a> {
  any <span title="dom-CustomEventInit-detail">detail</span> = null;
};</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.

 <!-- initCustomEvent is dead -->
</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. <span class="note">The <code><a href="#customeventinit">CustomEventInit</a></code> dictionary is not
sufficient due to the existence of the legacy
<code title="dom-Document-createEvent"><a href="#dom-document-createevent">createEvent()</a></code>.</span>

<p>The
<dfn id="dom-customevent-initcustomevent" title="dom-CustomEvent-initCustomEvent"><code>initCustomEvent(<var title="">type</var>, <var title="">bubbles</var>, <var title="">cancelable</var>, <var title="">detail</var>)</code></dfn>
method must <a href="#concept-event-initialize" title="concept-event-initialize">initialize</a> the
<a href="#context-object">context object</a> with <var title="">type</var>,
<var title="">bubbles</var>, and <var title="">cancelable</var>, and then set its
<code title="dom-CustomEvent-detail"><a href="#dom-customevent-detail">detail</a></code> attribute to
<var title="">detail</var>.


<h3 id="constructing-events"><span class="secno">5.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" data-anolis-spec="webidl" 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" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-identifier">identifier</a> matches the key of
 the <a class="external" data-anolis-spec="webidl" 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" data-anolis-spec="webidl" 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="defining-event-interfaces"><span class="secno">5.5 </span>Defining event interfaces</h3>

<p>In general, when defining a new interface that inherits from
<code><a href="#event">Event</a></code> please always ask feedback from the WHATWG or the
W3C WebApps WG community.

<p>The <code><a href="#customevent">CustomEvent</a></code> interface can be used as starting point.
However, do not introduce any <code title="">init<var>*</var>Event()</code>
methods as they are redundant with constructors. Interfaces that inherit
from the <code><a href="#event">Event</a></code> interface that have such a method only have it
for historical reasons.


<h3 id="interface-eventtarget"><span class="secno">5.6 </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> associates a
callback with 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.

<p class="note">The <b>callback</b> is named <code><a href="#eventlistener">EventListener</a></code> for
historical reasons. As can be seen from the definition above, an
<a href="#concept-event-listener" title="concept-event-listener">event listener</a> is a more broad
concept.

<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, and false otherwise.
</dl>

<p>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 must run these steps:
<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>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 must run these steps:
<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>The
<dfn id="dom-eventtarget-dispatchevent" title="dom-EventTarget-dispatchEvent"><code>dispatchEvent(<var title="">event</var>)</code></dfn>
method must run these steps:
<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">5.7 </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:

<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>, and 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, and 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" data-anolis-spec="webidl" 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">5.8 </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">6 </span>Nodes</h2>

<h3 id="introduction-to-the-dom"><span class="secno">6.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-node-tree" title="concept-node-tree">node tree</a>. Some of the
<a href="#concept-node" title="concept-node">nodes</a> in the
<a href="#concept-tree" title="concept-tree">tree</a> can have
<a href="#concept-tree-child" title="concept-tree-child">children</a>, while others are leaves.

<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" title=""><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 title="">Aliens?</span></li>
        </ul>
       </li>
      </ul>
     </li>
     <li class="t3"><code><a href="#text">Text</a></code>: <span title="">⏎␣</span></li>
     <li class="t1">
      <a href="#concept-element" title="concept-element">Element</a>: <code title="">body</code>
      <ul>
       <li class="t3"><code><a href="#text">Text</a></code>: <span title="">Why yes.⏎</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" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#html-parser" title="HTML parser">HTML parsing</a>, not all
<a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</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">The most excellent
<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM Viewer</a>
can be used to explore this matter in more detail.

<p class="XXX">How much should be explained here? Ideas?


<h3 id="node-tree"><span class="secno">6.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>, simply named the
<dfn id="concept-node-tree" title="concept-node-tree">node tree</dfn>.

<p>A <a href="#concept-node-tree" title="concept-node-tree">node tree</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 -->

<p>The <dfn id="concept-node-length" title="concept-node-length">length</dfn> of a
<a href="#concept-node" title="concept-node">node</a> <var title="">node</var> depends on
<var title="">node</var>:
<dl class="switch">
 <dt><code><a href="#documenttype">DocumentType</a></code>
 <dd><p>Zero.

 <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>Its <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute
 value.

 <dt>Any other node
 <dd><p>Its number of <a href="#concept-tree-child" title="concept-tree-child">children</a>.
</dl>

<p>A <a href="#concept-node" title="concept-node">node</a> is considered
<dfn id="concept-node-empty" title="concept-node-empty">empty</dfn> if its
<a href="#concept-node-length" title="concept-node-length">length</a> is zero.


<h4 id="mutation-algorithms"><span class="secno">6.2.1 </span>Mutation algorithms</h4>

<p>At certain points in the algorithms below it is said that a
<dfn id="node-is-inserted">node is inserted</dfn> or a <dfn id="node-is-removed">node is 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 a
 <a href="#concept-tree-host-including-inclusive-ancestor" title="concept-tree-host-including-inclusive-ancestor">host-including 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="">node</var> is not an
 <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>
 <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 either <var title="">node</var> is a <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a> and <var title="">parent</var> is a
 <a href="#concept-document" title="concept-document">document</a>, or <var title="">node</var> is a
 <a href="#concept-doctype" title="concept-doctype">doctype</a> and <var title="">parent</var> is
 not a <a href="#concept-document" title="concept-document">document</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="">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 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>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> into <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>,
 and 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>, and 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="#queue-a-mutation-record">queue a mutation record</a>
  of "<code>childList</code>" for <var title="">node</var> with removedNodes
  <var title="">nodes</var>.

  <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="#queue-a-mutation-record">queue a mutation record</a> of "<code>childList</code>" for
 <var title="">parent</var> with addedNodes <var title="">nodes</var>,
 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 <a href="#concept-node" title="concept-node">nodes</a> 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, for each
 <a href="#concept-node" title="concept-node">node</a> in <var title="">nodes</var>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a> run
 <a href="#node-is-inserted">node is 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:

<!-- Step 1-5 could be shared with concept-node-pre-insert, although step 3
     in pre-insert is a superset (which is fine). Step 6.1.1 could also be
     shared. -->

<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 a
 <a href="#concept-tree-host-including-inclusive-ancestor" title="concept-tree-host-including-inclusive-ancestor">host-including inclusive ancestor</a>
 <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>'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>If <var title="">node</var> is not an
 <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>
 <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 either <var title="">node</var> is a <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a> and <var title="">parent</var> is a
 <a href="#concept-document" title="concept-document">document</a>, or <var title="">node</var> is a
 <a href="#concept-doctype" title="concept-doctype">doctype</a> and <var title="">parent</var> is
 not a <a href="#concept-document" title="concept-document">document</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="">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 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>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> into <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>, and a
 list containing solely <var title="">node</var> otherwise.

 <li><p><a href="#queue-a-mutation-record">Queue a mutation record</a> of "<code>childList</code>" for
 target <var title="">parent</var> with 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>Run <a href="#node-is-removed">node is removed</a> for <var title="">child</var>, and
 then for each <a href="#concept-node" title="concept-node">node</a> in
 <var title="">nodes</var>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, run
 <a href="#node-is-inserted">node is 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>If <var title="">node</var> is not null,
 <a href="#concept-node-adopt" title="concept-node-adopt">adopt</a> <var title="">node</var> into
 <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>, and a list containing
 <var title="">node</var> otherwise.

 <li><p><a href="#queue-a-mutation-record">Queue a mutation record</a> of "<code>childList</code>" for
 <var title="">parent</var> with addedNodes <var title="">nodes</var> and
 removedNodes <var title="">parent</var>'s
 <a href="#concept-tree-child" title="concept-tree-child">children</a>.

 <li><p>Run <a href="#node-is-removed">node is removed</a> for each
 <a href="#concept-tree-child" title="concept-tree-child">child</a> of <var title="">parent</var>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, and then
 for each <a href="#concept-node" title="concept-node">node</a> in <var title="">nodes</var>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, run
 <a href="#node-is-inserted">node is inserted</a>.
</ol>

<p class="note">This algorithm does not make any checks with regards to the
<a href="#concept-node-tree" title="concept-node-tree">node tree</a> constraints. 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.

 <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="">index</var>, decrease its
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> by one.

 <li><p>If <i title="">suppress observers flag</i> is unset,
 <a href="#queue-a-mutation-record">queue a mutation record</a> of "<code>childList</code>" for
 <var title="">parent</var> with removedNodes a list solely containing
 <var title="">node</var>, nextSibling <var title="">node</var>'s
 <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>,
 and previousSibling <var title="">node</var>'s
 <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a>.

 <li><p>For each <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a>
 <var title="">ancestor</var> of <var title="">node</var>, if
 <var title="">ancestor</var> has any
 <a href="#registered-observer" title="registered observer">registered observers</a> whose
 <b>options</b>'s
 <code title="dom-MutationObserverInit-subtree">subtree</code> is true, then
 for each such <a href="#registered-observer">registered observer</a>, append a
 <a href="#transient-registered-observer">transient registered observer</a> whose <b>observer</b> and
 <b>options</b> are identical to the <a href="#registered-observer">registered observer</a> to
 <var title="">node</var>'s list of
 <a href="#registered-observer" title="registered observer">registered observers</a>.

 <li><p>Remove <var title="">node</var> from its <var title="">parent</var>.

 <li><p>If <i title="">suppress observers flag</i> is unset, run
 <a href="#node-is-removed">node is removed</a> for <var title="">node</var>.
</ol>


<h4 id="interface-parentnode"><span class="secno">6.2.2 </span>Interface <code><a href="#parentnode">ParentNode</a></code></h4>

<p>The <dfn id="mutation-method-macro">mutation method macro</dfn>:

<ol>
 <li><p>Let <var title="">node</var> be null.

 <li><p>Replace each string in <var title="">nodes</var> with a
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a> whose
 <a href="#concept-cd-data" title="concept-CD-data">data</a> is the string value.

 <li>
  <p>If <var title="">nodes</var> contains more than one
  <a href="#concept-node" title="concept-node">node</a>, set <var title="">node</var> to a new
  <code><a href="#documentfragment">DocumentFragment</a></code> and
  <a href="#concept-node-append" title="concept-node-append">append</a> each
  <a href="#concept-node" title="concept-node">node</a> in <var title="">nodes</var> to it. If
  this throws an exception, re-throw the exception and terminate these
  steps.

  <p>Otherwise, set <var title="">node</var> to the single
  <a href="#concept-node" title="concept-node">node</a> <var title="">nodes</var> contains.
</ol>

<pre class="idl">[NoInterfaceObject]
interface <dfn id="parentnode">ParentNode</dfn> {
  readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-parentnode-children" title="dom-ParentNode-children">children</a>;
  readonly attribute <a href="#element">Element</a>? <a href="#dom-parentnode-firstelementchild" title="dom-ParentNode-firstElementChild">firstElementChild</a>;
  readonly attribute <a href="#element">Element</a>? <a href="#dom-parentnode-lastelementchild" title="dom-ParentNode-lastElementChild">lastElementChild</a>;
  readonly attribute unsigned long <a href="#dom-parentnode-childelementcount" title="dom-ParentNode-childElementCount">childElementCount</a>;

  void <a href="#dom-parentnode-prepend" title="dom-ParentNode-prepend">prepend</a>((<a href="#node">Node</a> or DOMString)... <var title="">nodes</var>);
  void <a href="#dom-parentnode-append" title="dom-ParentNode-append">append</a>((<a href="#node">Node</a> or DOMString)... <var title="">nodes</var>);
};
<a href="#document">Document</a> implements <a href="#parentnode">ParentNode</a>;
<a href="#documentfragment">DocumentFragment</a> implements <a href="#parentnode">ParentNode</a>;
<a href="#element">Element</a> implements <a href="#parentnode">ParentNode</a>;</pre>

<dl class="domintro">
 <dt><code><var title="">collection</var> = <var title="">node</var> . <a href="#dom-parentnode-children" title="dom-ParentNode-children">children</a></code>
 <dd><p>Returns the <a href="#concept-tree-child" title="concept-tree-child">child</a>
 <a href="#concept-element" title="concept-element">elements</a>.

 <dt><code><var title="">element</var> = <var title="">node</var> . <a href="#dom-parentnode-firstelementchild" title="dom-ParentNode-firstElementChild">firstElementChild</a></code>
 <dd><p>Returns the first <a href="#concept-tree-child" title="concept-tree-child">child</a> that
 is an <a href="#concept-element" title="concept-element">element</a>, and null otherwise.

 <dt><code><var title="">element</var> = <var title="">node</var> . <a href="#dom-parentnode-lastelementchild" title="dom-ParentNode-lastElementChild">lastElementChild</a></code>
 <dd><p>Returns the last <a href="#concept-tree-child" title="concept-tree-child">child</a> that
 is an <a href="#concept-element" title="concept-element">element</a>, and null otherwise.

 <!-- childElementCount is redundant -->

 <dt><code><var title="">node</var> . <a href="#dom-parentnode-prepend" title="dom-ParentNode-prepend">prepend</a>(<var title="">nodes</var>)</code>
 <dd>
  <p>Inserts <var title="">nodes</var> before the
  <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a> of
  <var title="">node</var>, while replacing strings in <var title="">nodes</var>
  with equivalent <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a>.

  <p><a href="#concept-throw" title="concept-throw">Throws</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" if the constraints of the
  <a href="#concept-node-tree" title="concept-node-tree">node tree</a> are violated.
  <!-- "NotFoundError" is impossible -->

 <dt><code><var title="">node</var> . <a href="#dom-parentnode-append" title="dom-ParentNode-append">append</a>(<var title="">nodes</var>)</code>
 <dd>
  <p>Inserts <var title="">nodes</var> after the
  <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a> of
  <var title="">node</var>, while replacing strings in <var title="">nodes</var>
  with equivalent <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a>.

  <p><a href="#concept-throw" title="concept-throw">Throws</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" if the constraints of the
  <a href="#concept-node-tree" title="concept-node-tree">node tree</a> are violated.
  <!-- "NotFoundError" is impossible -->
</dl>

<p>The <dfn id="dom-parentnode-children" title="dom-ParentNode-children"><code>children</code></dfn>
attribute must return an <code><a href="#htmlcollection">HTMLCollection</a></code>
<a href="#concept-collection" title="concept-collection">collection</a> rooted at the
<a href="#context-object">context object</a> matching only
<a href="#concept-element" title="concept-element">element</a>
<a href="#concept-tree-child" title="concept-tree-child">children</a>.

<p>The
<dfn id="dom-parentnode-firstelementchild" title="dom-ParentNode-firstElementChild"><code>firstElementChild</code></dfn>
attribute must return the first <a href="#concept-tree-child" title="concept-tree-child">child</a>
that is an <a href="#concept-element" title="concept-element">element</a>, and null otherwise.

<p>The
<dfn id="dom-parentnode-lastelementchild" title="dom-ParentNode-lastElementChild"><code>lastElementChild</code></dfn>
attribute must return the last <a href="#concept-tree-child" title="concept-tree-child">child</a>
that is an <a href="#concept-element" title="concept-element">element</a>, and null otherwise.

<p>The
<dfn id="dom-parentnode-childelementcount" title="dom-ParentNode-childElementCount"><code>childElementCount</code></dfn>
attribute must return the number of
<a href="#concept-tree-child" title="concept-tree-child">children</a> of the
<a href="#context-object">context object</a> that are
<a href="#concept-element" title="concept-element">elements</a>.

<p>The
<dfn id="dom-parentnode-prepend" title="dom-ParentNode-prepend"><code>prepend(<var>nodes</var>)</code></dfn>
method must run these steps:

<ol>
 <li>Run the <a href="#mutation-method-macro">mutation method macro</a>.

 <li><p><a href="#concept-node-pre-insert" title="concept-node-pre-insert">Pre-insert</a>
 <var title="">node</var> into the <a href="#context-object">context object</a> before the
 <a href="#context-object">context object</a>'s
 <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a>.
</ol>

<p>The
<dfn id="dom-parentnode-append" title="dom-ParentNode-append"><code>append(<var>nodes</var>)</code></dfn>
method must run these steps:

<ol>
 <li>Run the <a href="#mutation-method-macro">mutation method macro</a>.

 <li><p><a href="#concept-node-append" title="concept-node-append">Append</a>
 <var title="">node</var> to the <a href="#context-object">context object</a>.
</ol>


<h4 id="interface-childnode"><span class="secno">6.2.3 </span>Interface <code><a href="#childnode">ChildNode</a></code></h4>

<pre class="idl">[NoInterfaceObject]
interface <dfn id="childnode">ChildNode</dfn> {
  readonly attribute <a href="#element">Element</a>? <a href="#dom-childnode-previouselementsibling" title="dom-ChildNode-previousElementSibling">previousElementSibling</a>;
  readonly attribute <a href="#element">Element</a>? <a href="#dom-childnode-nextelementsibling" title="dom-ChildNode-nextElementSibling">nextElementSibling</a>;

  void <a href="#dom-childnode-before" title="dom-ChildNode-before">before</a>((<a href="#node">Node</a> or DOMString)... <var title="">nodes</var>);
  void <a href="#dom-childnode-after" title="dom-ChildNode-after">after</a>((<a href="#node">Node</a> or DOMString)... <var title="">nodes</var>);
  void <a href="#dom-childnode-replace" title="dom-ChildNode-replace">replace</a>((<a href="#node">Node</a> or DOMString)... <var title="">nodes</var>);
  void <a href="#dom-childnode-remove" title="dom-ChildNode-remove">remove</a>();
};
<a href="#documenttype">DocumentType</a> implements <a href="#childnode">ChildNode</a>;
<a href="#element">Element</a> implements <a href="#childnode">ChildNode</a>;
<a href="#characterdata">CharacterData</a> implements <a href="#childnode">ChildNode</a>;</pre>

<dl class="domintro">
 <dt><code><var title="">element</var> = <var title="">node</var> . <a href="#dom-childnode-previouselementsibling" title="dom-ChildNode-previousElementSibling">previousElementSibling</a></code>
 <dd><p>Returns the first
 <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
 <a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a> that
 is an <a href="#concept-element" title="concept-element">element</a>, and null otherwise.

 <dt><code><var title="">element</var> = <var title="">node</var> . <a href="#dom-childnode-nextelementsibling" title="dom-ChildNode-nextElementSibling">nextElementSibling</a></code>
 <dd><p>Returns the first
 <a href="#concept-tree-following" title="concept-tree-following">following</a>
 <a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a> that
 is an <a href="#concept-element" title="concept-element">element</a>, and null otherwise.

 <dt><code><var title="">node</var> . <a href="#dom-childnode-before" title="dom-ChildNode-before">before</a>(<var title="">nodes</var>)</code>
 <dd>
  <p>Inserts <var title="">nodes</var> just before <var title="">node</var>,
  while replacing strings in <var title="">nodes</var> with equivalent
  <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a>.

  <p><a href="#concept-throw" title="concept-throw">Throws</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" if the constraints of the
  <a href="#concept-node-tree" title="concept-node-tree">node tree</a> are violated.

 <dt><code><var title="">node</var> . <a href="#dom-childnode-after" title="dom-ChildNode-after">after</a>(<var title="">nodes</var>)</code>
 <dd>
  <p>Inserts <var title="">nodes</var> just after <var title="">node</var>,
  while replacing strings in <var title="">nodes</var> with equivalent
  <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a>.

  <p><a href="#concept-throw" title="concept-throw">Throws</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" if the constraints of the
  <a href="#concept-node-tree" title="concept-node-tree">node tree</a> are violated.

 <dt><code><var title="">node</var> . <a href="#dom-childnode-after" title="dom-ChildNode-after">replace</a>(<var title="">nodes</var>)</code>
 <dd>
  <p>Replaces <var title="">node</var> with <var title="">nodes</var>, while
  replacing strings in <var title="">nodes</var> with equivalent
  <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a>.

  <p><a href="#concept-throw" title="concept-throw">Throws</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" if the constraints of the
  <a href="#concept-node-tree" title="concept-node-tree">node tree</a> are violated.

 <dt><code><var title="">node</var> . <a href="#dom-childnode-remove" title="dom-ChildNode-remove">remove</a>()</code>
 <dd><p>Removes <var title="">node</var>.
</dl>

<p>The
<dfn id="dom-childnode-previouselementsibling" title="dom-ChildNode-previousElementSibling"><code>previousElementSibling</code></dfn>
attribute must return the first
<a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
<a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a> that is an
<a href="#concept-element" title="concept-element">element</a>, and null otherwise.

<p>The
<dfn id="dom-childnode-nextelementsibling" title="dom-ChildNode-nextElementSibling"><code>nextElementSibling</code></dfn>
attribute must return the first
<a href="#concept-tree-following" title="concept-tree-following">following</a>
<a href="#concept-tree-sibling" title="concept-tree-sibling">sibling</a> that is an
<a href="#concept-element" title="concept-element">element</a>, and null otherwise.

<p>The
<dfn id="dom-childnode-before" title="dom-ChildNode-before"><code>before(<var>nodes</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a> does not have a
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>, terminate these steps.

 <li>Run the <a href="#mutation-method-macro">mutation method macro</a>.

 <li><p><a href="#concept-node-pre-insert" title="concept-node-pre-insert">Pre-insert</a>
 <var title="">node</var> into the <a href="#context-object">context object</a>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> before the
 <a href="#context-object">context object</a>.
</ol>

<p>The
<dfn id="dom-childnode-after" title="dom-ChildNode-after"><code>after(<var>nodes</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a> does not have a
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>, terminate these steps.

 <li>Run the <a href="#mutation-method-macro">mutation method macro</a>.

 <li><p><a href="#concept-node-pre-insert" title="concept-node-pre-insert">Pre-insert</a>
 <var title="">node</var> into the <a href="#context-object">context object</a>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> before the
 <a href="#context-object">context object</a>'s
 <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
</ol>

<p>The
<dfn id="dom-childnode-replace" title="dom-ChildNode-replace"><code>replace(<var>nodes</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a> does not have a
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>, terminate these steps.

 <li>Run the <a href="#mutation-method-macro">mutation method macro</a>.

 <li><p><a href="#concept-node-replace" title="concept-node-replace">Replace</a> the
 <a href="#context-object">context object</a> with <var title="">node</var> within the
 <a href="#context-object">context object</a>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.
</ol>

<p>The
<dfn id="dom-childnode-remove" title="dom-ChildNode-remove"><code>remove()</code></dfn>
method must run these steps:

<ol>
 <li><p>If the <a href="#context-object">context object</a> does not have a
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>, terminate these steps.

 <li><p><a href="#concept-node-remove" title="concept-node-remove">Remove</a> the
 <a href="#context-object">context object</a> from the
 <a href="#context-object">context object</a>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.
</ol>


<h3 id="mutation-observers"><span class="secno">6.3 </span>Mutation observers</h3>

<p>Each <i title="">scripting environment</i> has an associated list of
<code><a href="#mutationobserver">MutationObserver</a></code> objects which is initially empty. To
<dfn id="concept-mo-invoke" title="concept-MO-invoke">invoke</dfn> <code><a href="#mutationobserver">MutationObserver</a></code>
objects, run these steps:

<ol>
 <li><p>Let <var title="">notify list</var> be a copy of
 <i title="">scripting environment</i>'s list of <code><a href="#mutationobserver">MutationObserver</a></code>
 objects.

 <li>
  <p>For each <code><a href="#mutationobserver">MutationObserver</a></code> object <var title="">mo</var>
  in <var title="">notify list</var>, run these substeps:

  <ol>
   <li><p>Let <var title="">queue</var> be a copy of <var title="">mo</var>'s
   <a href="#concept-mo-queue" title="concept-MO-queue">record queue</a>.

   <li><p>Empty <var title="">mo</var>'s
   <a href="#concept-mo-queue" title="concept-MO-queue">record queue</a>.

   <li><p>Remove all
   <a href="#transient-registered-observer" title="transient registered observer">transient registered observers</a>
   whose <b>observer</b> is <var title="">mo</var>.

   <li><p>If <var title="">queue</var> is non-empty, invoke
   <var title="">mo</var>'s <a href="#concept-mo-callback" title="concept-MO-callback">callback</a>
   with <var title="">queue</var> as first argument, and
   <var title="">mo</var> (itself) as second argument and
   <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-callback-this-value">callback this value</a>.
  </ol>

 <li><p><p>If any <code><a href="#mutationobserver">MutationObserver</a></code> object in
 <i title="">scripting environment</i>'s list of <code><a href="#mutationobserver">MutationObserver</a></code>
 objects has a non-empty <a href="#concept-mo-queue" title="concept-MO-queue">record queue</a> at
 this point, run these steps again (indeed, all of them).
</ol>

<p class="note">The DOM standard does not define the
<i title="">scripting environment</i> nor its scope. The HTML standard defines
how this concept integrates with the rest of the platform as well as when
<a href="#concept-mo-invoke" title="concept-MO-invoke">invoke</a> is invoked.
<a href="#refsHTML">[HTML]</a>
<!-- XXX could move this to DOM now? -->

<hr>

<p>Each <a href="#concept-node" title="concept-node">node</a> has an associated list of
<a href="#registered-observer" title="registered observer">registered observers</a>.
<!-- XXX also mention this in the <code>Node</code> section non-normatively? -->

<p>A <dfn id="registered-observer">registered observer</dfn> consists of an <b>observer</b> (a
<code><a href="#mutationobserver">MutationObserver</a></code> object) and <b>options</b> (a
<code><a href="#mutationobserverinit">MutationObserverInit</a></code> dictionary). A
<dfn id="transient-registered-observer">transient registered observer</dfn> is a specific type of
<a href="#registered-observer">registered observer</a>.


<h4 id="interface-mutationobserver"><span class="secno">6.3.1 </span>Interface <code><a href="#mutationobserver">MutationObserver</a></code></h4>

<pre class="idl">[<a href="#dom-mutationobserver" title="dom-MutationObserver">Constructor</a>(<a href="#mutationcallback">MutationCallback</a> <var>callback</var>)]
interface <dfn id="mutationobserver">MutationObserver</dfn> {
  void <a href="#dom-mutationobserver-observe" title="dom-MutationObserver-observe">observe</a>(<a href="#node">Node</a> <var>target</var>, <a href="#mutationobserverinit">MutationObserverInit</a> <var>options</var>);
  void <a href="#dom-mutationobserver-disconnect" title="dom-MutationObserver-disconnect">disconnect</a>();
  sequence&lt;<a href="#mutationrecord">MutationRecord</a>&gt; <a href="#dom-mutationobserver-takerecords" title="dom-MutationObserver-takeRecords">takeRecords</a>();
};

callback <dfn id="mutationcallback">MutationCallback</dfn> = void (sequence&lt;<a href="#mutationrecord">MutationRecord</a>&gt; <var>mutations</var>, <a href="#mutationobserver">MutationObserver</a> <var>observer</var>);

dictionary <dfn id="mutationobserverinit">MutationObserverInit</dfn> {
  boolean <span title="dom-MutationObserverInit-childList">childList</span> = false;
  boolean <span title="dom-MutationObserverInit-attributes">attributes</span> = false;
  boolean <span title="dom-MutationObserverInit-characterData">characterData</span> = false;
  boolean <span title="dom-MutationObserverInit-subtree">subtree</span> = false;
  boolean <span title="dom-MutationObserverInit-attributeOldValue">attributeOldValue</span> = false;
  boolean <span title="dom-MutationObserverInit-characterDataOldValue">characterDataOldValue</span> = false;
  sequence&lt;DOMString&gt; <span title="dom-MutationObserverInit-attributeFilter">attributeFilter</span>;
};</pre>

<p>A <code><a href="#mutationobserver">MutationObserver</a></code> object can be used to observe mutations
to the <a href="#concept-tree" title="concept-tree">tree</a> of
<a href="#concept-node" title="concept-node">nodes</a>.

<p>Each <code><a href="#mutationobserver">MutationObserver</a></code> object has these associated concepts:
<ul>
 <li><p>A <dfn id="concept-mo-callback" title="concept-MO-callback">callback</dfn> set on creation.
 <li><p>A list of <a href="#concept-node" title="concept-node">nodes</a> on which it is a <a href="#registered-observer">registered observer</a>'s <b>observer</b> that is initially empty.
 <li><p>A list of <code><a href="#mutationrecord">MutationRecord</a></code> objects called the
 <dfn id="concept-mo-queue" title="concept-MO-queue">record queue</dfn> that is initially empty.
</ul>

<dl class="domintro">
 <dt><code>var <var title="">observer</var> = new <a href="#dom-mutationobserver" title="dom-MutationObserver">MutationObserver</a>(<var title="">callback</var>)</code>
 <dd><p>Constructs a <code><a href="#mutationobserver">MutationObserver</a></code> object and sets its
 <a href="#concept-mo-callback" title="concept-MO-callback">callback</a> to
 <var title="">callback</var>. The <var title="">callback</var> is invoked with a
 list of <code><a href="#mutationrecord">MutationRecord</a></code> objects as first argument and the
 constructed <code><a href="#mutationobserver">MutationObserver</a></code> object as second argument. It is
 invoked after <a href="#concept-node" title="concept-node">nodes</a> registered with the
 <code title="dom-MutationObserver-observe"><a href="#dom-mutationobserver-observe">observe()</a></code> method, are
 mutated.

 <dt><code><var title="">observer</var> . <a href="#dom-mutationobserver-observe" title="dom-MutationObserver-observe">observe</a>(<var title="">target</var>, <var title="">options</var>)</code>
 <dd>
  <p>Instructs the user agent to observe a given <var title="">target</var>
  (a <a href="#concept-node" title="concept-node">node</a>) and report any mutations based on
  the criteria given by <var title="">options</var> (an object).

  <p>The <var title="">options</var> argument allows for setting mutation
  observation options via object members. These are the object members that
  can be used:

  <dl>
   <dt><code title="dom-MutationObserverInit-childList">childList</code>
   <dd><p>Set to true if mutations to <var title="">target</var>'s
   <a href="#concept-tree-child" title="concept-tree-child">children</a> are to be observed.

   <dt><code title="dom-MutationObserverInit-attributes">attributes</code>
   <dd><p>Set to true if mutations to <var title="">target</var>'s
   <a href="#concept-attribute" title="concept-attribute">attributes</a> are to be observed.

   <dt><code title="dom-MutationObserverInit-characterData">characterData</code>
   <dd><p>Set to true if mutations to <var title="">target</var>'s
   <a href="#concept-cd-data" title="concept-CD-data">data</a> are to be observed.

   <dt><code title="dom-MutationObserverInit-subtree">subtree</code>
   <dd><p>Set to true if mutations to not just <var title="">target</var>, but
   also <var title="">target</var>'s
   <a href="#concept-tree-descendant" title="concept-tree-descendant">descendants</a> are to be
   observed.

   <dt><code title="dom-MutationObserverInit-attributeOldValue">attributeOldValue</code>
   <dd><p>Set to true if
   <code title="dom-MutationObserverInit-attributes">attributes</code> is set
   to true and <var title="">target</var>'s
   <a href="#concept-attribute" title="concept-attribute">attribute</a>
   <a href="#concept-attribute-value" title="concept-attribute-value">value</a> before the mutation
   needs to be recorded.

   <dt><code title="dom-MutationObserverInit-characterDataOldValue">characterDataOldValue</code>
   <dd><p>Set to true if
   <code title="dom-MutationObserverInit-characterData">characterData</code>
   is set to true and <var title="">target</var>'s
   <a href="#concept-cd-data" title="concept-CD-data">data</a> before the mutation
   needs to be recorded.

   <dt><code title="dom-MutationObserverInit-attributeFilter">attributeFilter</code>
   <dd><p>Set to a list of <a href="#concept-attribute" title="concept-attribute">attribute</a>
   <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local names</a> (without
   <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a>) if not all
   <a href="#concept-attribute" title="concept-attribute">attribute</a> mutations need to be
   observed.
  </dl>

 <dt><code><var title="">observer</var> . <a href="#dom-mutationobserver-disconnect" title="dom-MutationObserver-disconnect">disconnect</a>()</code>
 <dd><p>Stops the <var title="">observer</var> from observing any mutations.
 Until the <code title="dom-MutationObserver-observe"><a href="#dom-mutationobserver-observe">observe()</a></code> method
 is used again, <var title="">observer</var>'s
 <a href="#concept-mo-callback" title="concept-MO-callback">callback</a> will not be invoked.

 <dt><code><var title="">observer</var> . <a href="#dom-mutationobserver-takerecords" title="dom-MutationObserver-takeRecords">takeRecords</a>()</code>
 <dd><p>Empties the <a href="#concept-mo-queue" title="concept-MO-queue">record queue</a> and
 returns what was in there.
</dl>

<p>The
<dfn id="dom-mutationobserver" title="dom-MutationObserver"><code>MutationObserver(<var>callback</var>)</code></dfn>
constructor must create a new <code><a href="#mutationobserver">MutationObserver</a></code> object with
<a href="#concept-mo-callback" title="concept-MO-callback">callback</a> set to <var>callback</var>,
append it to the <i title="">scripting environment</i>'s list of
<code><a href="#mutationobserver">MutationObserver</a></code> objects, and then return it.

<p>The
<dfn id="dom-mutationobserver-observe" title="dom-MutationObserver-observe"><code>observe(<var title="">target</var>, <var title="">options</var>)</code></dfn>
method must run these steps:

<ol>
 <li>
  <p>Run these substeps, with <var title="">options</var> as the <a href="#context-object">context object</a>:
  <ol>
   <li><p>If neither
   <code title="dom-MutationObserverInit-childList">childList</code>,
   <code title="dom-MutationObserverInit-attributes">attributes</code>, nor
   <code title="dom-MutationObserverInit-characterData">characterData</code>
   is true, <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>"
   and terminate these steps.

   <li><p>If <code title="dom-MutationObserverInit-attributeOldValue">attributeOldValue</code> is true and
   <code title="dom-MutationObserverInit-attributes">attributes</code> is not true,
   <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>" and terminate these steps.

   <li><p>If <code title="dom-MutationObserverInit-attributeFilter">attributeFilter</code>
   is a non-empty array and
   <code title="dom-MutationObserverInit-attributes">attributes</code> is not true,
   <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>" and terminate these steps.

   <li><p>If <code title="dom-MutationObserverInit-characterDataOldValue">characterDataOldValue</code>
   is true and <code title="dom-MutationObserverInit-characterData">characterData</code> is not true,
   <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>" and terminate these steps.
  </ol>

 <li><p>If <var title="">target</var>'s list of
 <a href="#registered-observer" title="registered observer">registered observers</a> already
 includes a <a href="#registered-observer">registered observer</a> associated with
 the <a href="#context-object">context object</a>, replace that
 <a href="#registered-observer">registered observer</a>'s <b>options</b> with <var title="">options</var>.

 <li><p>Otherwise, add a new <a href="#registered-observer">registered observer</a> to
 <var title="">target</var>'s list of
 <a href="#registered-observer" title="registered observer">registered observers</a> with the
 <a href="#context-object">context object</a> as the <b>observer</b> and <var title="">options</var> as the <b>options</b>,
 and add <var title="">target</var> to <a href="#context-object">context object</a>'s list of <a href="#concept-node" title="concept-node">nodes</a> on which it is registered.
</ol>

<p>The
<dfn id="dom-mutationobserver-disconnect" title="dom-MutationObserver-disconnect"><code>disconnect()</code></dfn>
method must, for each <a href="#concept-node" title="concept-node">node</a>
<var title="">node</var> in the <a href="#context-object">context object</a>'s list of
<a href="#concept-node" title="concept-node">nodes</a>, remove any
<a href="#registered-observer">registered observer</a> on <var title="">node</var>
for which the <a href="#context-object">context object</a> is the <b>observer</b>, and also
empty <a href="#context-object">context object</a>'s
<a href="#concept-mo-queue" title="concept-MO-queue">record queue</a>.

<p>The
<dfn id="dom-mutationobserver-takerecords" title="dom-MutationObserver-takeRecords"><code>takeRecords()</code></dfn>
method must return a copy of the
<a href="#concept-mo-queue" title="concept-MO-queue">record queue</a> and then empty the
<a href="#concept-mo-queue" title="concept-MO-queue">record queue</a>.


<h4 id="queuing-a-mutation-record"><span class="secno">6.3.2 </span>Queuing a mutation record</h4>

<p>To <dfn id="queue-a-mutation-record">queue a mutation record</dfn> of <var title="">type</var> for
<var title="">target</var> with one or more of (depends on
<var title="">type</var>) name <var title="">name</var>, namespace
<var title="">namespace</var>, oldValue <var title="">oldValue</var>, addedNodes
<var title="">addedNodes</var>, removedNodes <var title="">removedNodes</var>,
previousSibling <var title="">previousSibling</var>, and nextSibling
<var title="">nextSibling</var>, run these steps:

<ol>
 <li><p>Let <var title="">interested observers</var> be an initially empty set
 of <code><a href="#mutationobserver">MutationObserver</a></code> objects optionally paired with a string.

 <li><p>Let <var title="">nodes</var> be the
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestors</a> of
 <var title="">target</var>.

 <li>
  <p>Then, for each <var title="">node</var> in <var title="">nodes</var>, and
  then for each <var title="">registered observer</var> (with
  <var title="">registered observer</var>'s <b title="">options</b> as
  <var title="">options</var>) in <var title="">node</var>'s list of
  <a href="#registered-observer" title="registered observer">registered observers</a>:

  <ol>
   <li><p>If <var title="">node</var> is not <var title="">target</var> and
   <var title="">options</var>'s <code title="">subtree</code> is false, continue.

   <li><p>If <var title="">type</var> is "<code title="">attributes</code>" and
   <var title="">options</var>'s <code title="">attributes</code> is false,
   continue.

   <li><p>If <var title="">type</var> is "<code title="">attributes</code>",
   <var title="">options</var>'s <code title="">attributeFilter</code> is
   non-empty, and either <var title="">options</var>'s
   <code title="">attributeFilter</code> does not contain <var title="">name</var>
   or <var title="">namespace</var> is non-null, continue.

   <li><p>If <var title="">type</var> is "<code title="">characterData</code>" and
   <var title="">options</var>'s <code title="">characterData</code> is false,
   continue.

   <li><p>If <var title="">type</var> is "<code title="">childList</code>" and
   <var title="">options</var>'s <code title="">childList</code> is false,
   continue.

   <li><p>If <var title="">registered observer</var>'s <b title="">observer</b> is
   not in <var title="">interested observers</var>, append
   <var title="">registered observer</var>'s <b title="">observer</b> to
   <var title="">interested observers</var>.

   <li><p>If either <var title="">type</var> is "<code title="">attributes</code>"
   and <var title="">options</var>'s <code>attributeOldValue</code> is true, or
   <var title="">type</var> is "<code title="">characterData</code>" and
   <var title="">options</var>'s <code>characterDataOldValue</code> is true,
   set the paired string of
   <var title="">registered observer</var>'s <b title="">observer</b> in
   <var title="">interested observers</var> to <var title="">oldValue</var>.
  </ol>

 <li>
  <p>Then, for each <var title="">observer</var> in
  <var title="">interested observers</var>:

  <ol>
   <li><p>Let <var title="">record</var> be a new <code><a href="#mutationrecord">MutationRecord</a></code>
   object with its <code title="dom-MutationRecord-type"><a href="#dom-mutationrecord-type">type</a></code> set to
   <var title="">type</var> and
   <code title="dom-MutationRecord-target"><a href="#dom-mutationrecord-target">target</a></code> set to
   <var title="">target</var>.

   <li><p>If <var title="">name</var> and <var title="">namespace</var> are given,
   set <var title="">record</var>'s
   <code title="dom-MutationRecord-attributeName"><a href="#dom-mutationrecord-attributename">attributeName</a></code> to
   <var title="">name</var>, and <var title="">record</var>'s
   <code title="dom-MutationRecord-attributeNamespace"><a href="#dom-mutationrecord-attributenamespace">attributeNamespace</a></code>
   to <var title="">namespace</var>.

   <li><p>If <var title="">addedNodes</var>, <var title="">removedNodes</var>,
   <var title="">previousSibling</var>, and <var title="">nextSibling</var> are
   given, set <var title="">record</var>'s
   <code title="dom-MutationRecord-addedNodes"><a href="#dom-mutationrecord-addednodes">addedNodes</a></code> to
   <var title="">addedNodes</var>, <var title="">record</var>'s
   <code title="dom-MutationRecord-removedNodes"><a href="#dom-mutationrecord-removednodes">removedNodes</a></code> to
   <var title="">removedNodes</var>, <var title="">record</var>'s
   <code title="dom-MutationRecord-previousSibling"><a href="#dom-mutationrecord-previoussibling">previousSibling</a></code> to
   <var title="">previousSibling</var>, and <var title="">record</var>'s
   <code title="dom-MutationRecord-nextSibling"><a href="#dom-mutationrecord-nextsibling">nextSibling</a></code> to
   <var title="">nextSibling</var>.

   <li><p>If <var title="">observer</var> has a paired string,
   set <var title="">record</var>'s <code title="">oldValue</code> to
   <var title="">observer</var>'s paired string.

   <li><p>Append <var title="">record</var> to <var title="">observer</var>'s
   <a href="#concept-mo-queue" title="concept-MO-queue">record queue</a>.
  </ol>
</ol>


<h4 id="interface-mutationrecord"><span class="secno">6.3.3 </span>Interface <code><a href="#mutationrecord">MutationRecord</a></code></h4>

<pre class="idl">interface <dfn id="mutationrecord">MutationRecord</dfn> {
  readonly attribute DOMString <a href="#dom-mutationrecord-type" title="dom-MutationRecord-type">type</a>;
  readonly attribute <a href="#node">Node</a> <a href="#dom-mutationrecord-target" title="dom-MutationRecord-target">target</a>;
  readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-mutationrecord-addednodes" title="dom-MutationRecord-addedNodes">addedNodes</a>;
  readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-mutationrecord-removednodes" title="dom-MutationRecord-removedNodes">removedNodes</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-mutationrecord-previoussibling" title="dom-MutationRecord-previousSibling">previousSibling</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-mutationrecord-nextsibling" title="dom-MutationRecord-nextSibling">nextSibling</a>;
  readonly attribute DOMString? <a href="#dom-mutationrecord-attributename" title="dom-MutationRecord-attributeName">attributeName</a>;
  readonly attribute DOMString? <a href="#dom-mutationrecord-attributenamespace" title="dom-MutationRecord-attributeNamespace">attributeNamespace</a>;
  readonly attribute DOMString? <a href="#dom-mutationrecord-oldvalue" title="dom-MutationRecord-oldValue">oldValue</a>;
};</pre>

<dl class="domintro">
 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-type" title="dom-MutationRecord-type">type</a></code>
 <dd><p>Returns "<code title="">attributes</code>" if it was an
 <a href="#concept-attribute" title="concept-attribute">attribute</a> mutation.
 "<code title="">characterData</code>" if it was a mutation to a
 <code><a href="#characterdata">CharacterData</a></code> <a href="#concept-node" title="concept-node">node</a>. And
 "<code title="">childList</code>" if it was a mutation to the
 <a href="#concept-tree" title="concept-tree">tree</a> of
 <a href="#concept-node" title="concept-node">nodes</a>.

 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-target" title="dom-MutationRecord-target">target</a></code>
 <dd><p>Returns the <a href="#concept-node" title="concept-node">node</a> the mutation
 affected, depending on the <code title="dom-MutationRecord-type"><a href="#dom-mutationrecord-type">type</a></code>.
 For "<code title="">attributes</code>", it is the
 <a href="#concept-element" title="concept-element">element</a> whose
 <a href="#concept-attribute" title="concept-attribute">attribute</a> changed. For
 "<code title="">characterData</code>", it is the <code><a href="#characterdata">CharacterData</a></code>
 <a href="#concept-node" title="concept-node">node</a>. For "<code title="">childList</code>",
 it is the  <a href="#concept-node" title="concept-node">node</a> whose
 <a href="#concept-tree-child" title="concept-tree-child">children</a> changed.

 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-addednodes" title="dom-MutationRecord-addedNodes">addedNodes</a></code>
 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-removednodes" title="dom-MutationRecord-removedNodes">removedNodes</a></code>
 <dd><p>Return the <a href="#concept-node" title="concept-node">nodes</a> added and removed
 respectively.

 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-previoussibling" title="dom-MutationRecord-previousSibling">previousSibling</a></code>
 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-nextsibling" title="dom-MutationRecord-nextSibling">nextSibling</a></code>
 <dd><p>Return the <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous</a>
 and <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a> respectively
 of the added or removed <a href="#concept-node" title="concept-node">nodes</a>, and null
 otherwise.

 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-attributename" title="dom-MutationRecord-attributeName">attributeName</a></code>
 <dd><p>Returns the
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> of the
 changed <a href="#concept-attribute" title="concept-attribute">attribute</a>, and null otherwise.

 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-attributenamespace" title="dom-MutationRecord-attributeNamespace">attributeNamespace</a></code>
 <dd><p>Returns the <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> of the
 changed <a href="#concept-attribute" title="concept-attribute">attribute</a>, and null otherwise.

 <dt><code><var title="">record</var> . <a href="#dom-mutationrecord-oldvalue" title="dom-MutationRecord-oldValue">oldValue</a></code>
 <dd><p>The return value depends on
 <code title="dom-MutationRecord-type"><a href="#dom-mutationrecord-type">type</a></code>. For
 "<code title="">attributes</code>", it is the
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a> of the
 changed <a href="#concept-attribute" title="concept-attribute">attribute</a> before the change.
 For "<code title="">characterData</code>", it is the
 <a href="#concept-cd-data" title="concept-CD-data">data</a> of the changed
 <a href="#concept-node" title="concept-node">node</a> before the change. For
 "<code title="">childList</code>", it is null.
</dl>

<p>The <dfn id="dom-mutationrecord-type" title="dom-MutationRecord-type"><code>type</code></dfn> and
<dfn id="dom-mutationrecord-target" title="dom-MutationRecord-target"><code>target</code></dfn>
attributes must return the values they were initialized to.

<p>The
<dfn id="dom-mutationrecord-addednodes" title="dom-MutationRecord-addedNodes"><code>addedNodes</code></dfn> and
<dfn id="dom-mutationrecord-removednodes" title="dom-MutationRecord-removedNodes"><code>removedNodes</code></dfn>
attributes must return the values they were initialized to. Unless stated
otherwise, when a <code><a href="#mutationrecord">MutationRecord</a></code> object is created, they must
both be initialized to an empty <code><a href="#nodelist">NodeList</a></code>.

<p>The
<dfn id="dom-mutationrecord-previoussibling" title="dom-MutationRecord-previousSibling"><code>previousSibling</code></dfn>,
<dfn id="dom-mutationrecord-nextsibling" title="dom-MutationRecord-nextSibling"><code>nextSibling</code></dfn>,
<dfn id="dom-mutationrecord-attributename" title="dom-MutationRecord-attributeName"><code>attributeName</code></dfn>,
<dfn id="dom-mutationrecord-attributenamespace" title="dom-MutationRecord-attributeNamespace"><code>attributeNamespace</code></dfn>, and
<dfn id="dom-mutationrecord-oldvalue" title="dom-MutationRecord-oldValue"><code>oldValue</code></dfn>
attributes must return the values they were initialized to. Unless stated
otherwise, when a <code><a href="#mutationrecord">MutationRecord</a></code> object is created, they must
be initialized to null.

<h4 id="garbage-collection"><span class="secno">6.3.4 </span>Garbage collection</h4>

<p><a href="#concept-node" title="concept-node">Nodes</a> have a strong reference to
<a href="#registered-observer" title="registered observer">registered observers</a> in their
list of <a href="#registered-observer" title="registered observer">registered observers</a>.

<p><a href="#registered-observer" title="registered observer">Registered observers</a> in a
<a href="#concept-node" title="concept-node">node</a>'s list of
<a href="#registered-observer" title="registered observer">registered observers</a> have a weak
reference to the <a href="#concept-node" title="concept-node">node</a>.


<h3 id="interface-node"><span class="secno">6.4 </span>Interface <code><a href="#node">Node</a></code></h3>
<pre class="idl">interface <dfn id="node">Node</dfn> : <a href="#eventtarget">EventTarget</a> {
  const unsigned short <a href="#dom-node-element_node" title="dom-Node-ELEMENT_NODE">ELEMENT_NODE</a> = 1;
  const unsigned short <span title="dom-Node-ATTRIBUTE_NODE">ATTRIBUTE_NODE</span> = 2; // historical
  const unsigned short <a href="#dom-node-text_node" title="dom-Node-TEXT_NODE">TEXT_NODE</a> = 3;
  const unsigned short <span title="dom-Node-CDATA_SECTION_NODE">CDATA_SECTION_NODE</span> = 4; // historical
  const unsigned short <span title="dom-Node-ENTITY_REFERENCE_NODE">ENTITY_REFERENCE_NODE</span> = 5; // historical
  const unsigned short <span title="dom-Node-ENTITY_NODE">ENTITY_NODE</span> = 6; // historical
  const unsigned short <a href="#dom-node-processing_instruction_node" title="dom-Node-PROCESSING_INSTRUCTION_NODE">PROCESSING_INSTRUCTION_NODE</a> = 7;
  const unsigned short <a href="#dom-node-comment_node" title="dom-Node-COMMENT_NODE">COMMENT_NODE</a> = 8;
  const unsigned short <a href="#dom-node-document_node" title="dom-Node-DOCUMENT_NODE">DOCUMENT_NODE</a> = 9;
  const unsigned short <a href="#dom-node-document_type_node" title="dom-Node-DOCUMENT_TYPE_NODE">DOCUMENT_TYPE_NODE</a> = 10;
  const unsigned short <a href="#dom-node-document_fragment_node" title="dom-Node-DOCUMENT_FRAGMENT_NODE">DOCUMENT_FRAGMENT_NODE</a> = 11;
  const unsigned short <span title="dom-Node-NOTATION_NODE">NOTATION_NODE</span> = 12; // historical
  readonly attribute unsigned short <a href="#dom-node-nodetype" title="dom-Node-nodeType">nodeType</a>;<!-- NodeExodus

  readonly attribute DOMString <span title=dom-Node-namespaceURI>namespaceURI</span>;
  readonly attribute DOMString <span title=dom-Node-prefix>prefix</span>;
  readonly attribute DOMString <span title=dom-Node-localName>localName</span>;-->
  readonly attribute DOMString <a href="#dom-node-nodename" title="dom-Node-nodeName">nodeName</a>;

  readonly attribute DOMString? <a href="#dom-node-baseuri" title="dom-Node-baseURI">baseURI</a>;

  <!--AttrExodus
  boolean <span title=dom-Node-hasAttributes>hasAttributes</span>();
  readonly attribute <span>NamedNodeMap</span> <span title=dom-Node-attributes>attributes</span>;

  -->readonly attribute <a href="#document">Document</a>? <a href="#dom-node-ownerdocument" title="dom-Node-ownerDocument">ownerDocument</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-node-parentnode" title="dom-Node-parentNode">parentNode</a>;
  readonly attribute <a href="#element">Element</a>? <a href="#dom-node-parentelement" title="dom-Node-parentElement">parentElement</a>;
  boolean <a href="#dom-node-haschildnodes" title="dom-Node-hasChildNodes">hasChildNodes</a>();
  readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-node-childnodes" title="dom-Node-childNodes">childNodes</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-node-firstchild" title="dom-Node-firstChild">firstChild</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-node-lastchild" title="dom-Node-lastChild">lastChild</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-node-previoussibling" title="dom-Node-previousSibling">previousSibling</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-node-nextsibling" title="dom-Node-nextSibling">nextSibling</a>;

           attribute DOMString? <a href="#dom-node-nodevalue" title="dom-Node-nodeValue">nodeValue</a>;
           attribute DOMString? <a href="#dom-node-textcontent" title="dom-Node-textContent">textContent</a>;
  void <a href="#dom-node-normalize" title="dom-Node-normalize">normalize</a>();

  <!-- IE10 Developer Preview and Chrome 18 dev default the parameter to false.
  Firefox 13.0a1 and Opera Next 12.00 alpha make it required.  But for
  importNode() we default to true, and true seems more useful, so for now we
  require true.
  --><a href="#node">Node</a> <a href="#dom-node-clonenode" title="dom-Node-cloneNode">cloneNode</a>(optional boolean <var title="">deep</var> = true);
  boolean <a href="#dom-node-isequalnode" title="dom-Node-isEqualNode">isEqualNode</a>(<a href="#node">Node</a>? <var title="">node</var>);

  const unsigned short <a href="#dom-node-document_position_disconnected" title="dom-Node-DOCUMENT_POSITION_DISCONNECTED">DOCUMENT_POSITION_DISCONNECTED</a> = 0x01;
  const unsigned short <a href="#dom-node-document_position_preceding" title="dom-Node-DOCUMENT_POSITION_PRECEDING">DOCUMENT_POSITION_PRECEDING</a> = 0x02;
  const unsigned short <a href="#dom-node-document_position_following" title="dom-Node-DOCUMENT_POSITION_FOLLOWING">DOCUMENT_POSITION_FOLLOWING</a> = 0x04;
  const unsigned short <a href="#dom-node-document_position_contains" title="dom-Node-DOCUMENT_POSITION_CONTAINS">DOCUMENT_POSITION_CONTAINS</a> = 0x08;
  const unsigned short <a href="#dom-node-document_position_contained_by" title="dom-Node-DOCUMENT_POSITION_CONTAINED_BY">DOCUMENT_POSITION_CONTAINED_BY</a> = 0x10;
  const unsigned short <a href="#dom-node-document_position_implementation_specific" title="dom-Node-DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC">DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</a> = 0x20;
  unsigned short <a href="#dom-node-comparedocumentposition" title="dom-Node-compareDocumentPosition">compareDocumentPosition</a>(<a href="#node">Node</a> <var title="">other</var>);
  boolean <a href="#dom-node-contains" title="dom-Node-contains">contains</a>(<a href="#node">Node</a>? <var title="">other</var>);

  DOMString? <a href="#dom-node-lookupprefix" title="dom-Node-lookupPrefix">lookupPrefix</a>(DOMString? <var title="">namespace</var>);
  DOMString? <a href="#dom-node-lookupnamespaceuri" title="dom-Node-lookupNamespaceURI">lookupNamespaceURI</a>(DOMString? <var title="">prefix</var>);
  boolean <a href="#dom-node-isdefaultnamespace" title="dom-Node-isDefaultNamespace">isDefaultNamespace</a>(DOMString? <var title="">namespace</var>);

  <a href="#node">Node</a> <a href="#dom-node-insertbefore" title="dom-Node-insertBefore">insertBefore</a>(<a href="#node">Node</a> <var title="">node</var>, <a href="#node">Node</a>? <var title="">child</var>);
  <a href="#node">Node</a> <a href="#dom-node-appendchild" title="dom-Node-appendChild">appendChild</a>(<a href="#node">Node</a> <var title="">node</var>);
  <a href="#node">Node</a> <a href="#dom-node-replacechild" title="dom-Node-replaceChild">replaceChild</a>(<a href="#node">Node</a> <var title="">node</var>, <a href="#node">Node</a> <var title="">child</var>);
  <a href="#node">Node</a> <a href="#dom-node-removechild" title="dom-Node-removeChild">removeChild</a>(<a href="#node">Node</a> <var title="">child</var>);
};</pre>

<p class="note"><code><a href="#node">Node</a></code> is an abstract interface and does not exist
as <a href="#concept-node" title="concept-node">node</a>. It is used by all
<a href="#concept-node" title="concept-node">nodes</a> (<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>,
and <code><a href="#comment">Comment</a></code>).

<p>Each <a href="#concept-node" title="concept-node">node</a> has an associated
<dfn id="concept-node-document" title="concept-node-document">node document</dfn>, set upon creation,
that is a <a href="#concept-document" title="concept-document">document</a>.

<p class="note">A <a href="#concept-node" title="concept-node">node</a>'s
<a href="#concept-node-document" title="concept-node-document">node document</a> can be changed by
the <a href="#concept-node-adopt" title="concept-node-adopt">adopt</a> algorithm.

<p>Each <a href="#concept-node" title="concept-node">node</a> also has an associated
<dfn id="concept-node-base-url" title="concept-node-base-url">base URL</dfn>.

<p class="note">Other specifications define the value of the
<a href="#concept-node-base-url" title="concept-node-base-url">base URL</a> and its observable
behavior. This specification solely defines the concept and the
<code title="dom-Node-baseURI"><a href="#dom-node-baseuri">baseURI</a></code> attribute.

<hr>

<dl class="domintro">
 <dt><code><var title="">node</var> . <a href="#dom-node-nodetype" title="dom-Node-nodeType">nodeType</a></code>
 <dd>
  <p>Returns the type of <var title="">node</var>, represented by a number from the following list:</p>

  <dl>
   <dt><code><a href="#node">Node</a> . <a href="#dom-node-element_node" title="dom-Node-ELEMENT_NODE">ELEMENT_NODE</a></code> (1)
   <dd><var title="">node</var> is an
   <a href="#concept-element" title="concept-element">element</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-text_node" title="dom-Node-TEXT_NODE">TEXT_NODE</a></code> (3)
   <dd><var title="">node</var> is a <code><a href="#text">Text</a></code>
   <a href="#concept-node" title="concept-node">node</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-processing_instruction_node" title="dom-Node-PROCESSING_INSTRUCTION_NODE">PROCESSING_INSTRUCTION_NODE</a></code> (7)
   <dd><var title="">node</var> is a <code><a href="#processinginstruction">ProcessingInstruction</a></code>
   <a href="#concept-node" title="concept-node">node</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-comment_node" title="dom-Node-COMMENT_NODE">COMMENT_NODE</a></code> (8)
   <dd><var title="">node</var> is a <code><a href="#comment">Comment</a></code>
   <a href="#concept-node" title="concept-node">node</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_node" title="dom-Node-DOCUMENT_NODE">DOCUMENT_NODE</a></code> (9)
   <dd><var title="">node</var> is a
   <a href="#concept-document" title="concept-document">document</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_type_node" title="dom-Node-DOCUMENT_TYPE_NODE">DOCUMENT_TYPE_NODE</a></code> (10)
   <dd><var title="">node</var> is a
   <a href="#concept-doctype" title="concept-doctype">doctype</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_fragment_node" title="dom-Node-DOCUMENT_FRAGMENT_NODE">DOCUMENT_FRAGMENT_NODE</a></code> (11)
   <dd><var title="">node</var> is a <code><a href="#documentfragment">DocumentFragment</a></code>
   <a href="#concept-node" title="concept-node">node</a>.
  </dl>

 <dt><code><var title="">node</var> . <a href="#dom-node-nodename" title="dom-Node-nodeName">nodeName</a></code>
 <dd>
  <p>Returns a string appropriate for the type of <var title="">node</var>, as
  follows:

  <dl>
   <dt><code><a href="#element">Element</a></code>
   <dd>Its <code title="dom-Element-tagName"><a href="#dom-element-tagname">tagName</a></code> attribute value.

   <dt><code><a href="#text">Text</a></code>
   <dd>"<code title="">#text</code>".

   <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
   <dd>Its <a href="#concept-pi-target" title="concept-PI-target">target</a>.

   <dt><code><a href="#comment">Comment</a></code>
   <dd>"<code title="">#comment</code>".

   <dt><code><a href="#document">Document</a></code>
   <dd>"<code title="">#document</code>".

   <dt><code><a href="#documenttype">DocumentType</a></code>
   <dd>Its <a href="#concept-doctype-name" title="concept-doctype-name">name</a>.

   <dt><code><a href="#documentfragment">DocumentFragment</a></code>
   <dd>"<code title="">#document-fragment</code>".
  </dl>
</dl>

<p>The <dfn id="dom-node-nodetype" title="dom-Node-nodeType"><code>nodeType</code></dfn> attribute
must return the type of the node, which must be one of the following:

<ul>
 <li><dfn id="dom-node-element_node" title="dom-Node-ELEMENT_NODE"><code>ELEMENT_NODE</code></dfn> (1);

 <!--AttrExodus
 <li><dfn title=dom-Node-ATTRIBUTE_NODE><code>ATTRIBUTE_NODE</code></dfn> (2, historical);
 -->

 <li><dfn id="dom-node-text_node" title="dom-Node-TEXT_NODE"><code>TEXT_NODE</code></dfn> (3);

 <!-- XXX still questionable
 <li><dfn title=dom-Node-CDATA_SECTION_NODE><code>CDATA_SECTION_NODE</code></dfn> (4, historical);
 -->

 <li><dfn id="dom-node-processing_instruction_node" title="dom-Node-PROCESSING_INSTRUCTION_NODE"><code>PROCESSING_INSTRUCTION_NODE</code></dfn> (7);

 <li><dfn id="dom-node-comment_node" title="dom-Node-COMMENT_NODE"><code>COMMENT_NODE</code></dfn> (8);

 <li><dfn id="dom-node-document_node" title="dom-Node-DOCUMENT_NODE"><code>DOCUMENT_NODE</code></dfn> (9);

 <li><dfn id="dom-node-document_type_node" title="dom-Node-DOCUMENT_TYPE_NODE"><code>DOCUMENT_TYPE_NODE</code></dfn> (10);

 <li><dfn id="dom-node-document_fragment_node" title="dom-Node-DOCUMENT_FRAGMENT_NODE"><code>DOCUMENT_FRAGMENT_NODE</code></dfn> (11).
</ul>


<!-- NodeExodus
<hr>

<p>The <dfn title=dom-Node-namespaceURI><code>namespaceURI</code></dfn> attribute must return the namespace that is associated with the node, if there is one and it's not the empty string, and null otherwise.

<p>The <dfn title=dom-Node-prefix><code>prefix</code></dfn> attribute must return the prefix that is associated with the node, if there is one and it's not the empty string, and null otherwise.
<!- - support setting? - - On setting, it must run these steps:

<ol>
 <li><p>Let <var title>prefix</var> be the value being assigned.
 <li>
  <p>If <var title>prefix</var> is not null, run these substeps:
  <ol>
   <li><p>If <var title>prefix</var> does not match the
   <code data-anolis-spec=xml>Name</code> production in XML,
   <span title=concept-throw>throw</span> an
   "<code>InvalidCharacterError</code>" exception and terminate these
   steps.
   <li><p>If <var title>prefix</var> does not match the <code
   data-anolis-spec=xmlns>NCName</code> production in Namespaces in XML, <span title=concept-throw>throw</span> a
   "<code>NamespaceError</code>" exception and
   terminate these steps.
  </ol>
 <li><p>Actually this does not match any browser. Let's try to drop it instead.
</ol>- ->

<p>The <dfn title=dom-Node-localName><code>localName</code></dfn> attribute
must return the local name that is associated with the node, if it has one,
and null otherwise.-->

<p>The <dfn id="dom-node-nodename" title="dom-Node-nodeName"><code>nodeName</code></dfn> attribute
must return the following, depending on the <a href="#context-object">context object</a>:

<dl class="switch">
 <dt><code><a href="#element">Element</a></code>
 <dd><p>Its <code title="dom-Element-tagName"><a href="#dom-element-tagname">tagName</a></code> attribute value.

 <!--AttrExodus
 <dt><code>Attr</code>
 <dd><p>The <span>context object</span>'s
 <code title=dom-Attr-name>name</code> attribute.
 -->

 <dt><code><a href="#text">Text</a></code>
 <dd><p>"<code title="">#text</code>".

 <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
 <dd><p>Its <a href="#concept-pi-target" title="concept-PI-target">target</a>.

 <dt><code><a href="#comment">Comment</a></code>
 <dd><p>"<code title="">#comment</code>".

 <dt><code><a href="#document">Document</a></code>
 <dd><p>"<code title="">#document</code>".

 <dt><code><a href="#documenttype">DocumentType</a></code>
 <dd><p>Its <a href="#concept-doctype-name" title="concept-doctype-name">name</a>.

 <dt><code><a href="#documentfragment">DocumentFragment</a></code>
 <dd><p>"<code title="">#document-fragment</code>".
</dl>

<hr>

<dl class="domintro">
 <dt><code><var title="">node</var> . <a href="#dom-node-baseuri" title="dom-Node-baseURI">baseURI</a></code>
 <dd><p>Returns the <a href="#concept-node-base-url" title="concept-node-base-url">base URL</a>.
</dl>

<p>The <dfn id="dom-node-baseuri" title="dom-Node-baseURI"><code>baseURI</code></dfn> attribute must return the associated <a href="#concept-node-base-url" title="concept-node-base-url">base URL</a>.

<!--AttrExodus
<hr>

<p>The <dfn title=dom-Node-hasAttributes><code>hasAttributes()</code></dfn>
method must return true if there are any attributes associated with the
<span>context object</span>, if it is an <code>Element</code> node, and false
otherwise.

<p>The <dfn title=dom-Node-attributes><code>attributes</code></dfn> attribute must return a <code>NamedNodeMap</code> of all the <code>Attr</code> nodes associated with the node of the <span>context object</span>, if it is an <code>Element</code> node, and null otherwise.
-->

<hr>

<dl class="domintro">
 <dt><code><var title="">node</var> . <a href="#dom-node-ownerdocument" title="dom-Node-ownerDocument">ownerDocument</a></code>
 <dd>
  <p>Returns the <a href="#concept-node-document" title="concept-node-document">node document</a>.
  <p>Returns null for <a href="#concept-document" title="concept-document">documents</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-parentnode" title="dom-Node-parentNode">parentNode</a></code>
 <dd><p>Returns the <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-parentelement" title="dom-Node-parentElement">parentElement</a></code>
 <dd><p>Returns the <a href="#parent-element">parent element</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-haschildnodes" title="dom-Node-hasChildNodes">hasChildNodes()</a></code>
 <dd><p>Returns whether <var title="">node</var> has
 <a href="#concept-tree-child" title="concept-tree-child">children</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-childnodes" title="dom-Node-childNodes">childNodes</a></code>
 <dd><p>Returns the <a href="#concept-tree-child" title="concept-tree-child">children</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-firstchild" title="dom-Node-firstChild">firstChild</a></code>
 <dd><p>Returns the <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-lastchild" title="dom-Node-lastChild">lastChild</a></code>
 <dd><p>Returns the <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-previoussibling" title="dom-Node-previousSibling">previousSibling</a></code>
 <dd><p>Returns the
 <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-nextsibling" title="dom-Node-nextSibling">nextSibling</a></code>
 <dd><p>Returns the
 <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
</dl>

<div class="impl">

<p>The <dfn id="dom-node-ownerdocument" title="dom-Node-ownerDocument"><code>ownerDocument</code></dfn>
attribute must run these steps:
<ol>
 <li>If the <a href="#context-object">context object</a> is a
 <a href="#concept-document" title="concept-document">document</a>, return null and terminate these
 steps.

 <li>Return the <a href="#concept-node-document" title="concept-node-document">node document</a>.
</ol>

<div class="note">
<p>The <a href="#concept-node-document" title="concept-node-document">node document</a> of a
<a href="#concept-document" title="concept-document">document</a> is that
<a href="#concept-document" title="concept-document">document</a> itself.
<p>All <a href="#concept-node" title="concept-node">nodes</a> have a
<a href="#concept-document" title="concept-document">document</a> at all times.
</div>

<p>The <dfn id="dom-node-parentnode" title="dom-Node-parentNode"><code>parentNode</code></dfn>
attribute must return the <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.
<!-- AttrExodus
<li><p>If the <span>context object</span> is an <code>Attr</code> node,
return null and terminate these steps.
-->

<p>The <dfn id="dom-node-parentelement" title="dom-Node-parentElement"><code>parentElement</code></dfn>
attribute must return the <a href="#parent-element">parent element</a>.

<p>The <dfn id="dom-node-haschildnodes" title="dom-Node-hasChildNodes"><code>hasChildNodes()</code></dfn>
method must return true if the <a href="#context-object">context object</a> has
<a href="#concept-tree-child" title="concept-tree-child">children</a>, and false otherwise.

<p>The <dfn id="dom-node-childnodes" title="dom-Node-childNodes"><code>childNodes</code></dfn>
attribute must return a <code><a href="#nodelist">NodeList</a></code> rooted at the
<a href="#context-object">context object</a> matching only
<a href="#concept-tree-child" title="concept-tree-child">children</a>. The same object must be returned each
time.

<p>The <dfn id="dom-node-firstchild" title="dom-Node-firstChild"><code>firstChild</code></dfn>
attribute must return the
<a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a>.

<p>The <dfn id="dom-node-lastchild" title="dom-Node-lastChild"><code>lastChild</code></dfn> attribute must return the <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a>.

<p>The
<dfn id="dom-node-previoussibling" title="dom-Node-previousSibling"><code>previousSibling</code></dfn>
attribute must return the
<a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a>.
<!-- AttrExodus
 <li><p>If the <span>context object</span> is an <code>Attr</code> node,
 return null and terminate these steps.
-->

<p>The <dfn id="dom-node-nextsibling" title="dom-Node-nextSibling"><code>nextSibling</code></dfn>
attribute must return the
<a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
<!-- AttrExodus
 <li><p>If the <span>context object</span> is an <code>Attr</code> node,
 return null and terminate these steps.
-->

</div>

<hr>

<!-- TODO: domintro -->

<p>The <dfn id="dom-node-nodevalue" title="dom-Node-nodeValue"><code>nodeValue</code></dfn> attribute
must return the following, depending on the <a href="#context-object">context object</a>:

<dl class="switch">
 <!--AttrExodus <dt><code>Attr</code> -->
 <dt><code><a href="#text">Text</a></code>
 <dt><code><a href="#comment">Comment</a></code>
 <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
 <dd><p>The <a href="#context-object">context object</a>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a>.

 <dt>Any other node
 <dd><p>Null.
</dl>

<p>Setting the <code title="dom-Node-nodeValue"><a href="#dom-node-nodevalue">nodeValue</a></code> attribute
must do as described below, depending on the <a href="#context-object">context object</a>:

<dl class="switch">
 <!--AttrExodus <dt><code>Attr</code> -->
 <dt><code><a href="#text">Text</a></code>
 <dt><code><a href="#comment">Comment</a></code>
 <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
 <dd><p><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
 <a href="#context-object">context object</a>, offset 0, count
 <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value, and
 data new value.

 <dt>Any other node
 <dd><p>Do nothing.
</dl>

<p>The <dfn id="dom-node-textcontent" title="dom-Node-textContent"><code>textContent</code></dfn>
attribute must return the following, depending on the
<a href="#context-object">context object</a>:

<dl class="switch">
 <dt><code><a href="#documentfragment">DocumentFragment</a></code>
 <dt><code><a href="#element">Element</a></code>
 <!--AttrExodus <dt><code>Attr</code> -->
 <dd><p>The concatenation of <a href="#concept-cd-data" title="concept-CD-data">data</a> of all
 the <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>
 <a href="#concept-tree-descendant" title="concept-tree-descendant">descendants</a> of the
 <a href="#context-object">context object</a>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.

 <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>The <a href="#context-object">context object</a>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a>.

 <dt>Any other node
 <dd><p>Null.
</dl>

<p>The <code title="dom-Node-textContent"><a href="#dom-node-textcontent">textContent</a></code> attribute must,
on setting, if the new value is null, act as if it was the empty string
instead, and then do as described below, depending on the <a href="#context-object">context object</a>:

<dl class="switch">
 <dt><code><a href="#documentfragment">DocumentFragment</a></code>
 <dt><code><a href="#element">Element</a></code>
 <!--AttrExodus <dt><code>Attr</code> -->
 <dd>
  <ol>
   <li><p>Let <var title="">node</var> be null.

   <li><p>If new value is not the empty string, set <var title="">node</var> to
   a new <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a> whose
   <a href="#concept-cd-data" title="concept-CD-data">data</a> is new value.

   <li><p><a href="#concept-node-replace-all" title="concept-node-replace-all">Replace all</a> with
   <var title="">node</var> within the <a href="#context-object">context object</a>.
  </ol>

 <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><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
 <a href="#context-object">context object</a>, offset 0, count
 <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value, and
 data new value.

 <dt>Any other node
 <dd><p>Do nothing.
</dl>

<hr>

<dl class="domintro">
 <dt><code><var title="">node</var> . <a href="#dom-node-normalize" title="dom-Node-normalize">normalize</a>()</code>
 <dd><p>Removes <a href="#concept-node-empty" title="concept-node-empty">empty</a>
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">nodes</a> and concatenates
 the <a href="#concept-cd-data" title="concept-CD-data">data</a> of remaining
 <a href="#contiguous-text-nodes">contiguous <code>Text</code> nodes</a> into the first of their
 <a href="#concept-node" title="concept-node">nodes</a>.
</dl>

<p>The <dfn id="dom-node-normalize" title="dom-Node-normalize"><code>normalize()</code></dfn> method
must run these steps:</p>

<p>For each <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>
<a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of the
<a href="#context-object">context object</a>:

<ol>
 <li><p>Let <var title="">node</var> be the <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a>
 <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>.

 <li><p>Let <var title="">length</var> be <var title="">node</var>'s
 <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value.

 <li><p>If <var title="">length</var> is zero,
 <a href="#concept-node-remove" title="concept-node-remove">remove</a> <var title="">node</var> and
 continue with the next <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a>, if any.

 <li><p>Let <var title="">data</var> be the concatenation of the
 <a href="#concept-cd-data" title="concept-CD-data">data</a> of <var title="">node</var>'s
 <a href="#contiguous-text-nodes">contiguous <code>Text</code> nodes</a> (excluding itself), in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.

 <li><p><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
 <var title="">node</var>, offset <var title="">length</var>,
 count 0, and data <var title="">data</var>.

 <li><p>Let <var title="">current node</var> be <var title="">node</var>'s
 <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.

 <li><p>While <var title="">current node</var> is a <code><a href="#text">Text</a></code> node:

 <ol>
  <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="">current node</var>, add <var title="">length</var> to its
  <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> and set its
  <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> to
  <var title="">node</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="">current node</var>, add <var title="">length</var> to its
  <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> and set its
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> to
  <var title="">node</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="">current node</var>'s
  <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> and
  <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is
  <var title="">current node</var>'s
  <a href="#concept-tree-index" title="concept-tree-index">index</a>, set its
  <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> to
  <var title="">node</var> and its
  <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> to
  <var title="">length</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="">current node</var>'s
  <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> and
  <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> is
  <var title="">current node</var>'s
  <a href="#concept-tree-index" title="concept-tree-index">index</a>, set its
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> to
  <var title="">node</var> and its
  <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> to
  <var title="">length</var>.

  <li><p>Add <var title="">current node</var>'s
  <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value to
  <var title="">length</var>.

  <li><p>Set <var title="">current node</var> to its
  <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
 </ol>

 <li><p><a href="#concept-node-remove" title="concept-node-remove">Remove</a>
 <var title="">node</var>'s
 <a href="#contiguous-text-nodes">contiguous <code>Text</code> nodes</a> (excluding itself), in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.
</ol>

<hr>

<dl class="domintro">
 <dt><code><var title="">node</var> . <a href="#dom-node-clonenode" title="dom-Node-cloneNode">cloneNode</a>([<var title="">deep</var>])</code>
 <dd><p>Returns a copy of <var title="">node</var>. If
 <var title="">deep</var> is true or omitted, the copy also includes the
 <var title="">node</var> <a href="#concept-tree-child" title="concept-tree-child">children</a>.

 <dt><code><var title="">node</var> . <a href="#dom-node-isequalnode" title="dom-Node-isEqualNode">isEqualNode</a>(<var title="">other</var>)</code>
 <dd><p>Returns whether <var title="">node</var> and <var title="">other</var>
 have the same properties.
</dl>

<div class="impl">

<p>Specifications may define
<dfn id="concept-node-clone-ext" title="concept-node-clone-ext">cloning steps</dfn> for all or some
<a href="#concept-node" title="concept-node">nodes</a>.

<p class="note">HTML defines
<a href="#concept-node-clone-ext" title="concept-node-clone-ext">cloning steps</a> for
<code class="external" data-anolis-spec="html"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element">script</a></code> and
<code class="external" data-anolis-spec="html"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element">input</a></code> elements. SVG ought to do the same
for its <code title="">script</code> elements, but does not call this out at
the moment.

<p>To <dfn id="concept-node-clone" title="concept-node-clone">clone</dfn> a <var title="">node</var>,
optionally with a <i title="">document</i> <var title="">ownerDocument</var> and a
<i title="">clone children flag</i>, run these steps:
<!-- This algorithm is used by dom-Node-cloneNode, dom-Document-importNode,
dom-Range-extractContents, dom-Range-cloneContents -->

<ol>
 <li><p>If <i title="">document</i> is not given let
 <var title="">ownerDocument</var> be <var title="">node</var>'s
 <a href="#concept-node-document" title="concept-node-document">node document</a>.
 <li><p>Let <var title="">copy</var> be a <a href="#concept-node" title="concept-node">node</a>
 that implements the same interfaces as <var title="">node</var>.
 <li>
  <p>If <var title="">copy</var> is a
  <a href="#concept-document" title="concept-document">document</a> set its
  <a href="#concept-node-document" title="concept-node-document">node document</a> and
  <var title="">ownerDocument</var> to <var title="">copy</var>.
  <p>Otherwise, set <var title="">copy</var>'s
  <a href="#concept-node-document" title="concept-node-document">node document</a> to
  <var title="">ownerDocument</var>.
 <li>
  <p>Copy the following, depending on the type of <var title="">node</var>:
  <dl class="switch">
   <dt><code><a href="#element">Element</a></code>
   <dd><p>Its <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a>,
   <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>,
   <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>, and its
   <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.

   <!--AttrExodus
   <dt><code>Attr</code>
   <dd><p><code title=dom-Attr-value>value</code>
   -->

   <dt><code><a href="#documenttype">DocumentType</a></code>
   <dd><p>Its <a href="#concept-doctype-name" title="concept-doctype-name">name</a>,
   <a href="#concept-doctype-publicid" title="concept-doctype-publicid">public ID</a>, and
   <a href="#concept-doctype-systemid" title="concept-doctype-systemid">system ID</a>.

   <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
   <dd><p>Its <a href="#concept-pi-target" title="concept-PI-target">target</a> and
   <a href="#concept-cd-data" title="concept-CD-data">data</a>.

   <dt><code><a href="#text">Text</a></code>
   <dt><code><a href="#comment">Comment</a></code>
   <dd><p>Its <a href="#concept-cd-data" title="concept-CD-data">data</a>.

   <dt>Any other node
   <dd><p>—
  </dl>

 <li><p>Run any <a href="#concept-node-clone-ext" title="concept-node-clone-ext">cloning steps</a>
 defined for <var title="">node</var> in
 <a href="#other-applicable-specifications">other applicable specifications</a>.

 <li><p>If the <i title="">clone children flag</i> is set,
 <a href="#concept-node-clone" title="concept-node-clone">clone</a> all the
 <a href="#concept-tree-child" title="concept-tree-child">children</a> of <var title="">node</var> and
 append them to <var title="">copy</var>, with <var title="">ownerDocument</var>
 as specified and the <i title="">clone children flag</i> being set.

 <li><p>Return <var title="">copy</var>.
</ol>

<p>The
<dfn id="dom-node-clonenode" title="dom-Node-cloneNode"><code>cloneNode(<var title="">deep</var>)</code></dfn>
method must return a <a href="#concept-node-clone" title="concept-node-clone">clone</a> of the
<a href="#context-object">context object</a>, with the <i title="">clone children flag</i> set
if <var title="">deep</var> is true.

<p>The
<dfn id="dom-node-isequalnode" title="dom-Node-isEqualNode"><code>isEqualNode(<var title="">node</var>)</code></dfn>
method must return true if all of the following conditions are true, and
false otherwise:

<ul>
 <li><p><var title="">node</var> is not null.
 <li><p><var title="">node</var>'s
 <code title="dom-Node-nodeType"><a href="#dom-node-nodetype">nodeType</a></code> attribute value is the same
 as the <a href="#context-object">context object</a>'s
 <code title="dom-Node-nodeType"><a href="#dom-node-nodetype">nodeType</a></code> attribute value.
 <li>
  <p>The following are also equal, depending on <var title="">node</var>:
  <dl class="switch">
   <dt><code><a href="#documenttype">DocumentType</a></code>
   <dd><p>Its <a href="#concept-doctype-name" title="concept-doctype-name">name</a>,
   <a href="#concept-doctype-publicid" title="concept-doctype-publicid">public ID</a>, and
   <a href="#concept-doctype-systemid" title="concept-doctype-systemid">system ID</a>.

   <dt><code><a href="#element">Element</a></code>
   <dd>
    <p>Its <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a>,
    <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>,
    <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>, and its
    number of <a href="#concept-attribute" title="concept-attribute">attributes</a> in its
    <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.

   <!--AttrExodus
   <dt><code>Attr</code>
   <dd><p><code title=dom-Attr-value>value</code>
   -->

   <dt><code><a href="#processinginstruction">ProcessingInstruction</a></code>
   <dd><p>Its <a href="#concept-pi-target" title="concept-PI-target">target</a> and
   <a href="#concept-cd-data" title="concept-CD-data">data</a>.

   <dt><code><a href="#text">Text</a></code>
   <dt><code><a href="#comment">Comment</a></code>
   <dd><p>Its <a href="#concept-cd-data" title="concept-CD-data">data</a>.

   <dt>Any other node
   <dd><p>—
  </dl>
 <li><p>If <var title="">node</var> is an <code><a href="#element">Element</a></code>, each
 <a href="#concept-attribute" title="concept-attribute">attribute</a> in its
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a> has an
 <a href="#concept-attribute" title="concept-attribute">attribute</a> with the same
 <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a>,
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>, and
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a> in the
 <a href="#context-object">context object</a>'s
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.
 <li><p><var title="">node</var> has the same number of
 <a href="#concept-tree-child" title="concept-tree-child">children</a> as the
 <a href="#context-object">context object</a>.
 <li><p>Calling <code title="dom-Node-isEqualNode"><a href="#dom-node-isequalnode">isEqualNode()</a></code> on
 each <a href="#concept-tree-child" title="concept-tree-child">child</a> of the
 <a href="#context-object">context object</a>, with the
 <a href="#concept-tree-child" title="concept-tree-child">child</a> of the same index in
 <var title="">node</var> as argument returns true for every
 <a href="#concept-tree-child" title="concept-tree-child">child</a>.
</ul>

</div>

<hr>

<dl class="domintro">
 <dt><code><var title="">node</var> . <a href="#dom-node-comparedocumentposition" title="dom-Node-compareDocumentPosition">compareDocumentPosition</a>(<var title="">other</var>)</code>
 <dd>
  <p>Returns a bitmask indicating the position of <var title="">other</var>
  relative to <var title="">node</var>. These are the bits that can be set:

  <dl>
   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_position_disconnected" title="dom-Node-DOCUMENT_POSITION_DISCONNECTED">DOCUMENT_POSITION_DISCONNECTED</a></code> (1)
   <dd>Set when <var title="">node</var> and <var>other</var> are not in the
   same <a href="#concept-document" title="concept-document">document</a>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_position_preceding" title="dom-Node-DOCUMENT_POSITION_PRECEDING">DOCUMENT_POSITION_PRECEDING</a></code> (2)
   <dd>Set when <var title="">other</var> is
   <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
   <var title="">node</var>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_position_following" title="dom-Node-DOCUMENT_POSITION_FOLLOWING">DOCUMENT_POSITION_FOLLOWING</a></code> (4)
   <dd>Set when <var title="">other</var> is
   <a href="#concept-tree-following" title="concept-tree-following">following</a>
   <var title="">node</var>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_position_contains" title="dom-Node-DOCUMENT_POSITION_CONTAINS">DOCUMENT_POSITION_CONTAINS</a></code> (8)
   <dd>Set when <var title="">other</var> is an
   <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of
   <var title="">node</var>.

   <dt><code><a href="#node">Node</a> . <a href="#dom-node-document_position_contained_by" title="dom-Node-DOCUMENT_POSITION_CONTAINED_BY">DOCUMENT_POSITION_CONTAINED_BY</a></code> (16, 10 in hexadecimal)
   <dd>Set when <var title="">other</var> is a
   <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of
   <var title="">node</var>.
  </dl>

 <dt><code><var title="">node</var> . <a href="#dom-node-contains" title="dom-Node-contains">contains</a>(<var title="">other</var>)</code>
 <dd><p>Returns true if <var title="">other</var> is an
 <a href="#concept-tree-inclusive-descendant" title="concept-tree-inclusive-descendant">inclusive descendant</a>
 of <var title="">node</var>, and false otherwise.
</dl>

<p>These are the constants
<code title="dom-Node-compareDocumentPosition"><a href="#dom-node-comparedocumentposition">compareDocumentPosition()</a></code>
returns as mask:

<ul class="brief">
 <li><dfn id="dom-node-document_position_disconnected" title="dom-Node-DOCUMENT_POSITION_DISCONNECTED"><code>DOCUMENT_POSITION_DISCONNECTED</code></dfn> (1);
 <li><dfn id="dom-node-document_position_preceding" title="dom-Node-DOCUMENT_POSITION_PRECEDING"><code>DOCUMENT_POSITION_PRECEDING</code></dfn> (2);
 <li><dfn id="dom-node-document_position_following" title="dom-Node-DOCUMENT_POSITION_FOLLOWING"><code>DOCUMENT_POSITION_FOLLOWING</code></dfn> (4);
 <li><dfn id="dom-node-document_position_contains" title="dom-Node-DOCUMENT_POSITION_CONTAINS"><code>DOCUMENT_POSITION_CONTAINS</code></dfn> (8);
 <li><dfn id="dom-node-document_position_contained_by" title="dom-Node-DOCUMENT_POSITION_CONTAINED_BY"><code>DOCUMENT_POSITION_CONTAINED_BY</code></dfn> (16, 10 in hexadecimal);
 <li><dfn id="dom-node-document_position_implementation_specific" title="dom-Node-DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC"><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code> (32, 20 in hexadecimal).
</dfn></ul>

<p>The <dfn id="dom-node-comparedocumentposition" title="dom-Node-compareDocumentPosition"><code>compareDocumentPosition(<var>other</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">reference</var> be the <a href="#context-object">context object</a>.
 <li><p>If <var title="">other</var> and <var title="">reference</var> are the
 same object, return zero and terminate these steps.

 <li>
  <p>If <var title="">other</var> and <var title="">reference</var> are not
  in the same <a href="#concept-tree" title="concept-tree">tree</a>, return the result of
  adding
  <code title="dom-Node-DOCUMENT_POSITION_DISCONNECTED"><a href="#dom-node-document_position_disconnected">DOCUMENT_POSITION_DISCONNECTED</a></code>,
  <code title="dom-Node-DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC"><a href="#dom-node-document_position_implementation_specific">DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</a></code>,
  and either
  <code title="dom-Node-DOCUMENT_POSITION_PRECEDING"><a href="#dom-node-document_position_preceding">DOCUMENT_POSITION_PRECEDING</a></code> or
  <code title="dom-Node-DOCUMENT_POSITION_FOLLOWING"><a href="#dom-node-document_position_following">DOCUMENT_POSITION_FOLLOWING</a></code>,
  with the constraint that this is to be consistent, together and terminate
  these steps.

  <p class="note">Whether to return
  <code title="dom-Node-DOCUMENT_POSITION_PRECEDING"><a href="#dom-node-document_position_preceding">DOCUMENT_POSITION_PRECEDING</a></code> or
  <code title="dom-Node-DOCUMENT_POSITION_FOLLOWING"><a href="#dom-node-document_position_following">DOCUMENT_POSITION_FOLLOWING</a></code>
  is typically implemented via pointer comparison. In JavaScript
  implementations <code title="">Math.random()</code> can be used.

 <li><p>If <var title="">other</var> is an
 <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of
 <var title="">reference</var>, return the result of adding
 <code title="dom-Node-DOCUMENT_POSITION_CONTAINS"><a href="#dom-node-document_position_contains">DOCUMENT_POSITION_CONTAINS</a></code>
 to
 <code title="dom-Node-DOCUMENT_POSITION_PRECEDING"><a href="#dom-node-document_position_preceding">DOCUMENT_POSITION_PRECEDING</a></code>
 and terminate these steps.

 <li><p>If <var title="">other</var> is a
 <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of
 <var title="">reference</var>, return the result of adding
 <code title="dom-Node-DOCUMENT_POSITION_CONTAINED_BY"><a href="#dom-node-document_position_contained_by">DOCUMENT_POSITION_CONTAINED_BY</a></code>
 to
 <code title="dom-Node-DOCUMENT_POSITION_FOLLOWING"><a href="#dom-node-document_position_following">DOCUMENT_POSITION_FOLLOWING</a></code>
 and terminate these steps.

 <li><p>If <var title="">other</var> is
 <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
 <var title="">reference</var> return
 <code title="dom-Node-DOCUMENT_POSITION_PRECEDING"><a href="#dom-node-document_position_preceding">DOCUMENT_POSITION_PRECEDING</a></code>
 and terminate these steps.

 <li><p>Return
 <code title="dom-Node-DOCUMENT_POSITION_FOLLOWING"><a href="#dom-node-document_position_following">DOCUMENT_POSITION_FOLLOWING</a></code>.
</ol>

<!-- AttrExodus compareDocumentPosition() works differently if Attr inherits
     from Node -->

<p>The
<dfn id="dom-node-contains" title="dom-Node-contains"><code>contains(<var title="">other</var>)</code></dfn>
method must return true if <var title="">other</var> is an
<a href="#concept-tree-inclusive-descendant" title="concept-tree-inclusive-descendant">inclusive descendant</a> of
the <a href="#context-object">context object</a>, and false otherwise (including when
<var title="">other</var> is null).

<hr>

<!-- TODO: domintro -->

<!--
 XXX apparently these algorithms might not be quite correct
 https://bugzilla.mozilla.org/show_bug.cgi?id=312019
 https://bugzilla.mozilla.org/show_bug.cgi?id=505178
-->

<p>To <dfn id="locate-a-namespace-prefix">locate a namespace prefix</dfn> for an <var title="">element</var> using
<var title="">namespace</var> run these steps:

<ol>
 <li><p>If <var title="">element</var>'s
 <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
 <var title="">namespace</var> and its
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> is not
 null, return its
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> and
 terminate these steps.

 <li><p>If, <var title="">element</var>
 <a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> an
 <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
 <a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a> is
 "<code title="">xmlns</code>" and
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a> is
 <var title="">namespace</var>, then return <var title="">element</var>'s first
 such <a href="#concept-attribute" title="concept-attribute">attribute</a>'s
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>
 and terminate these steps.

 <li><p>If <var title="">element</var>'s <a href="#parent-element">parent element</a> is not null,
 return the result of running <a href="#locate-a-namespace-prefix">locate a namespace prefix</a> on that
 <a href="#concept-element" title="concept-element">element</a> using <var title="">namespace</var>.
 Otherwise, return null.
</ol>

<p>To <dfn id="locate-a-namespace">locate a namespace</dfn> for a <var title="">node</var> using
<var title="">prefix</var> depends on the <var title="">node</var>:

<dl class="switch">
 <dt><code><a href="#element">Element</a></code>
 <dd>
  <ol>
   <li><p>If its <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
   not null and its
   <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> is
   <var title="">prefix</var>, return
   <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> and terminate
   these steps.

   <li>
    <p>If it <a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> an
    <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
    <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is the
    <a href="#xmlns-namespace">XMLNS namespace</a>,
    <a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a>
    is "<code title="">xmlns</code>" and
    <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
    <var title="">prefix</var>, or if <var title="">prefix</var> is null and it
    <a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> an
    <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
    <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is the
    <a href="#xmlns-namespace">XMLNS namespace</a>,
    <a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a>
    is null and <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>
    is "<code title="">xmlns</code>":

    <ol>
     <li><p>Let <var title="">value</var> be its
     <a href="#concept-attribute-value" title="concept-attribute-value">value</a> if it is not the empty
     string, and null otherwise.

     <li><p>Return <var title="">value</var> and terminate these steps.
    </ol>

   <li><p>If its <a href="#parent-element">parent element</a> is null, return null and
   terminate these steps.

   <li><p>Return the result of running <a href="#locate-a-namespace">locate a namespace</a> on
   its <a href="#parent-element">parent element</a> using <var title="">prefix</var>.
  </ol>

 <!--AttrExodus <code>Attr</code> -->
 <dt><code><a href="#document">Document</a></code>
 <dd>
  <ol>
   <li><p>If its <a href="#document-element">document element</a> is null, return null and
   terminate these steps.

   <li><p>Return the result of running <a href="#locate-a-namespace">locate a namespace</a> on
   its <a href="#document-element">document element</a> using <var title="">prefix</var>.
  </ol>

 <dt><code><a href="#documenttype">DocumentType</a></code>
 <dt><code><a href="#documentfragment">DocumentFragment</a></code>
 <dd><p>Return null.

 <dt>Any other node
 <dd>
  <ol>
   <li><p>If its <a href="#parent-element">parent element</a> is null, return null and
   terminate these steps.

   <li><p>Return the result of running <a href="#locate-a-namespace">locate a namespace</a> on
   its <a href="#parent-element">parent element</a> using <var title="">prefix</var>.
  </ol>
</dl>

<p>The
<dfn id="dom-node-lookupprefix" title="dom-Node-lookupPrefix"><code>lookupPrefix(<var title="">namespace</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">namespace</var> is null or the empty string, return null.

 <li>
  <p>Otherwise it depends on the <a href="#context-object">context object</a>:

  <dl class="switch">
   <dt><code><a href="#element">Element</a></code>
   <dd><p>Return the result of
   <a href="#locate-a-namespace-prefix" title="locate a namespace prefix">locating a namespace prefix</a>
   for the node using <var title="">namespace</var>.

   <!--AttrExodus <code>Attr</code> -->
   <dt><code><a href="#document">Document</a></code>
   <dd><p>Return the result of
   <a href="#locate-a-namespace-prefix" title="locate a namespace prefix">locating a namespace prefix</a>
   for its <a href="#document-element">document element</a>, if that is not null, and null
   otherwise.

   <dt><code><a href="#documenttype">DocumentType</a></code>
   <dt><code><a href="#documentfragment">DocumentFragment</a></code>
   <dd><p>Return null.

   <dt>Any other node
   <dd><p>Return the result of
   <a href="#locate-a-namespace-prefix" title="locate a namespace prefix">locating a namespace prefix</a>
   for its <a href="#parent-element">parent element</a>, or if that is null, null.
  </dl>
</ol>

<p>The
<dfn id="dom-node-lookupnamespaceuri" title="dom-Node-lookupNamespaceURI"><code>lookupNamespaceURI(<var title="">prefix</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">prefix</var> is the empty string, set it to null.

 <li><p>Return the result of running <a href="#locate-a-namespace">locate a namespace</a> for the
 <a href="#context-object">context object</a> using <var title="">prefix</var>.
</ol>

<p>The
<dfn id="dom-node-isdefaultnamespace" title="dom-Node-isDefaultNamespace"><code>isDefaultNamespace(<var title="">namespace</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">namespace</var> is the empty string, set it to null.

 <li><p>Let <var title="">defaultNamespace</var> be the result of running
 <a href="#locate-a-namespace">locate a namespace</a> for the <a href="#context-object">context object</a> using
 null.

 <li><p>Return true if <var title="">defaultNamespace</var> is the same as
 <var title="">namespace</var>, and false otherwise.
</ol>

<hr>

<p>The
<dfn id="dom-node-insertbefore" title="dom-Node-insertBefore"><code>insertBefore(<var>node</var>, <var>child</var>)</code></dfn>
method must return the result of
<a href="#concept-node-pre-insert" title="concept-node-pre-insert">pre-inserting</a>
<var title="">node</var> into the <a href="#context-object">context object</a> before
<var title="">child</var>.

<p>The
<dfn id="dom-node-appendchild" title="dom-Node-appendChild"><code>appendChild(<var>node</var>)</code></dfn>
method must return the result of
<a href="#concept-node-append" title="concept-node-append">appending</a> <var title="">node</var> to
the <a href="#context-object">context object</a>.

<p>The
<dfn id="dom-node-replacechild" title="dom-Node-replaceChild"><code>replaceChild(<var>node</var>, <var>child</var>)</code></dfn>
method must return the result of
<a href="#concept-node-replace" title="concept-node-replace">replacing</a> <var title="">child</var>
with <var title="">node</var> within the <a href="#context-object">context object</a>.

<p>The
<dfn id="dom-node-removechild" title="dom-Node-removeChild"><code>removeChild(<var>child</var>)</code></dfn>
method must return the result of
<a href="#concept-node-pre-remove" title="concept-node-pre-remove">pre-removing</a>
<var title="">child</var> from the <a href="#context-object">context object</a>.

<hr><!-- Collections -->

<p>The
<dfn id="concept-getelementsbytagname" title="concept-getElementsByTagName">list of elements with local name <var title="">localName</var></dfn>
for a <a href="#concept-node" title="concept-node">node</a> <var title="">root</var> is the
<code><a href="#htmlcollection">HTMLCollection</a></code> returned by the following algorithm:
<ol>
 <li><p>If <var title="">localName</var> is "<code>*</code>" (U+002A),
 return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at <var title="">root</var>,
 whose filter matches only <a href="#concept-element" title="concept-element">elements</a>.

 <li>
  <p>Otherwise, if <var title="">root</var>'s
  <a href="#concept-node-document" title="concept-node-document">node document</a> is an
  <a href="#html-document">HTML document</a>, return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at
  <var title="">root</var>, whose filter matches only the following
  <a href="#concept-element" title="concept-element">elements</a>:

  <ul>
   <li>Whose <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is the
   <a href="#html-namespace">HTML namespace</a> and whose
   <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
   <var title="">localName</var> <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.

   <li>Whose <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
   <em>not</em> the <a href="#html-namespace">HTML namespace</a> and whose
   <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
   <var title="">localName</var>.
  </ul>

 <li><p>Otherwise, return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at
 <var title="">root</var>, whose filter matches only
 <a href="#concept-element" title="concept-element">elements</a> whose
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
 <var title="">localName</var>.
</ol>

<p>When invoked with the same argument, the same <code><a href="#htmlcollection">HTMLCollection</a></code>
object may be returned as returned by an earlier call.


<p>The
<dfn id="concept-getelementsbytagnamens" title="concept-getElementsByTagNameNS">list of elements with namespace <var title="">namespace</var> and local name <var title="">localName</var></dfn>
for a <a href="#concept-node" title="concept-node">node</a> <var title="">root</var> is the
<code><a href="#htmlcollection">HTMLCollection</a></code> returned by the following algorithm:
<ol>
 <li><p>If <var title="">namespace</var> is the empty string, set it to null.

 <li><p>If both <var title="">namespace</var> and <var title="">localName</var>
 are "<code>*</code>" (U+002A) return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at
 <var title="">root</var>, whose filter matches only
 <a href="#concept-element" title="concept-element">elements</a>.

 <li><p>Otherwise, if just <var title="">namespace</var> is "<code>*</code>"
 (U+002A), return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at
 <var title="">root</var>, whose filter matches only
 <a href="#concept-element" title="concept-element">elements</a> whose
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
 <var title="">localName</var>.

 <li><p>Otherwise, if just <var title="">localName</var> is "<code>*</code>"
 (U+002A), return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at
 <var title="">root</var>, whose filter matches only
 <a href="#concept-element" title="concept-element">elements</a> whose
 <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
 <var title="">namespace</var>.

 <li><p>Otherwise, return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at
 <var title="">root</var>, whose filter matches only
 <a href="#concept-element" title="concept-element">elements</a> whose
 <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
 <var title="">namespace</var> and
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
 <var title="">localName</var>.
</ol>

<p>When invoked with the same arguments, the same <code><a href="#htmlcollection">HTMLCollection</a></code>
object may be returned as returned by an earlier call.


<p>The
<dfn id="concept-getelementsbyclassname" title="concept-getElementsByClassName">list of elements with class names <var title="">classNames</var></dfn>
for a <a href="#concept-node" title="concept-node">node</a> <var title="">root</var> is the
<code><a href="#htmlcollection">HTMLCollection</a></code> returned by the following algorithm:
<ol>
 <li>
  <p>Let <var title="">classes</var> be the result of running the
  <a href="#concept-set-parser" title="concept-set-parser">set parser</a> on
  <var title="">classNames</var>.

 <li>
  <p>If <var title="">classes</var> is the empty set, return an empty
  <code><a href="#htmlcollection">HTMLCollection</a></code> and terminate these steps.

 <li>
  <p>Return a <code><a href="#htmlcollection">HTMLCollection</a></code> rooted at <var title="">root</var>,
  whose filter matches only
  <a href="#concept-element" title="concept-element">elements</a> that have all the
  <a href="#concept-class" title="concept-class">classes</a> in <var title="">classes</var>.

  <p>If <var title="">root</var>'s
  <a href="#concept-node-document" title="concept-node-document">node document</a> is in
  <a href="#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, then the
  comparisons for the <a href="#concept-class" title="concept-class">classes</a> must be done
  in an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> manner, and in a
  <a href="#case-sensitive">case-sensitive</a> manner otherwise.
</ol>
<p>When invoked with the same argument, the same <code><a href="#htmlcollection">HTMLCollection</a></code>
object may be returned as returned by an earlier call.


<h3 id="interface-document"><span class="secno">6.5 </span>Interface <code><a href="#document">Document</a></code></h3>
<pre class="idl">[<a href="#dom-document" title="dom-Document">Constructor</a>]
interface <dfn id="document">Document</dfn> : <a href="#node">Node</a> {
  readonly attribute <a href="#domimplementation">DOMImplementation</a> <a href="#dom-document-implementation" title="dom-Document-implementation">implementation</a>;
  readonly attribute DOMString <a href="#dom-document-url" title="dom-Document-URL">URL</a>;
  readonly attribute DOMString <a href="#dom-document-documenturi" title="dom-Document-documentURI">documentURI</a>;
  readonly attribute DOMString <a href="#dom-document-compatmode" title="dom-Document-compatMode">compatMode</a>;
  readonly attribute DOMString <a href="#dom-document-characterset" title="dom-Document-characterSet">characterSet</a>;
  readonly attribute DOMString <a href="#dom-document-contenttype" title="dom-Document-contentType">contentType</a>;

  readonly attribute <a href="#documenttype">DocumentType</a>? <a href="#dom-document-doctype" title="dom-Document-doctype">doctype</a>;
  readonly attribute <a href="#element">Element</a>? <a href="#dom-document-documentelement" title="dom-Document-documentElement">documentElement</a>;
  <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-getelementsbytagname" title="dom-Document-getElementsByTagName">getElementsByTagName</a>(DOMString <var title="">localName</var>);
  <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-getelementsbytagnamens" title="dom-Document-getElementsByTagNameNS">getElementsByTagNameNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">localName</var>);
  <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-getelementsbyclassname" title="dom-Document-getElementsByClassName">getElementsByClassName</a>(DOMString <var title="">classNames</var>);
  <a href="#element">Element</a>? <a href="#dom-document-getelementbyid" title="dom-Document-getElementById">getElementById</a>(DOMString <var title="">elementId</var>);

  <a href="#element">Element</a> <a href="#dom-document-createelement" title="dom-Document-createElement">createElement</a>(DOMString <var title="">localName</var>);
  <a href="#element">Element</a> <a href="#dom-document-createelementns" title="dom-Document-createElementNS">createElementNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">qualifiedName</var>);
  <a href="#documentfragment">DocumentFragment</a> <a href="#dom-document-createdocumentfragment" title="dom-Document-createDocumentFragment">createDocumentFragment</a>();
  <a href="#text">Text</a> <a href="#dom-document-createtextnode" title="dom-Document-createTextNode">createTextNode</a>(DOMString <var title="">data</var>);
  <a href="#comment">Comment</a> <a href="#dom-document-createcomment" title="dom-Document-createComment">createComment</a>(DOMString <var title="">data</var>);
  <a href="#processinginstruction">ProcessingInstruction</a> <a href="#dom-document-createprocessinginstruction" title="dom-Document-createProcessingInstruction">createProcessingInstruction</a>(DOMString <var title="">target</var>, DOMString <var title="">data</var>);<!--
  CDATASection createCDATASection(DOMString data);
  EntityReference createEntityReference(DOMString name);
  <span>Attr</span> <span title=dom-Document-createAttribute>createAttribute</span>(DOMString name);
  <span>Attr</span> <span title=dom-Document-createAttributeNS>createAttributeNS</span>(DOMString namespace, DOMString qualifiedName);
    If adding this, search for [createAttribute]-->

  <a href="#node">Node</a> <a href="#dom-document-importnode" title="dom-Document-importNode">importNode</a>(<a href="#node">Node</a> <var title="">node</var>, optional boolean <var title="">deep</var> = true);
  <a href="#node">Node</a> <a href="#dom-document-adoptnode" title="dom-Document-adoptNode">adoptNode</a>(<a href="#node">Node</a> <var title="">node</var>);

  <a href="#event">Event</a> <a href="#dom-document-createevent" title="dom-Document-createEvent">createEvent</a>(DOMString <var title="">interface</var>);

  <a href="#range">Range</a> <a href="#dom-document-createrange" title="dom-Document-createRange">createRange</a>();

  // <a href="#nodefilter">NodeFilter</a>.<a href="#dom-nodefilter-show_all" title="dom-NodeFilter-SHOW_ALL">SHOW_ALL</a> = 0xFFFFFFFF
  <a href="#nodeiterator">NodeIterator</a> <a href="#dom-document-createnodeiterator" title="dom-Document-createNodeIterator">createNodeIterator</a>(<!--
  --><a href="#node">Node</a> <var title="">root</var>, <!--
  -->optional unsigned long <var title="">whatToShow</var> = 0xFFFFFFFF, <!--
  -->optional <a href="#nodefilter">NodeFilter</a>? <var title="">filter</var> = null);
  <a href="#treewalker">TreeWalker</a> <a href="#dom-document-createtreewalker" title="dom-Document-createTreeWalker">createTreeWalker</a>(<!--
  --><a href="#node">Node</a> <var title="">root</var>, <!--
  -->optional unsigned long <var title="">whatToShow</var> = 0xFFFFFFFF, <!--
  -->optional <a href="#nodefilter">NodeFilter</a>? <var title="">filter</var> = null);
};

interface <dfn id="xmldocument">XMLDocument</dfn> : <a href="#document">Document</a> {};</pre>

<p><code><a href="#document">Document</a></code> <a href="#concept-node" title="concept-node">nodes</a> are simply
known as <dfn id="concept-document" title="concept-document">documents</dfn>.

<p>Each <a href="#concept-document" title="concept-document">document</a> has an associated
<dfn id="concept-document-encoding" title="concept-document-encoding">encoding</dfn>,
<dfn id="concept-document-content-type" title="concept-document-content-type">content type</dfn>, and
<dfn id="concept-document-url" title="concept-document-url">URL</dfn>.
<a href="#refsENCODING">[ENCODING]</a>
<a href="#refsURL">[URL]</a>

<p>Unless stated otherwise, a <a href="#concept-document" title="concept-document">document</a>'s
<a href="#concept-document-encoding" title="concept-document-encoding">encoding</a> is the
<code class="external" data-anolis-spec="encoding"><a href="http://encoding.spec.whatwg.org/#utf-8">utf-8</a></code>
<a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#encoding">encoding</a>, its
<a href="#concept-document-content-type" title="concept-document-content-type">content type</a> is
"<code title="">application/xml</code>", and its
<a href="#concept-document-url" title="concept-document-url">URL</a> is
"<code title="">about:blank</code>".

<p>Unless stated otherwise, a <a href="#concept-document" title="concept-document">document</a>'s
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> is a globally unique identifier
and its <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> is an
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> of that
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a>.
<a href="#refsHTML">[HTML]</a>

<p>A <a href="#concept-document" title="concept-document">document</a> is assumed to be an
<dfn id="xml-document">XML document</dfn> unless it is flagged as being an
<dfn id="html-document">HTML document</dfn>. Whether a
<a href="#concept-document" title="concept-document">document</a> is an
<a href="#html-document">HTML document</a> or an <a href="#xml-document">XML document</a> affects the
behavior of certain APIs.

<p>A <a href="#concept-document" title="concept-document">document</a> is always set to one of
three modes: <dfn id="concept-document-no-quirks" title="concept-document-no-quirks">no-quirks mode</dfn>, the
default; <dfn id="concept-document-quirks" title="concept-document-quirks">quirks mode</dfn>, used
typically for legacy documents; and
<dfn id="concept-document-limited-quirks" title="concept-document-limited-quirks">limited-quirks mode</dfn>. Unless stated
otherwise, a <a href="#concept-document" title="concept-document">document</a> must be in
<a href="#concept-document-no-quirks" title="concept-document-no-quirks">no-quirks mode</a>.

<p class="note">The mode is only ever changed from the default if the
<a href="#concept-document" title="concept-document">document</a> is created by the
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#html-parser">HTML parser</a>, based on the presence,
absence, or value of the DOCTYPE string.
<a href="#refsHTML">[HTML]</a>

<p class="note"><a href="#concept-document-no-quirks" title="concept-document-no-quirks">No-quirks mode</a>
was originally known as "standards mode" and
<a href="#concept-document-limited-quirks" title="concept-document-limited-quirks">limited-quirks mode</a> was
once known as "almost standards mode". They have been renamed because their
details are now defined by standards. (And because Ian Hickson vetoed their
original names on the basis that they are nonsensical.)

<hr>

<dl class="domintro">
 <dt><code><var title="">document</var> = new <a href="#dom-document" title="dom-Document">Document</a>()</code>
 <dd><p>Returns a new <a href="#concept-document" title="concept-document">document</a>.

 <dt><var title="">document</var> . <code title="dom-Document-implementation"><a href="#dom-document-implementation">implementation</a></code>
 <dd><p>Returns the associated <code><a href="#domimplementation">DOMImplementation</a></code> object.

 <dt><var title="">document</var> . <code title="dom-Document-URL"><a href="#dom-document-url">URL</a></code>
 <dt><var title="">document</var> . <code title="dom-Document-documentURI"><a href="#dom-document-documenturi">documentURI</a></code>
 <dd><p>Returns the <a href="#concept-document-url" title="concept-document-url">URL</a>.

 <dt><var title="">document</var> . <code title="dom-Document-compatMode"><a href="#dom-document-compatmode">compatMode</a></code>
 <dd>
  <p>Returns the string "<code title="">CSS1Compat</code>" if
  <var title="">document</var> is in
  <a href="#concept-document-no-quirks" title="concept-document-no-quirks">no-quirks mode</a> or
  <a href="#concept-document-limited-quirks" title="concept-document-limited-quirks">limited-quirks mode</a>, and
  "<code title="">BackCompat</code>", if <var title="">document</var> is in
  <a href="#concept-document-quirks" title="concept-document-quirks">quirks mode</a>.

 <dt><var title="">document</var> . <code title="dom-Document-characterSet"><a href="#dom-document-characterset">characterSet</a></code>
 <dd><p>Returns the <a href="#concept-document-encoding" title="concept-document-encoding">encoding</a>.

 <dt><var title="">document</var> . <code title="dom-Document-contentType"><a href="#dom-document-contenttype">contentType</a></code>
 <dd><p>Returns the
 <a href="#concept-document-content-type" title="concept-document-content-type">content type</a>.
</dl>

<p>The <dfn id="dom-document" title="dom-Document"><code>Document()</code></dfn> constructor
must return a new <a href="#concept-document" title="concept-document">document</a> whose
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> is an
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> to the
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> of the global object's associated
<a href="#concept-document" title="concept-document">document</a>, and
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> is an
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> to the
<a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> of the
global object's associated <a href="#concept-document" title="concept-document">document</a>.
<a href="#refsHTML">[HTML]</a>

<p class="note">Unlike
<code title="dom-DOMImplementation-createDocument"><a href="#dom-domimplementation-createdocument">createDocument()</a></code>
this constructor does not return an <code><a href="#xmldocument">XMLDocument</a></code> object, but a
<a href="#concept-document" title="concept-document">document</a> (<code><a href="#document">Document</a></code> object).

<p>The
<dfn id="dom-document-implementation" title="dom-Document-implementation"><code>implementation</code></dfn>
attribute must return the <code><a href="#domimplementation">DOMImplementation</a></code> object that is
associated with the <a href="#concept-document" title="concept-document">document</a>.

<p>The <dfn id="dom-document-url" title="dom-Document-URL"><code>URL</code></dfn> and
<dfn id="dom-document-documenturi" title="dom-Document-documentURI"><code>documentURI</code></dfn>
attributes must return the <a href="#concept-document-url" title="concept-document-url">URL</a>.

<p>The <dfn id="dom-document-compatmode" title="dom-Document-compatMode"><code>compatMode</code></dfn>
attribute must return "<code title="">BackCompat</code>" if the
<a href="#context-object">context object</a> is in
<a href="#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and
"<code title="">CSS1Compat</code>" otherwise.

<p>The <dfn id="dom-document-characterset" title="dom-Document-characterSet"><code>characterSet</code></dfn>
attribute must return the <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#name">name</a> of the
<a href="#concept-document-encoding" title="concept-document-encoding">encoding</a>.

<p>The <dfn id="dom-document-contenttype" title="dom-Document-contentType"><code>contentType</code></dfn>
attribute must return the
<a href="#concept-document-content-type" title="concept-document-content-type">content type</a>.

<hr>

<dl class="domintro">
 <dt><var title="">document</var> . <code title="dom-Document-doctype"><a href="#dom-document-doctype">doctype</a></code>
 <dd><p>Returns the <a href="#concept-doctype" title="concept-doctype">doctype</a> or null if
 there is none.

 <dt><var title="">document</var> . <code title="dom-Document-documentElement"><a href="#dom-document-documentelement">documentElement</a></code>
 <dd><p>Returns the <a href="#document-element">document element</a>.

 <dt><var title="">collection</var> = <var title="">document</var> . <code title="dom-Document-getElementsByTagName"><a href="#dom-document-getelementsbytagname">getElementsByTagName(<var>localName</var>)</a></code>

 <dd>
  <p>If <var>localName</var> is "<code title="">*</code>" returns a
  <code><a href="#htmlcollection">HTMLCollection</a></code> of all
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>
  <a href="#concept-element" title="concept-element">elements</a>.

  <p>Otherwise, returns a <code><a href="#htmlcollection">HTMLCollection</a></code> of all
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>
  <a href="#concept-element" title="concept-element">elements</a> whose
  <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
  <var title="">localName</var>. (Matches case-insensitively against
  <a href="#concept-element" title="concept-element">elements</a> in the
  <a href="#html-namespace">HTML namespace</a> within an <a href="#html-document">HTML document</a>.)

 <dt><var title="">collection</var> = <var title="">document</var> . <code title="dom-Document-getElementsByTagName"><a href="#dom-document-getelementsbytagname">getElementsByTagNameNS(<var>namespace</var>, <var>localName</var>)</a></code>

 <dd>
  <p>If <var>namespace</var> and <var>localName</var> are
  "<code title="">*</code>" returns a <code><a href="#htmlcollection">HTMLCollection</a></code> of all
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>
  <a href="#concept-element" title="concept-element">elements</a>.

  <p>If only <var>namespace</var> is "<code title="">*</code>" returns a
  <code><a href="#htmlcollection">HTMLCollection</a></code> of all
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>
  <a href="#concept-element" title="concept-element">elements</a> whose
  <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
  <var title="">localName</var>.

  <p>If only <var>localName</var> is "<code title="">*</code>" returns a
  <code><a href="#htmlcollection">HTMLCollection</a></code> of all
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>
  <a href="#concept-element" title="concept-element">elements</a> whose
  <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
  <var title="">namespace</var>.

  <p>Otherwise, returns a <code><a href="#htmlcollection">HTMLCollection</a></code> of all
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>
  <a href="#concept-element" title="concept-element">elements</a> whose
  <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
  <var title="">namespace</var> and
  <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
  <var title="">localName</var>.

 <dt><var title="">collection</var> = <var title="">document</var> . <code title="dom-Document-getElementsByClassName"><a href="#dom-document-getelementsbyclassname">getElementsByClassName(<var>classes</var>)</a></code>
 <dt><var title="">collection</var> = <var title="">element</var> . <code title="dom-Element-getElementsByClassName"><a href="#dom-element-getelementsbyclassname">getElementsByClassName(<var>classes</var>)</a></code>
 <dd>
  <p>Returns a <code><a href="#htmlcollection">HTMLCollection</a></code> of the
  <a href="#concept-element" title="concept-element">elements</a> in the object on which
  the method was invoked (a <a href="#concept-document" title="concept-document">document</a> or
  an <a href="#concept-element" title="concept-element">element</a>) that have all the classes
  given by <var title="">classes</var>.
  <p>The <var title="">classes</var> argument is interpreted as a
  space-separated list of classes.

 <dt><var title="">element</var> = <var title="">document</var> . <code title="dom-Document-getElementById"><a href="#dom-document-getelementbyid">getElementById(<var title="">elementId</var>)</a></code>
 <dd><p>Returns the first <a href="#concept-element" title="concept-element">element</a> in
 <var title="">document</var> with the given <a href="#concept-id" title="concept-id">ID</a>.
</dl>

<p>The <dfn id="dom-document-doctype" title="dom-Document-doctype"><code>doctype</code></dfn> attribute
must return the <a href="#concept-tree-child" title="concept-tree-child">child</a> of the
<a href="#concept-document" title="concept-document">document</a> that is a
<a href="#concept-doctype" title="concept-doctype">doctype</a>, and null otherwise.

<p>The
<dfn id="dom-document-documentelement" title="dom-Document-documentElement"><code>documentElement</code></dfn>
attribute must return the <a href="#document-element">document element</a>.

<p>The
<dfn id="dom-document-getelementsbytagname" title="dom-Document-getElementsByTagName"><code>getElementsByTagName(<var title="">localName</var>)</code></dfn>
method must return the
<a href="#concept-getelementsbytagname" title="concept-getElementsByTagName">list of elements with local name <var title="">localName</var></a>
for the <a href="#context-object">context object</a>.

<p class="note">Thus, in an <a href="#html-document">HTML document</a>,
<code title="">document.getElementsByTagName("FOO")</code> will match
<code title="">FOO</code> elements that are not in the
<a href="#html-namespace">HTML namespace</a>, and <code title="">foo</code> elements that are in
the <a href="#html-namespace">HTML namespace</a>, but not <code title="">FOO</code> elements
that are in the <a href="#html-namespace">HTML namespace</a>.


<p>The
<dfn id="dom-document-getelementsbytagnamens" title="dom-Document-getElementsByTagNameNS"><code>getElementsByTagNameNS(<var title="">namespace</var>, <var title="">localName</var>)</code></dfn>
method must return the
<a href="#concept-getelementsbytagnamens" title="concept-getElementsByTagNameNS">list of elements with namespace <var title="">namespace</var> and local name <var title="">localName</var></a>
for the <a href="#context-object">context object</a>.


<p>The
<dfn id="dom-document-getelementsbyclassname" title="dom-Document-getElementsByClassName"><code>getElementsByClassName(<var>classNames</var>)</code></dfn>
method must return the
<a href="#concept-getelementsbyclassname" title="concept-getElementsByClassName">list of elements with class names <var title="">classNames</var></a>
for the <a href="#context-object">context object</a>.

<div class="example">
 <p>Given the following XHTML fragment:

 <pre>&lt;div id="example"&gt;
  &lt;p id="p1" class="aaa bbb"/&gt;
  &lt;p id="p2" class="aaa ccc"/&gt;
  &lt;p id="p3" class="bbb ccc"/&gt;
&lt;/div&gt;</pre>

 <p>A call to
 <code title="">document.getElementById('example').getElementsByClassName('aaa')</code>
 would return a <code><a href="#htmlcollection">HTMLCollection</a></code> with the two paragraphs
 <code title="">p1</code> and <code title="">p2</code> in it.

 <p>A call to
 <code title="">getElementsByClassName('ccc bbb')</code>
 would only return one node, however, namely <code title="">p3</code>. A call to
 <code title="">document.getElementById('example').getElementsByClassName('bbb  ccc ')</code>
 would return the same thing.

 <p>A call to
 <code title="">getElementsByClassName('aaa,bbb')</code>
 would return no nodes; none of the elements above are in the
 <code title="">aaa,bbb</code> class.
</div>

<!-- v2:
>         * xGetParentElementByClassName(rootElement, className, tagName) -
> Navigates upwards until we hit a parent element with the given class name and
> optional tag name.
-->

<p>The
<dfn id="dom-document-getelementbyid" title="dom-Document-getElementById"><code>getElementById(<var title="">elementId</var>)</code></dfn>
method must return the first <a href="#concept-element" title="concept-element">element</a>, in
<a href="#concept-tree-order" title="concept-tree-order">tree order</a>, within the
<a href="#context-object">context object</a>'s <a href="#concept-tree" title="concept-tree">tree</a>, whose
<a href="#concept-id" title="concept-ID">ID</a> is <var title="">elementId</var>, or null if
there is none.

<hr>

<dl class="domintro">
 <dt><var title="">element</var> = <var title="">document</var> . <code title="dom-Document-createElement"><a href="#dom-document-createelement">createElement(<var>localName</var>)</a></code>
 <dd>
  <p>Returns an <a href="#concept-element" title="concept-element">element</a> in the
  <a href="#html-namespace">HTML namespace</a> with <var title="">localName</var> as
  <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>. (In an
  <a href="#html-document">HTML document</a> <var title="">localName</var> is lowercased.)

  <p>If <var title="">localName</var> does not match the
  <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production an
  "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>"
  exception will be thrown.

 <dt><var title="">element</var> = <var title="">document</var> . <code title="dom-Document-createElement"><a href="#dom-document-createelement">createElementNS(<var>namespace</var>, <var>qualifiedName</var>)</a></code>

 <dd>
  <p>Returns an <a href="#concept-element" title="concept-element">element</a> with
  <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a>
  <var title="">namespace</var>. Its
  <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> will
  be everything before "<code title="">:</code>" (U+003E) in
  <var title="">qualifiedName</var> or null. Its
  <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> will be
  everything after "<code title="">:</code>" (U+003E) in
  <var title="">qualifiedName</var> or <var title="">qualifiedName</var>.

  <p>If <var title="">localName</var> does not match the
  <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production an
  "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>"
  exception will be thrown.

  <p>If one of the following conditions is true a
  "<code><a href="#namespaceerror">NamespaceError</a></code>" exception
  will be thrown:

  <ul>
   <li><var title="">localName</var> does not match the
   <code class="external" data-anolis-spec="xmlns"><a href="http://www.w3.org/TR/xml-names/#NT-QName">QName</a></code> production.
   <li><a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">Namespace prefix</a>
   is not null and <var title="">namespace</var> is the empty string.
   <li><a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">Namespace prefix</a>
   is "<code title="">xml</code>" and <var title="">namespace</var> is not the
   <a href="#xml-namespace">XML namespace</a>.
   <li><var title="">qualifiedName</var> or
   <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>
   is "<code title="">xmlns</code>" and <var title="">namespace</var> is not the
   <a href="#xmlns-namespace">XMLNS namespace</a>.
   <li><var title="">namespace</var> is the <a href="#xmlns-namespace">XMLNS namespace</a> and
   neither <var title="">qualifiedName</var> nor
   <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>
   is "<code title="">xmlns</code>".
  </ul>

 <dt><var title="">documentFragment</var> = <var title="">document</var> . <code title="dom-Document-createDocumentFragment"><a href="#dom-document-createdocumentfragment">createDocumentFragment()</a></code>
 <dd><p>Returns a <code><a href="#documentfragment">DocumentFragment</a></code>
 <a href="#concept-node" title="concept-node">node</a>.

 <dt><var title="">text</var> = <var title="">document</var> . <code title="dom-Document-createTextNode"><a href="#dom-document-createtextnode">createTextNode(<var>data</var>)</a></code>
 <dd><p>Returns a <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>
 whose <a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var>.

 <dt><var title="">comment</var> = <var title="">document</var> . <code title="dom-Document-createComment"><a href="#dom-document-createcomment">createComment(<var>data</var>)</a></code>
 <dd><p>Returns a <code><a href="#comment">Comment</a></code> <a href="#concept-node" title="concept-node">node</a>
 whose <a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var>.

 <dt><var title="">processingInstruction</var> = <var title="">document</var> . <code title="dom-Document-createProcessingInstruction"><a href="#dom-document-createprocessinginstruction">createProcessingInstruction(<var>target</var>, <var>data</var>)</a></code>
 <dd>
  <p>Returns a <code><a href="#processinginstruction">ProcessingInstruction</a></code>
  <a href="#concept-node" title="concept-node">node</a> whose
  <a href="#concept-pi-target" title="concept-PI-target">target</a> is <var title="">target</var> and
  <a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var>.
  <p>If <var title="">target</var> does not match the
  <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production an
  "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>"
  exception will be thrown.
  <p>If <var title="">data</var> contains "<code title="">?&gt;</code>" an
  "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>"
  exception will be thrown.
</dl>

<p>The <dfn id="concept-element-interface" title="concept-element-interface">element interface</dfn> for any
<var title="">name</var> and <var title="">namespace</var> is <code><a href="#element">Element</a></code>, unless
stated otherwise.

<p class="note">The HTML Standard will e.g. define that for <code title="">html</code> and the
<a href="#html-namespace">HTML namespace</a>, the <code title="">HTMLHtmlElement</code> interface is used.
<a href="#refsHTML">[HTML]</a>

<p>The <dfn id="dom-document-createelement" title="dom-Document-createElement"><code>createElement(<var title="">localName</var>)</code></dfn> method must run the these steps:

<ol>
 <li><p>If <var title="">localName</var> does not match the
 <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps.

 <li><p>If the <a href="#context-object">context object</a> is an <a href="#html-document">HTML document</a>,
 let <var title="">localName</var> be
 <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.
 <!-- XXX why restrict this to HTML documents? -->

 <li><p>Let <var title="">interface</var> be the
 <a href="#concept-element-interface" title="concept-element-interface">element interface</a> for
 <var title="">localName</var> and the <a href="#html-namespace">HTML namespace</a>.

 <li><p>Return a new <a href="#concept-element" title="concept-element">element</a> that implements <var title="">interface</var>,
 with no attributes,
 <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> set to the <a href="#html-namespace">HTML namespace</a>,
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> set to <var title="">localName</var>, and
 <a href="#concept-node-document" title="concept-node-document">node document</a> set to the <a href="#context-object">context object</a>.
</ol>

<p>The
<dfn id="dom-document-createelementns" title="dom-Document-createElementNS"><code>createElementNS(<var title="">namespace</var>, <var title="">qualifiedName</var>)</code></dfn>
method must run these steps:
<ol>
 <li><p>If <var title="">namespace</var> is the empty string, set it to null.

 <li><p>If <var title="">qualifiedName</var> does not match the
 <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps.
 <li><p>If <var title="">qualifiedName</var> does not match the
 <code class="external" data-anolis-spec="xmlns"><a href="http://www.w3.org/TR/xml-names/#NT-QName">QName</a></code> production,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.
 <li><p>If <var title="">qualifiedName</var> contains a "<code>:</code>"
 (U+003E), then split the string on it and let <var title="">prefix</var> be
 the part before and <var title="">localName</var> the part after. Otherwise,
 let <var title="">prefix</var> be null and <var title="">localName</var> be
 <var title="">qualifiedName</var>.
 <li><p>If <var title="">prefix</var> is not null and
 <var title="">namespace</var> is null, <a href="#concept-throw" title="concept-throw">throw</a>
 a "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.
 <li><p>If <var title="">prefix</var> is "<code title="">xml</code>" and
 <var title="">namespace</var> is not the <a href="#xml-namespace">XML namespace</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.
 <li><p>If <var title="">qualifiedName</var> or <var title="">prefix</var> is
 "<code title="">xmlns</code>" and <var title="">namespace</var> is not the
 <a href="#xmlns-namespace">XMLNS namespace</a>, <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.
 <li><p>If <var title="">namespace</var> is the <a href="#xmlns-namespace">XMLNS namespace</a>
 and neither <var title="">qualifiedName</var> nor <var title="">prefix</var> is
 "<code title="">xmlns</code>", <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.

 <li><p>Let <var title="">interface</var> be the
 <a href="#concept-element-interface" title="concept-element-interface">element interface</a> for
 <var title="">localName</var> and <var title="">namespace</var>.

 <li><p>Return a new <a href="#concept-element" title="concept-element">element</a> that implements <var title="">interface</var>,
 with no attributes,
 <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> set to <var title="">namespace</var>,
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> set to <var title="">prefix</var>,
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> set to <var title="">localName</var>, and
 <a href="#concept-node-document" title="concept-node-document">node document</a> set to the <a href="#context-object">context object</a>.
</ol>

<p>The
<dfn id="dom-document-createdocumentfragment" title="dom-Document-createDocumentFragment"><code>createDocumentFragment()</code></dfn>
method must return a new <code><a href="#documentfragment">DocumentFragment</a></code>
<a href="#concept-node" title="concept-node">node</a> with its
<a href="#concept-node-document" title="concept-node-document">node document</a> set to the
<a href="#context-object">context object</a>.

<p>The
<dfn id="dom-document-createtextnode" title="dom-Document-createTextNode"><code>createTextNode(<var title="">data</var>)</code></dfn>
method must return a new <code><a href="#text">Text</a></code>
<a href="#concept-node" title="concept-node">node</a> with its
<a href="#concept-cd-data" title="concept-CD-data">data</a> set to <var title="">data</var> and
<a href="#concept-node-document" title="concept-node-document">node document</a> set to the
<a href="#context-object">context object</a>.
<p class="note">No check is performed that <var title="">data</var> consists of
characters that match the <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Char">Char</a></code> production.

<p>The
<dfn id="dom-document-createcomment" title="dom-Document-createComment"><code>createComment(<var title="">data</var>)</code></dfn>
method must return a new <code><a href="#comment">Comment</a></code>
<a href="#concept-node" title="concept-node">node</a> with its
<a href="#concept-cd-data" title="concept-CD-data">data</a> set to <var title="">data</var> and
<a href="#concept-node-document" title="concept-node-document">node document</a> set to the
<a href="#context-object">context object</a>.
<p class="note">No check is performed that <var title="">data</var> consists of
characters that match the <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Char">Char</a></code> production
or that it contains two adjacent hyphens or ends with a hyphen.

<p>The <dfn id="dom-document-createprocessinginstruction" title="dom-Document-createProcessingInstruction"><code>createProcessingInstruction(<var title="">target</var>, <var title="">data</var>)</code></dfn> method must run these steps:

<ol>
 <li><p>If <var title="">target</var> does not match the
 <!--<code data-anolis-spec=xml>PITarget</code>-->
 <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps. <!-- DOM3 does not check for "xml" -->

 <li><p>If <var title="">data</var> contains the string
 "<code title="">?&gt;</code>", <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps. <!-- Gecko does this. -->

 <!--<li><p>If <var title>target</var> contains a U+003A COLON (":")
 character, <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception and terminate these steps.-->
 <!-- DOM3 didn't check this -->

 <li><p>Return a new <code><a href="#processinginstruction">ProcessingInstruction</a></code>
 <a href="#concept-node" title="concept-node">node</a>, with
 <a href="#concept-pi-target" title="concept-PI-target">target</a> set to <var title="">target</var>,
 <a href="#concept-cd-data" title="concept-CD-data">data</a> set to <var title="">data</var>, and
 <a href="#concept-node-document" title="concept-node-document">node document</a> set to the
 <a href="#context-object">context object</a>.
</ol>

<p class="note">No check is performed that <var title="">target</var> contains
"<code title="">xml</code>" or "<code title="">:</code>", or that
<var title="">data</var> contains characters that match the
<code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Char">Char</a></code> production.

<!--
[createAttribute]
<p>The <dfn title=dom-Document-createAttribute><code>createAttribute(<var title>name</var>)</code></dfn> method must run these steps:
<ol>
 <li><p>If <var title>name</var> does not match the <code data-anolis-spec=xml>Name</code> production in XML,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>"
 exception and terminate these steps.
 <li><p>Return a new <code>Attr</code> node with its <code title=dom-Node-namespaceURI>namespaceURI</code> set to null, <code title=dom-Node-prefix>prefix</code> set to null, <code title=dom-Node-localName>localName</code> set to <var title>name</var>, and <span title=concept-node-document>node document</span> set to the <span>context object</span>.
</ol>-->
<!-- this is different from DOM3 -->
<!--<p class=note>No check is performed that the local name will match the <code
data-anolis-spec=xmlns>NCName</code> production in Namespaces in XML.-->

<hr>

<dl class="domintro">
 <dt><var title="">clone</var> = <var title="">document</var> . <code title="dom-Document-importNode"><a href="#dom-document-importnode">importNode(<var>node</var> [, <var>deep</var>])</a></code>
 <dd>
 <dd>
  <p>Returns a copy of <var title="">node</var>. If
  <var title="">deep</var> is true or omitted, the copy also includes the
  <var title="">node</var> <a href="#concept-tree-child" title="concept-tree-child">children</a>.

  <p>If <var title="">node</var> is a
  <a href="#concept-document" title="concept-document">document</a> throws a
  "<code><a href="#notsupportederror">NotSupportedError</a></code>"
  exception.

 <dt><var title="">node</var> = <var title="">document</var> . <code title="dom-Document-adoptNode"><a href="#dom-document-adoptnode">adoptNode(<var>node</var>)</a></code>

 <dd>
  <p>Moves <var title="">node</var> from another
  <a href="#concept-document" title="concept-document">document</a> and returns it.

  <p>If <var title="">node</var> is a
  <a href="#concept-document" title="concept-document">document</a> throws a
  "<code><a href="#notsupportederror">NotSupportedError</a></code>"
  exception.
</dl>

<p>The
<dfn id="dom-document-importnode" title="dom-Document-importNode"><code>importNode(<var title="">node</var>, <var title="">deep</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">node</var> is a
 <a href="#concept-document" title="concept-document">document</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#notsupportederror">NotSupportedError</a></code>" exception and terminate these steps.

 <li><p>Return a <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
 <var title="">node</var>, with <i title="">document</i>
 <a href="#context-object">context object</a> and the <i title="">clone children flag</i> set if
 <var title="">deep</var> is true.
</ol>

<p>To <dfn id="concept-node-adopt" title="concept-node-adopt">adopt</dfn> a <var title="">node</var> into
a <var title="">document</var>, run these steps:

<ol>
 <li><p>If <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is not null,
 <a href="#concept-node-remove" title="concept-node-remove">remove</a> <var title="">node</var> from
 its <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>Set <a href="#concept-node-document" title="concept-node-document">node document</a> for
 <var title="">node</var> and all its
 <a href="#concept-tree-descendant" title="concept-tree-descendant">descendants</a>
 <!--AttrExodus as well as any associated <code>Attr</code> nodes-->
 to <var title="">document</var>.

 <li><p>If <var title="">node</var> is an
 <a href="#concept-element" title="concept-element">element</a>, it is
 <a href="#affected-by-a-base-url-change">affected by a base URL change</a>.
</ol>

<p>The
<dfn id="dom-document-adoptnode" title="dom-Document-adoptNode"><code>adoptNode(<var title="">node</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">node</var> is a
 <a href="#concept-document" title="concept-document">document</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#notsupportederror">NotSupportedError</a></code>" exception and terminate these steps.

 <li><p><a href="#concept-node-adopt" title="concept-node-adopt">Adopt</a> <var title="">node</var>
 into the <a href="#context-object">context object</a>.

 <li><p>Return <var title="">node</var>.
</ol>

<hr>

<p>The
<dfn id="dom-document-createevent" title="dom-Document-createEvent"><code>createEvent(<var title="">interface</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">event</var> be null.

 <li>
  <p>If <var title="">interface</var> is an
  <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for any of the strings in the
  first column in the following table, let <var title="">event</var> be the
  interface in the second column on the same row as the matching string:

  <table>
   <thead>
    <tr><th>String<th>Interface<td>Notes
   <tbody>
    <tr><td>"<code title="">customevent</code>"<td><code><a href="#customevent">CustomEvent</a></code><td rowspan="4">
    <tr><td>"<code title="">event</code>"<td rowspan="3"><code><a href="#event">Event</a></code>
    <tr><td>"<code title="">events</code>"
    <tr><td>"<code title="">htmlevents</code>"
    <tr><td>"<code title="">mouseevent</code>"<td rowspan="2"><code>MouseEvent</code><td rowspan="4"><a href="#refsUIEVENTS">[UIEVENTS]</a>
    <tr><td>"<code title="">mouseevents</code>"
    <tr><td>"<code title="">uievent</code>"<td rowspan="2"><code>UIEvent</code>
    <tr><td>"<code title="">uievents</code>"
  </table>
  <!-- XXX WebKit's architecture is broken here and both browsers support more than DOM.
       http://trac.webkit.org/browser/trunk/Source/WebCore/dom/EventNames.in
       http://mxr.mozilla.org/mozilla-central/source/content/events/src/nsEventDispatcher.cpp#819 -->

 <li><p>If <var title="">event</var> is null, <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#notsupportederror">NotSupportedError</a></code>".

 <li><p>Return a new <a href="#concept-event" title="concept-event">event</a> implementing the
 <var title="">event</var> interface.
</ol>

<p class="note"><a href="#concept-event" title="concept-event">Event</a> constructors can be used instead.

<hr>

<p>The <dfn id="dom-document-createrange" title="dom-Document-createRange"><code>createRange()</code></dfn>
method must return a new <a href="#concept-range" title="concept-range">range</a> with
(<a href="#context-object">context object</a>, 0) as its
<a href="#concept-range-start" title="concept-range-start">start</a> and
<a href="#concept-range-end" title="concept-range-end">end</a>.

<p class="note">The <code title="dom-Range"><a href="#dom-range">Range()</a></code> constructor can be used instead.

<hr>

<p>The
<dfn id="dom-document-createnodeiterator" title="dom-Document-createNodeIterator"><code>createNodeIterator(<var>root</var>, <var>whatToShow</var>, <var>filter</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Create a <code><a href="#nodeiterator">NodeIterator</a></code> object.
 <li><p>Set <a href="#concept-traversal-root" title="concept-traversal-root">root</a> and initialize
 the <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code>
 attribute to the <var title="">root</var> argument.
 <li><p>Initialize the
 <code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
 attribute to true.
 <li><p>Set <a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a> to
 the <var title="">whatToShow</var> argument.
 <li><p>Set <a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a> to
 <var title="">filter</var>.
 <li><p>Return the newly created <code><a href="#nodeiterator">NodeIterator</a></code> object.
</ol>

<p>The
<dfn id="dom-document-createtreewalker" title="dom-Document-createTreeWalker"><code>createTreeWalker(<var>root</var>, <var>whatToShow</var>, <var>filter</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Create a <code><a href="#treewalker">TreeWalker</a></code> object.
 <li><p>Set <a href="#concept-traversal-root" title="concept-traversal-root">root</a> and initialize
 the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute to
 the <var title="">root</var> argument.
 <li><p>Set <a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a> to
 the <var title="">whatToShow</var> argument.
 <li><p>Set <a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a> to
 <var title="">filter</var>.
 <li><p>Return the newly created <code><a href="#treewalker">TreeWalker</a></code> object.
</ol>


<h4 id="interface-domimplementation"><span class="secno">6.5.1 </span>Interface <code><a href="#domimplementation">DOMImplementation</a></code></h4>
<p>User agents must create a <code><a href="#domimplementation">DOMImplementation</a></code> object whenever
a <a href="#concept-document" title="concept-document">document</a> is created and associate it
with that <a href="#concept-document" title="concept-document">document</a>.

<pre class="idl">interface <dfn id="domimplementation">DOMImplementation</dfn> {
  <a href="#documenttype">DocumentType</a> <a href="#dom-domimplementation-createdocumenttype" title="dom-DOMImplementation-createDocumentType">createDocumentType</a>(DOMString qualifiedName, DOMString publicId, DOMString systemId);
  <a href="#xmldocument">XMLDocument</a> <a href="#dom-domimplementation-createdocument" title="dom-DOMImplementation-createDocument">createDocument</a>(DOMString? <var title="">namespace</var>, [TreatNullAs=EmptyString] DOMString <var title="">qualifiedName</var>, <a href="#documenttype">DocumentType</a>? <var title="">doctype</var>);
  <a href="#document">Document</a> <a href="#dom-domimplementation-createhtmldocument" title="dom-DOMImplementation-createHTMLDocument">createHTMLDocument</a>(optional DOMString <var title="">title</var>);

  boolean <a href="#dom-domimplementation-hasfeature" title="dom-DOMImplementation-hasFeature">hasFeature</a>(DOMString feature, [TreatNullAs=EmptyString] DOMString version);
};</pre>

<dl class="domintro">
 <dt><var title="">doctype</var> = <var title="">document</var> . <code title="dom-Document-implementation"><a href="#dom-document-implementation">implementation</a></code> . <code title="dom-DOMImplementation-createDocumentType"><a href="#dom-domimplementation-createdocumenttype">createDocumentType</a></code>(
 <var title="">qualifiedName</var>, <var title="">publicId</var>, <var title="">systemId</var> )

 <dd>
  <p>Returns a <a href="#concept-doctype" title="concept-doctype">doctype</a>, with the given
  <var title="">qualifiedName</var>, <var title="">publicId</var>, and
  <var title="">systemId</var>. If <var title="">qualifiedName</var> does not
  match the <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production, an
  "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>"
  exception is thrown, and if it does not match the
  <code class="external" data-anolis-spec="xmlns"><a href="http://www.w3.org/TR/xml-names/#NT-QName">QName</a></code> production, a
  "<code><a href="#namespaceerror">NamespaceError</a></code>" exception
  is thrown.


 <dt><var title="">doc</var> = <var title="">document</var> . <code title="dom-Document-implementation"><a href="#dom-document-implementation">implementation</a></code> . <code title="dom-DOMImplementation-createDocument"><a href="#dom-domimplementation-createdocument">createDocument</a></code>( <var title="">namespace</var>, <var title="">qualifiedName</var>, <var title="">doctype</var> )

 <dd>
  <p>Returns an <code><a href="#xmldocument">XMLDocument</a></code>, with a
  <a href="#document-element">document element</a> whose
  <a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is
  <var title="">qualifiedName</var> and whose
  <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> is
  <var title="">namespace</var> (unless <var title="">qualifiedName</var> is the
  empty string), and with <var title="">doctype</var>, if it is given, as its
  <a href="#concept-doctype" title="concept-doctype">doctype</a>.

  <p>This method throws the same exceptions as the <code title="dom-Document-createElementNS"><a href="#dom-document-createelementns">createElementNS</a></code> method, when
  invoked with the same arguments.


 <dt><code><var title="">doc</var> = <var title="">document</var> . <a href="#dom-document-implementation" title="dom-Document-implementation">implementation</a> . <a href="#dom-domimplementation-createhtmldocument" title="dom-DOMImplementation-createHTMLDocument">createHTMLDocument</a>([<var title="">title</var>])</code>

 <dd>
  <p>Returns a <a href="#concept-document" title="concept-document">document</a>, with a basic
  <a href="#concept-tree" title="concept-tree">tree</a> already constructed including a
  <code title="">title</code> element, unless the <var title="">title</var>
  argument is omitted.

 <dt><code><var title="">document</var> .
 <a href="#dom-document-implementation" title="dom-Document-implementation">implementation</a> .
 <a href="#dom-domimplementation-hasfeature" title="dom-DOMImplementation-hasFeature">hasFeature</a>(
 <var title="">feature</var>, <var title="">version</var>)</code>

 <dd>
  <p>If <var title="">feature</var> is an
  <a href="http://www.w3.org/TR/SVG/feature.html">SVG feature</a> string,
  returns whether that feature is supported.  If <var title="">feature</var> is
  not the empty string, only returns true if the feature is supported as
  defined in the given version of the SVG specification (e.g.,
  "<code title="">1.1</code>").

  <p>If <var title="">feature</var> is not an SVG feature, but rather some other
  string like "<code title="">HTML</code>" or
  "<code title="">flibbertigibbet</code>", always returns true.  Thus, this method
  is only useful for testing SVG features.
</dl>

<div class="impl">

<p>The
<dfn id="dom-domimplementation-createdocumenttype" title="dom-DOMImplementation-createDocumentType"><code>createDocumentType(<var>qualifiedName</var>, <var>publicId</var>, <var>systemId</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">qualifiedName</var> does not match the
 <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps.
 <li><p>If <var title="">qualifiedName</var> does not match the <code class="external" data-anolis-spec="xmlns"><a href="http://www.w3.org/TR/xml-names/#NT-QName">QName</a></code> production in,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.
 <!--<li><p>If <var title>publicId</var> contains a character that does not
 match the <code data-anolis-spec=xml>PubidChar</code> production in XML,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>"
 exception and terminate these steps. --> <!-- DOM3 didn't check this -->
 <!--<li><p>If <var title>systemId</var> contains both a U+0022 QUOTATION MARK ('"') and a U+0027 APOSTROPHE ("'") character,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>"
 exception and terminate these steps.--> <!-- DOM3 didn't check this -->
 <li><p>Return a new <a href="#concept-doctype" title="concept-doctype">doctype</a>, with
 <var title="">qualifiedName</var> as its
 <a href="#concept-doctype-name" title="concept-doctype-name">name</a>, <var title="">publicId</var> as
 its <a href="#concept-doctype-publicid" title="concept-doctype-publicid">public ID</a>, and
 <var title="">systemId</var> as its
 <a href="#concept-doctype-systemid" title="concept-doctype-systemid">system ID</a>, and with its
 <a href="#concept-node-document" title="concept-node-document">node document</a> set to the
 associated <a href="#concept-document" title="concept-document">document</a> of the
 <a href="#context-object">context object</a>.
</ol>
<p class="note">No check is performed that the <var title="">publicId</var>
matches the <code title="">PublicChar</code> or that the
<var title="">systemId</var> does not contain both a '<code title="">"</code>' and
"<code title="">'</code>".

<p>The
<dfn id="dom-domimplementation-createdocument" title="dom-DOMImplementation-createDocument"><code>createDocument(<var>namespace</var>, <var>qualifiedName</var>, <var>doctype</var>)</code></dfn>
method must run these steps:

<ol>
 <li>
  <p>Let <var title="">document</var> be a new <code><a href="#xmldocument">XMLDocument</a></code>.

  <p class="note">This method creates an <code><a href="#xmldocument">XMLDocument</a></code> rather than
  a normal <a href="#concept-document" title="concept-document">document</a>. They are identical
  except for the addition of the
  <code class="external" data-anolis-spec="html" title="dom-XMLDocument-load"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-xmldocument-load">load()</a></code>
  method deployed content relies upon.
  <a href="#refsHTML">[HTML]</a>

 <li><p>Let <var title="">element</var> be null.

 <li><p>If <var title="">qualifiedName</var> is not the empty string, set
 <var title="">element</var> to the result of invoking the
 <code title="dom-Document-createElementNS"><a href="#dom-document-createelementns">createElementNS()</a></code> method
 with the arguments <var title="">namespace</var> and
 <var title="">qualifiedName</var> on <var title="">document</var>. If that threw
 an exception, re-throw the exception and terminate these steps.

 <li><p>If <var title="">doctype</var> is not null,
 <a href="#concept-node-append" title="concept-node-append">append</a>
 <var title="">doctype</var> to <var title="">document</var>.

 <li><p>If <var title="">element</var> is not null,
 <a href="#concept-node-append" title="concept-node-append">append</a>
 <var title="">element</var> to <var title="">document</var>.

 <li><p><var title="">document</var>'s
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> is an
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> to the
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> of the
 <a href="#context-object">context object</a>'s associated
 <a href="#concept-document" title="concept-document">document</a>, and
 <var title="">document</var>'s
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> is an
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> to the
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> of the
 <a href="#context-object">context object</a>'s associated
 <a href="#concept-document" title="concept-document">document</a>.
 <a href="#refsHTML">[HTML]</a>

 <li><p>Return <var title="">document</var>.
</ol>

<p>The
<dfn id="dom-domimplementation-createhtmldocument" title="dom-DOMImplementation-createHTMLDocument"><code>createHTMLDocument(<var>title</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">doc</var> be a new
 <a href="#concept-document" title="concept-document">document</a> that is an
 <a href="#html-document">HTML document</a>.

 <li><p>Set <var title="">doc</var>'s
 <a href="#concept-document-content-type" title="concept-document-content-type">content type</a> to
 "<code title="">text/html</code>".

 <li><p>Create a <a href="#concept-doctype" title="concept-doctype">doctype</a>, with
 "<code title="">html</code>"
 as its <a href="#concept-doctype-name" title="concept-doctype-name">name</a> and with its
 <a href="#concept-node-document" title="concept-node-document">node document</a> set to
 <var title="">doc</var>. <a href="#concept-node-append" title="concept-node-append">Append</a>
 the newly created node to <var title="">doc</var>.

 <li><p>Create an <code title="">html</code> element in the <a href="#html-namespace">HTML
 namespace</a>, and <a href="#concept-node-append" title="concept-node-append">append</a>
 it to <var title="">doc</var>.

 <li><p>Create a <code title="">head</code> element in the <a href="#html-namespace">HTML
 namespace</a>, and  <a href="#concept-node-append" title="concept-node-append">append</a>
 it to the <code title="">html</code> element created in the previous step.

 <li>
  <p>If the <var title="">title</var> argument is not omitted:

  <ol>
   <li><p>Create a <code title="">title</code> element in the
   <a href="#html-namespace">HTML namespace</a>, and
   <a href="#concept-node-append" title="concept-node-append">append</a> it to the
   <code title="">head</code> element created in the previous step.

   <li><p>Create a <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>,
   set its <a href="#concept-cd-data" title="concept-CD-data">data</a> to <var title="">title</var>
   (which could be the empty string), and
   <a href="#concept-node-append" title="concept-node-append">append</a> it to the
   <code title="">title</code> element created in the previous step.
  </ol>

 <li><p>Create a <code title="">body</code> element in the
 <a href="#html-namespace">HTML namespace</a>, and
 <a href="#concept-node-append" title="concept-node-append">append</a> it to the
 <code title="">html</code> element created in the earlier step.

 <li><p><var title="">doc</var>'s
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> is an
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> to the
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a> of the
 <a href="#context-object">context object</a>'s associated
 <a href="#concept-document" title="concept-document">document</a>, and
 <var title="">doc</var>'s
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> is an
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#concept-origin-alias" title="concept-origin-alias">alias</a> to the
 <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#effective-script-origin">effective script origin</a> of the
 <a href="#context-object">context object</a>'s associated
 <a href="#concept-document" title="concept-document">document</a>.
 <a href="#refsHTML">[HTML]</a>

 <li><p>Return <var title="">doc</var>.
</ol>

<p>The <dfn id="dom-domimplementation-hasfeature" title="dom-DOMImplementation-hasFeature"><code>hasFeature(<var title="">feature</var>, <var title="">version</var>)</code></dfn> method must run
these steps:

<ol>
 <li><p>If <var title="">feature</var> begins with an
 <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for one of the strings
 "<code title="">http://www.w3.org/TR/SVG</code>",
 "<code title="">org.w3c.dom.svg</code>", or "<code title="">org.w3c.svg</code>":

 <ol>
  <li><p>If <var title="">version</var> is the empty string:

  <ol>
   <li><p>Return true if there is some SVG specification that defines a feature
   that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for
   <var title="">feature</var>, and the user agent meets all the requirements of
   that specification for that feature. Otherwise, return false.
  </ol>

  <li><p>Return true if <var title="">version</var> is the version identifier for
  a known SVG specification, and that specification defines a feature that is
  an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for <var title="">feature</var>,
  and the user agent meets all the requirements of that specification for that
  feature. Otherwise, return false.

  <p class="XXX">What happens if a feature is only defined in 1.1 but the version
  string passed is 1.0?  Most UAs return true in this case too, but do we want
  to spec that?
 </ol>

 <li><p>Return true.
</ol>

<p class="note"><code title="dom-DOMImplementation-hasFeature"><a href="#dom-domimplementation-hasfeature">hasFeature()</a></code>
originally would report whether the user agent claimed to support a given DOM
feature, but experience proved it was not nearly as reliable or granular as
simply checking whether the desired interfaces, attributes, or methods existed.
As such, it should no longer be used, but continues to exist (and simply
returns true) so that old pages don't stop working.  SVG features are a
separate mechanism that reused the existing method, so they continue to work as
a special case.

</div>


<h3 id="interface-documentfragment"><span class="secno">6.6 </span>Interface <code><a href="#documentfragment">DocumentFragment</a></code></h3>
<pre class="idl">[<a href="#dom-documentfragment" title="dom-DocumentFragment">Constructor</a>]
interface <dfn id="documentfragment">DocumentFragment</dfn> : <a href="#node">Node</a> {
};</pre>

<p>A <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a> can have an
associated <a href="#concept-element" title="concept-element">element</a> named
<dfn id="concept-documentfragment-host" title="concept-DocumentFragment-host">host</dfn>.

<p>A
<dfn id="concept-tree-host-including-inclusive-ancestor" title="concept-tree-host-including-inclusive-ancestor">host-including inclusive ancestor</dfn>
is either an <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> or a
<a href="#concept-tree-host-including-inclusive-ancestor" title="concept-tree-host-including-inclusive-ancestor">host-including inclusive ancestor</a>
of an object's <a href="#concept-tree-root" title="concept-tree-root">root</a>'s
<a href="#concept-documentfragment-host" title="concept-DocumentFragment-host">host</a>, if any.

<p class="note">The <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a>'s
<a href="#concept-documentfragment-host" title="concept-DocumentFragment-host">host</a> concept is useful for HTML's
<code>template</code> element and the <code>ShadowRoot</code> object and impacts the
<a href="#concept-node-pre-insert" title="concept-node-pre-insert">pre-insert</a> and
<a href="#concept-node-replace" title="concept-node-replace">replace</a> algorithms.

<!-- XXX xref
     XXX ShadowRoot is a Node technically -->

<dl class="domintro">
 <dt><code><var title="">tree</var> = new <a href="#dom-documentfragment" title="dom-DocumentFragment">DocumentFragment</a>()</code>
 <dd><p>Returns a new <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a>.
</dl>

<p>The <dfn id="dom-documentfragment" title="dom-DocumentFragment"><code>DocumentFragment()</code></dfn> constructor
must return a new <code><a href="#documentfragment">DocumentFragment</a></code> <a href="#concept-node" title="concept-node">node</a> whose
<a href="#concept-node-document" title="concept-node-document">node document</a> is the global object's associated
<a href="#concept-document" title="concept-document">document</a>.


<h3 id="interface-documenttype"><span class="secno">6.7 </span>Interface <code><a href="#documenttype">DocumentType</a></code></h3>
<pre class="idl">interface <dfn id="documenttype">DocumentType</dfn> : <a href="#node">Node</a> {
  readonly attribute DOMString <a href="#dom-documenttype-name" title="dom-DocumentType-name">name</a>;
  readonly attribute DOMString <a href="#dom-documenttype-publicid" title="dom-DocumentType-publicId">publicId</a>;
  readonly attribute DOMString <a href="#dom-documenttype-systemid" title="dom-DocumentType-systemId">systemId</a>;<!--
  readonly attribute DOMString internalSubset;-->
};</pre>

<p><code><a href="#documenttype">DocumentType</a></code> <a href="#concept-node" title="concept-node">nodes</a> are
simply known as <dfn id="concept-doctype" title="concept-doctype">doctypes</dfn>.

<p><a href="#concept-doctype" title="concept-doctype">Doctypes</a> have an associated
<dfn id="concept-doctype-name" title="concept-doctype-name">name</dfn>,
<dfn id="concept-doctype-publicid" title="concept-doctype-publicid">public ID</dfn>, and
<dfn id="concept-doctype-systemid" title="concept-doctype-systemid">system ID</dfn>.

<p>When a <a href="#concept-doctype" title="concept-doctype">doctype</a> is created, its
<a href="#concept-doctype-name" title="concept-doctype-name">name</a> is always given. Unless
explicitly given when a <a href="#concept-doctype" title="concept-doctype">doctype</a> is
created, its <a href="#concept-doctype-publicid" title="concept-doctype-publicid">public ID</a> and
<a href="#concept-doctype-systemid" title="concept-doctype-systemid">system ID</a> are the empty string.

<p>The <dfn id="dom-documenttype-name" title="dom-DocumentType-name"><code>name</code></dfn> attribute
must return the <a href="#concept-doctype-name" title="concept-doctype-name">name</a>.

<p>The <dfn id="dom-documenttype-publicid" title="dom-DocumentType-publicId"><code>publicId</code></dfn>
attribute must return the
<a href="#concept-doctype-publicid" title="concept-doctype-publicid">public ID</a>.

<p>The <dfn id="dom-documenttype-systemid" title="dom-DocumentType-systemId"><code>systemId</code></dfn>
attribute must return the
<a href="#concept-doctype-systemid" title="concept-doctype-systemid">system ID</a>.


<!-- AttrExodus
<h3>Interface <code>Attr</code></h3>

<p>The tentative plan is to let <code>Attr</code> no longer have
child nodes and turn it into a very lightweight object that no longer
inherits from <code>Node</code> &mdash;
<a href=http://lists.w3.org/Archives/Public/public-webapps/2010JulSep/0797.html>http://lists.w3.org/Archives/Public/public-webapps/2010JulSep/0797.html</a>

<pre class=idl>interface <dfn>Attr</dfn> : <span>Node</span> {
  readonly attribute DOMString <span title=dom-Attr-name>name</span>;
  readonly attribute boolean <span title=dom-Attr-specified>specified</span>;
           attribute DOMString <span title=dom-Attr-value>value</span>;
  readonly attribute <span>Element</span> <span title=dom-Attr-ownerElement>ownerElement</span>;<!- -
  readonly attribute boolean isId;- ->
};</pre>

<p><code>Attr</code> nodes represent <dfn
title=concept-attribute>attributes</dfn>. They have a <dfn
title=concept-attribute-name>name</dfn> and an <dfn
title=concept-attribute-element>element</dfn> associated with them when they are
created<!- -, or when they are passed as the argument to the <code
title=dom-Element-setAttributeNode>setAttributeNode</code> method.
[createAttribute]- ->. <code>Attr</code> nodes are not considered part of the
document tree, so their <code title=dom-Node-parentNode>parentNode</code>, <code
title=dom-Node-previousSibling>previousSibling</code> and <code
title=dom-Node-nextSibling>nextSibling</code> attributes return null. Also, its
child nodes can not be manipulated directly through the <code
title=dom-Node-insertBefore>insertBefore</code>, <code
title=dom-Node-replaceChild>replaceChild</code> and <code
title=dom-Node-appendChild>appendChild</code> methods.

<p>The <dfn title=dom-Attr-name><code>name</code></dfn> attribute must return
the <span title=concept-attribute-name>name</span> associated with the
<span>context object</span>.

<p>The <dfn title=dom-Attr-specified><code>specified</code></dfn> attribute must
return true.

<p>The <dfn title=dom-Attr-value><code>value</code></dfn> attribute must return the value of the <span>context object</span>'s
<code title=dom-Node-textContent>textContent</code> attribute and on
setting, must set the <span>context object</span>'s
<code title=dom-Node-textContent>textContent</code> attribute to the new
value.

<p>The <dfn title=dom-Attr-ownerElement><code>ownerElement</code></dfn>
attribute must return the <span title=concept-attribute-element>element</span>
associated with the <span>context object</span><!- -, if there is one, or null
otherwise [createAttribute]- ->.
-->


<h3 id="interface-element"><span class="secno">6.8 </span>Interface <code><a href="#element">Element</a></code></h3>
<pre class="idl">interface <dfn id="element">Element</dfn> : <a href="#node">Node</a> {
  readonly attribute DOMString? <a href="#dom-element-namespaceuri" title="dom-Element-namespaceURI">namespaceURI</a>;
  readonly attribute DOMString? <a href="#dom-element-prefix" title="dom-Element-prefix">prefix</a>;
  readonly attribute DOMString <a href="#dom-element-localname" title="dom-Element-localName">localName</a>;
  readonly attribute DOMString <a href="#dom-element-tagname" title="dom-Element-tagName">tagName</a>;

           attribute DOMString <a href="#dom-element-id" title="dom-Element-id">id</a>;
           attribute DOMString <a href="#dom-element-classname" title="dom-Element-className">className</a>;
  readonly attribute <a href="#domtokenlist">DOMTokenList</a> <a href="#dom-element-classlist" title="dom-Element-classList">classList</a>;

  readonly attribute <a href="#attr">Attr</a>[] <a href="#dom-element-attributes" title="dom-Element-attributes">attributes</a>;
  DOMString? <a href="#dom-element-getattribute" title="dom-Element-getAttribute">getAttribute</a>(DOMString <var title="">name</var>);
  DOMString? <a href="#dom-element-getattributens" title="dom-Element-getAttributeNS">getAttributeNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">localName</var>);
  void <a href="#dom-element-setattribute" title="dom-Element-setAttribute">setAttribute</a>(DOMString <var title="">name</var>, DOMString <var title="">value</var>);
  void <a href="#dom-element-setattributens" title="dom-Element-setAttributeNS">setAttributeNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">name</var>, DOMString <var title="">value</var>);
  void <a href="#dom-element-removeattribute" title="dom-Element-removeAttribute">removeAttribute</a>(DOMString <var title="">name</var>);
  void <a href="#dom-element-removeattributens" title="dom-Element-removeAttributeNS">removeAttributeNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">localName</var>);
  boolean <a href="#dom-element-hasattribute" title="dom-Element-hasAttribute">hasAttribute</a>(DOMString <var title="">name</var>);
  boolean <a href="#dom-element-hasattributens" title="dom-Element-hasAttributeNS">hasAttributeNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">localName</var>);
<!--
  <span>Attr</span> <span title=dom-Element-getAttributeNode>getAttributeNode</span>(DOMString name);
  <span>Attr</span> <span title=dom-Element-getAttributeNodeNS>getAttributeNodeNS</span>(DOMString namespace, DOMString localName);
  <span>Attr</span> <span title=dom-Element-setAttributeNode>setAttributeNode</span>(Attr newAttr);
  <span>Attr</span> <span title=dom-Element-removeAttributeNode>removeAttributeNode</span>(Attr oldAttr);
-->
  <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-element-getelementsbytagname" title="dom-Element-getElementsByTagName">getElementsByTagName</a>(DOMString <var title="">localName</var>);
  <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-element-getelementsbytagnamens" title="dom-Element-getElementsByTagNameNS">getElementsByTagNameNS</a>(DOMString? <var title="">namespace</var>, DOMString <var title="">localName</var>);
  <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-element-getelementsbyclassname" title="dom-Element-getElementsByClassName">getElementsByClassName</a>(DOMString <var title="">classNames</var>);
};</pre>

<p><code><a href="#element">Element</a></code> <a href="#concept-node" title="concept-node">nodes</a> are simply
known as <dfn id="concept-element" title="concept-element">elements</dfn>.</p>

<p><a href="#concept-element" title="concept-element">Elements</a> have an associated
<dfn id="concept-element-namespace" title="concept-element-namespace">namespace</dfn>,
<dfn id="concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</dfn>, and
<dfn id="concept-element-local-name" title="concept-element-local-name">local name</dfn>. When an
<a href="#concept-element" title="concept-element">element</a> is created, its
<a href="#concept-element-local-name" title="concept-element-local-name">local name</a> is always given.
Unless explicitly given when an <a href="#concept-element" title="concept-element">element</a>
is created, its <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a> and
<a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> are
null.

<p><a href="#concept-element" title="concept-element">Elements</a> also have an ordered
<dfn id="concept-element-attribute" title="concept-element-attribute">attribute list</dfn>. Unless
explicitly given when an <a href="#concept-element" title="concept-element">element</a> is
created, its
<a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a> is empty. An
<a href="#concept-element" title="concept-element">element</a>
<dfn id="concept-element-attribute-has" title="concept-element-attribute-has">has</dfn> an
<a href="#concept-attribute" title="concept-attribute">attribute</a> <var title="">A</var> if
<var title="">A</var> is in its
<a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.

<p><a href="#other-applicable-specifications" title="Other applicable specifications">Applicable specifications</a>
and this specification (can) use the hooks an <dfn id="attribute-is-set">attribute is set</dfn>,
an <dfn id="attribute-is-changed">attribute is changed</dfn>, an <dfn id="attribute-is-added">attribute is added</dfn>, and
an <dfn id="attribute-is-removed">attribute is removed</dfn>, for further processing of the
<a href="#concept-attribute" title="concept-attribute">attribute</a>'s
<a href="#concept-attribute-value" title="concept-attribute-value">value</a>.

<p>To <dfn id="concept-element-attributes-get" title="concept-element-attributes-get">get an attribute</dfn> for
an <a href="#concept-element" title="concept-element">element</a> <var title="">element</var>
using a <var title="">local name</var> and optionally a
<var title="">namespace</var>, run these steps:

<ol>
 <li><p>If <var title="">namespace</var> is not given, set it to null.

 <li><p>Return the <a href="#concept-attribute-value" title="concept-attribute-value">value</a> of the
 <a href="#concept-attribute" title="concept-attribute">attribute</a> in <var title="">element</var>'s
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a> whose
 <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is
 <var title="">namespace</var> and
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
 <var title="">localName</var>, if it has one, and null otherwise.
</ol>

<p>To <dfn id="concept-element-attributes-set" title="concept-element-attributes-set">set an attribute</dfn> for
an <a href="#concept-element" title="concept-element">element</a> <var title="">element</var>
using a <var title="">local name</var> and <var title="">value</var>, and
optionally a <var title="">name</var>, <var title="">prefix</var>, and
<var title="">namespace</var>, run these steps:

<ol>
 <li><p>If <var title="">name</var> is not given, set it to
 <var title="">local name</var>.

 <li><p>If <var title="">prefix</var> is not given, set it to null.

 <li><p>If <var title="">namespace</var> is not given, set it to null.

 <li><p>Let <var title="">attribute</var> be the
 <a href="#concept-attribute" title="concept-attribute">attribute</a> in
 <var title="">element</var>'s
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>
 whose <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is
 <var title="">namespace</var> and whose
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>
 is <var title="">local name</var>, or null if there is no such
 <a href="#concept-attribute" title="concept-attribute">attribute</a>.

 <li><p>If <var title="">attribute</var> is null, create an
 <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
 <var title="">local name</var>,
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a> is <var title="">value</var>,
 <a href="#concept-attribute-name" title="concept-attribute-name">name</a> is <var title="">name</var>,
 <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is
 <var title="">namespace</var>, and
 <a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a> is
 <var title="">prefix</var>, and then
 <a href="#concept-element-attributes-append" title="concept-element-attributes-append">append</a> this
 <a href="#concept-attribute" title="concept-attribute">attribute</a> to <var title="">element</var>
 and terminate these steps.

 <li><p><a href="#concept-element-attributes-change" title="concept-element-attributes-change">Change</a>
 <var title="">attribute</var> from <var title="">element</var> to
 <var title="">value</var>.
</ol>

<p>To <dfn id="concept-element-attributes-change" title="concept-element-attributes-change">change</dfn> an
<a href="#concept-attribute" title="concept-attribute">attribute</a> <var title="">attribute</var>
from an <a href="#concept-element" title="concept-element">element</a> <var title="">element</var>
to <var title="">value</var>, run these steps:

<ol>
 <li><p><a href="#queue-a-mutation-record">Queue a mutation record</a> of "<code>attributes</code>"
 for <var title="">element</var> with name <var title="">attribute</var>'s
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>, namespace
 <var title="">attribute</var>'s
 <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a>, and oldValue
 <var title="">attribute</var>'s
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a>.

 <li><p>Set <var title="">attribute</var>'s
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a> to <var title="">value</var>.

 <li><p>An <a href="#attribute-is-set">attribute is set</a> and an
 <a href="#attribute-is-changed">attribute is changed</a>.
</ol>

<p>To <dfn id="concept-element-attributes-append" title="concept-element-attributes-append">append</dfn> an
<a href="#concept-attribute" title="concept-attribute">attribute</a> <var title="">attribute</var> to
an <a href="#concept-element" title="concept-element">element</a> <var title="">element</var>,
run these steps:

<ol>
 <li><p><a href="#queue-a-mutation-record">Queue a mutation record</a> of "<code>attributes</code>"
 for <var title="">element</var> with name <var title="">attribute</var>'s
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>, namespace
 <var title="">attribute</var>'s
 <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a>, and oldValue
 null.

 <li><p>Append the <var title="">attribute</var> to the <var title="">element</var>'s
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.

 <li><p>An <a href="#attribute-is-set">attribute is set</a> and an
 <a href="#attribute-is-added">attribute is added</a>.
</ol>

<p>To <dfn id="concept-element-attributes-remove" title="concept-element-attributes-remove">remove</dfn> an
<a href="#concept-attribute" title="concept-attribute">attribute</a> <var title="">attribute</var>
from an <a href="#concept-element" title="concept-element">element</a> <var title="">element</var>,
run these steps:

<ol>
 <li><p><a href="#queue-a-mutation-record">Queue a mutation record</a> of "<code>attributes</code>"
 for <var title="">element</var> with name <var title="">attribute</var>'s
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>, namespace
 <var title="">attribute</var>'s
 <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a>, and oldValue
 <var title="">attribute</var>'s
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a>.

 <li><p>Remove the <var title="">attribute</var> from the
 <var title="">element</var>'s
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.

 <li><p>An <a href="#attribute-is-removed">attribute is removed</a>.
</ol>

<hr>

<p><a href="#concept-element" title="concept-element">Elements</a> can have an associated
<dfn id="concept-id" title="concept-id">unique identifier (ID)</dfn> and have an associated
<code><a href="#domtokenlist">DOMTokenList</a></code> object. The <code><a href="#domtokenlist">DOMTokenList</a></code> object's
associated <a href="#concept-attribute" title="concept-attribute">attribute</a>'s
<a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
<code title="">class</code> and its associated list of unique tokens is called
the <a href="#concept-element" title="concept-element">element</a>'s
<dfn id="concept-class" title="concept-class">classes</dfn>.

<p class="note">Historically <a href="#concept-element" title="concept-element">elements</a> could
have multiple identifiers e.g. by using the HTML <code title="">id</code>
<a href="#concept-attribute" title="concept-attribute">attribute</a> and a DTD. This specification
makes <a href="#concept-id" title="concept-id">ID</a> a concept of the DOM and allows for
only one per <a href="#concept-element" title="concept-element">element</a>, given by an
<a href="#concept-named-attribute" title="concept-named-attribute"><code>id</code> attribute</a>.

<p>Either when an <a href="#concept-element" title="concept-element">element</a> is created that
<a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> an
<a href="#concept-named-attribute" title="concept-named-attribute"><code>id</code> attribute</a> whose
<a href="#concept-attribute-value" title="concept-attribute-value">value</a> is not the empty string or
when an <a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-named-attribute" title="concept-named-attribute"><code>id</code> attribute</a> is
<a href="#attribute-is-set" title="attribute is set">set</a> to a
<a href="#concept-attribute-value" title="concept-attribute-value">value</a> other than the empty
string, set the <a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-id" title="concept-id">ID</a> to the new
<a href="#concept-attribute-value" title="concept-attribute-value">value</a>.

<p>When an <a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-named-attribute" title="concept-named-attribute"><code>id</code> attribute</a> is
<a href="#attribute-is-removed" title="attribute is removed">removed</a>, unset the
<a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-id" title="concept-id">ID</a>.

<p>Either when an <a href="#concept-element" title="concept-element">element</a> is created that
<a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> a
<a href="#concept-named-attribute" title="concept-named-attribute"><code>class</code> attribute</a> or
when an <a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-named-attribute" title="concept-named-attribute"><code>class</code> attribute</a> is
<a href="#attribute-is-set" title="attribute is set">set</a> to a
<a href="#concept-attribute-value" title="concept-attribute-value">value</a> other than the empty
string, set the <a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-class" title="concept-class">classes</a> to the new
<a href="#concept-attribute-value" title="concept-attribute-value">value</a>,
<a href="#concept-set-parser" title="concept-set-parser">parsed</a>.

<p>When an <a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-named-attribute" title="concept-named-attribute"><code>class</code> attribute</a> is
<a href="#attribute-is-removed" title="attribute is removed">removed</a>, set the
<a href="#concept-element" title="concept-element">element</a>'s
<a href="#concept-class" title="concept-class">classes</a> to the empty list.

<p class="note">While this specification defines user agent processing
requirements for <code title="">id</code> and <code title="">class</code>
<a href="#concept-attribute" title="concept-attribute">attributes</a> on any
<a href="#concept-element" title="concept-element">element</a>, it makes no claims as to whether
using them is conforming or not.

<hr>

<p>A <a href="#concept-node" title="concept-node">node</a>'s
<a href="#concept-tree-parent" title="concept-tree-parent">parent</a> of type
<code><a href="#element">Element</a></code> is known as a <dfn id="parent-element">parent element</dfn>. If the
<a href="#concept-node" title="concept-node">node</a> has a
<a href="#concept-tree-parent" title="concept-tree-parent">parent</a> of a different type, its
<a href="#parent-element">parent element</a> is null.</p>

<p>The <dfn id="document-element">document element</dfn> of a
<a href="#concept-document" title="concept-document">document</a> is the
<a href="#concept-element" title="concept-element">element</a> whose
<a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is that
<a href="#concept-document" title="concept-document">document</a>, if it exists, and null otherwise.

<p class="note">Per the <a href="#concept-node-tree" title="concept-node-tree">node tree</a>
constraints, there can only be one such
<a href="#concept-element" title="concept-element">element</a>.

<p>When an <a href="#concept-element" title="concept-element">element</a> or one of its
<a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestors</a> is the
<a href="#document-element">document element</a>, it is <dfn id="in-a-document">in a document</dfn>.

<hr>

<p>Specifications may define <dfn id="base-url-change-steps">base URL change steps</dfn>.

<p>When an <a href="#concept-element" title="concept-element">element</a> is
<dfn id="affected-by-a-base-url-change">affected by a base URL change</dfn>, the user agent must run the
<a href="#base-url-change-steps">base URL change steps</a>, as defined in
<a href="#other-applicable-specifications">other applicable specifications</a>.

<hr>

<dl class="domintro">
 <dt><var title="">namespace</var> = <var title="">element</var> . <code title="dom-Element-namespaceURI"><a href="#dom-element-namespaceuri">namespaceURI</a></code>
 <dd><p>Returns the <a href="#concept-element-namespace" title="concept-element-namespace">namespace</a>.

 <dt><var title="">prefix</var> = <var title="">element</var> . <code title="dom-Element-prefix"><a href="#dom-element-prefix">prefix</a></code>
 <dd><p>Returns the
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>.

 <dt><var title="">localName</var> = <var title="">element</var> . <code title="dom-Element-localName"><a href="#dom-element-localname">localName</a></code>
 <dd><p>Returns the
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>.

 <dt><var title="">qualifiedName</var> = <var title="">element</var> . <code title="dom-Element-tagName"><a href="#dom-element-tagname">tagName</a></code>
 <dd><p>If
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> is not
 null, returns the concatenation of
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>,
 "<code title="">:</code>", and
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>. Otherwise it
 returns the <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>.
 (The return value is uppercased in an <a href="#html-document">HTML document</a>.)
</dl>

<p>The <dfn id="dom-element-namespaceuri" title="dom-Element-namespaceURI"><code>namespaceURI</code></dfn>
attribute must return the <a href="#context-object">context object</a>'s
<a href="#concept-element-namespace" title="concept-element-namespace">namespace</a>.

<p>The <dfn id="dom-element-prefix" title="dom-Element-prefix"><code>prefix</code></dfn> attribute must return the <a href="#context-object">context object</a>'s
<a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>.

<p>The <dfn id="dom-element-localname" title="dom-Element-localName"><code>localName</code></dfn>
attribute must return the <a href="#context-object">context object</a>'s
<a href="#concept-element-local-name" title="concept-element-local-name">local name</a>.

<p>The <dfn id="dom-element-tagname" title="dom-Element-tagName"><code>tagName</code></dfn> attribute
must run these steps:
<ol>
 <li><p>If <a href="#context-object">context object</a>'s
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a> is not
 null, let <var title="">qualified name</var> be its
 <a href="#concept-element-namespace-prefix" title="concept-element-namespace-prefix">namespace prefix</a>, followed
 by a "<code>:</code>" (U+003A), followed by its
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>. Otherwise, let
 <var title="">qualified name</var> be its
 <a href="#concept-element-local-name" title="concept-element-local-name">local name</a>.

 <li><p>If the <a href="#context-object">context object</a> is in the <a href="#html-namespace">HTML namespace</a> and
 its <a href="#concept-node-document" title="concept-node-document">node document</a> is an
 <a href="#html-document">HTML document</a>, let <var title="">qualified name</var> be
 <a href="#converted-to-ascii-uppercase">converted to ASCII uppercase</a>.

 <li><p>Return <var title="">qualified name</var>.
</ol>

<hr>

<!--
 XXX This section argues for generic get/set attribute algorithms; might
 need more text for DOMTokenList explaining various reflecting conditions.
-->

<p>Some attributes are defined to <dfn id="concept-reflect" title="concept-reflect">reflect</dfn> a
particular content attribute. This means that on getting, these
steps must be run:

<ol>
 <li><p><a href="#concept-element-attributes-get" title="concept-element-attributes-get">Get an attribute</a>
 for the <a href="#context-object">context object</a> using content attribute's name and let
 <var title="">value</var> be the result.

 <li><p>If <var title="">value</var> is null, return the empty string.

 <li><p>Return <var title="">value</var>.
</ol>

<p>On setting,
<a href="#concept-element-attributes-set" title="concept-element-attributes-set">set an attribute</a> for the
<a href="#context-object">context object</a> using the name of the attribute and the given
value.

<p>The <dfn id="dom-element-id" title="dom-Element-id"><code>id</code></dfn> attribute must
<a href="#concept-reflect" title="concept-reflect">reflect</a> the "<code title="">id</code>"
content attribute.

<p>The <dfn id="dom-element-classname" title="dom-Element-className"><code>className</code></dfn>
attribute must <a href="#concept-reflect" title="concept-reflect">reflect</a> the
"<code title="">class</code>" content attribute.

<p>The <dfn id="dom-element-classlist" title="dom-Element-classList"><code>classList</code></dfn>
attribute must return the associated <code><a href="#domtokenlist">DOMTokenList</a></code> object
representing the <a href="#context-object">context object</a>'s
<a href="#concept-class" title="concept-class">classes</a>.

<hr>

<!-- all members in this subsection are affected by AttrExodus -->

<p>The <dfn id="dom-element-attributes" title="dom-Element-attributes"><code>attributes</code></dfn>
attribute must return a <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-read-only-array">read only array</a>
of the <a href="#context-object">context object</a>'s
<a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>.
The returned <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-read-only-array">read only array</a> must be
live. I.e. changes to the associated
<a href="#concept-attribute" title="concept-attribute">attributes</a> are reflected. The same object must be
returned each time.
<!-- XXXlive define live centrally somewhere for both collections and this? -->

<p>The <dfn id="dom-element-getattribute" title="dom-Element-getAttribute"><code>getAttribute(<var title="">name</var>)</code></dfn> method must run these steps:
<ol>
 <li><p>If the <a href="#context-object">context object</a> is in the
 <a href="#html-namespace">HTML namespace</a> and its
 <a href="#concept-node-document" title="concept-node-document">node document</a> is an
 <a href="#html-document">HTML document</a>, let <var title="">name</var> be
 <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.

 <li><p>Return the <a href="#concept-attribute-value" title="concept-attribute-value">value</a> of the
 first <a href="#concept-attribute" title="concept-attribute">attribute</a> in the
 <a href="#context-object">context object</a>'s
 <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a> whose
 <a href="#concept-attribute-name" title="concept-attribute-name">name</a> is
 <var title="">name</var>, and null otherwise.
</ol>

<p>The
<dfn id="dom-element-getattributens" title="dom-Element-getAttributeNS"><code>getAttributeNS(<var title="">namespace</var>, <var title="">localName</var>)</code></dfn>
method must return the following steps:
<ol>
  <li><p>If <var title="">namespace</var> is the empty string, set it to null.

  <li><p>Return
  <a href="#concept-element-attributes-get" title="concept-element-attributes-get">getting an attribute</a> for
  the <a href="#context-object">context object</a> using <var title="">localName</var> and
  <var title="">namespace</var>.
</ol>

<p>The
<dfn id="dom-element-setattribute" title="dom-Element-setAttribute"><code>setAttribute(<var title="">name</var>, <var title="">value</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">name</var> does not match the
 <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production in XML,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps.

 <li><p>If the <a href="#context-object">context object</a> is in the <a href="#html-namespace">HTML namespace</a>
 and its <a href="#concept-node-document" title="concept-node-document">node document</a> is an
 <a href="#html-document">HTML document</a>, let <var title="">name</var> be
 <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.

 <li><p>Let <var title="">attribute</var> be the
 first <a href="#concept-attribute" title="concept-attribute">attribute</a> in the
 <a href="#context-object">context object</a>'s <a href="#concept-element-attribute" title="concept-element-attribute">attribute list</a>
 whose <a href="#concept-attribute-name" title="concept-attribute-name">name</a> is
 <var title="">name</var>, or null if there is no such
 <a href="#concept-attribute" title="concept-attribute">attribute</a>.

 <li><p>If <var title="">attribute</var> is null, create an
 <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
 <var title="">name</var> and
 <a href="#concept-attribute-value" title="concept-attribute-value">value</a> is <var title="">value</var>,
 and then <a href="#concept-element-attributes-append" title="concept-element-attributes-append">append</a> this
 <a href="#concept-attribute" title="concept-attribute">attribute</a> to the
 <a href="#context-object">context object</a> and terminate these steps.

 <li><p><a href="#concept-element-attributes-change" title="concept-element-attributes-change">Change</a>
 <var title="">attribute</var> from <a href="#context-object">context object</a> to
 <var title="">value</var>.
</ol>

<p>The
<dfn id="dom-element-setattributens" title="dom-Element-setAttributeNS"><code>setAttributeNS(<var title="">namespace</var>, <var title="">name</var>, <var title="">value</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">namespace</var> is the empty string, set it to null.

 <li><p>If <var title="">name</var> does not match the
 <code class="external" data-anolis-spec="xml"><a href="http://www.w3.org/TR/xml/#NT-Name">Name</a></code> production in XML,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception and terminate these
 steps.

 <li><p>If <var title="">name</var> does not match the
 <code class="external" data-anolis-spec="xmlns"><a href="http://www.w3.org/TR/xml-names/#NT-QName">QName</a></code> production in Namespaces in XML,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.

 <li><p>If <var title="">name</var> contains a "<code>:</code>" (U+003E),
 then split the string on it and let <var title="">prefix</var> be the part
 before and <var title="">localName</var> the part after. Otherwise, let
 <var title="">prefix</var> be null and <var title="">localName</var> be
 <var title="">name</var>.

 <li><p>If <var title="">prefix</var> is not null and
 <var title="">namespace</var> is null, <a href="#concept-throw" title="concept-throw">throw</a>
 a "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.

 <li><p>If <var title="">prefix</var> is "<code title="">xml</code>" and
 <var title="">namespace</var> is not the <a href="#xml-namespace">XML namespace</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.

 <li><p>If <var title="">name</var> or <var title="">prefix</var> is
 "<code title="">xmlns</code>" and <var title="">namespace</var> is not the
 <a href="#xmlns-namespace">XMLNS namespace</a>, <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.

 <li><p>If <var title="">namespace</var> is the <a href="#xmlns-namespace">XMLNS namespace</a>
 and neither <var title="">name</var> nor <var title="">prefix</var> is
 "<code title="">xmlns</code>", <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#namespaceerror">NamespaceError</a></code>" exception and terminate these steps.

 <li><p><a href="#concept-element-attributes-set" title="concept-element-attributes-set">Set an attribute</a>
 for the <a href="#context-object">context object</a> using
 <var title="">localName</var>, <var title="">value</var>, and also
 <var title="">name</var>, <var title="">prefix</var>, and
 <var title="">namespace</var>.
</ol>

<p>The
<dfn id="dom-element-removeattribute" title="dom-Element-removeAttribute"><code>removeAttribute(<var>name</var>)</code></dfn>
method must run these steps:
<ol>
 <li><p>If the <a href="#context-object">context object</a> is in the
 <a href="#html-namespace">HTML namespace</a> and its
 <a href="#concept-node-document" title="concept-node-document">node document</a> is an
 <a href="#html-document">HTML document</a>, let <var title="">name</var> be
 <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.

 <li><p><a href="#concept-element-attributes-remove" title="concept-element-attributes-remove">Remove</a> the
 first <a href="#concept-attribute" title="concept-attribute">attribute</a> from the
 <a href="#context-object">context object</a> whose
 <a href="#concept-attribute-name" title="concept-attribute-name">name</a> is <var title="">name</var>,
 if any.
</ol>

<p>The
<dfn id="dom-element-removeattributens" title="dom-Element-removeAttributeNS"><code>removeAttributeNS(<var>namespace</var>, <var>localName</var>)</code></dfn>
method must return the following steps:
<ol>
  <li><p>If <var title="">namespace</var> is the empty string, set it to null.

  <li><p><a href="#concept-element-attributes-remove" title="concept-element-attributes-remove">Remove</a> the
  <a href="#concept-attribute" title="concept-attribute">attribute</a> from the
  <a href="#context-object">context object</a> whose
  <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is
  <var title="">namespace</var> and
  <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
  <var title="">localName</var>, if any.
</ol>

<p>The
<dfn id="dom-element-hasattribute" title="dom-Element-hasAttribute"><code>hasAttribute(<var>name</var>)</code></dfn>
method must run these steps:
<ol>
 <li><p>If the <a href="#context-object">context object</a> is in the
 <a href="#html-namespace">HTML namespace</a> and its
 <a href="#concept-node-document" title="concept-node-document">node document</a> is an
 <a href="#html-document">HTML document</a>, let <var title="">name</var> be
 <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.

 <li><p>Return true if the <a href="#context-object">context object</a>
 <a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> an
 <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
 <a href="#concept-attribute-name" title="concept-attribute-name">name</a> is
 <var title="">name</var>, and false otherwise.
</ol>

<p>The
<dfn id="dom-element-hasattributens" title="dom-Element-hasAttributeNS"><code>hasAttributeNS(<var title="">namespace</var>, <var title="">localName</var>)</code></dfn>
method must return the following steps:
<ol>
  <li><p>If <var title="">namespace</var> is the empty string, set it to null.

  <li><p>Return true if the <a href="#context-object">context object</a>
  <a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> an
  <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
  <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> is
  <var title="">namespace</var> and
  <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
  <var title="">localName</var>, and false otherwise.
</ol>

<!--<dfn title=dom-Element-getAttributeNode>getAttributeNode</dfn>: when the
Element.getAttributeNode() method is invoked on an HTML element, the name
argument must be converted to ASCII lowercase before the element's attributes
are examined. (In HTML documents.) -->

<!-- <dfn title=dom-Element-setAttributeNode>setAttributeNode</dfn>: when an
Attr node is set on an HTML element using Element.setAttributeNode(), it must
have its name converted to ASCII lowercase before the element is affected.
(In HTML documents.) -->

<hr>

<p>The
<dfn id="dom-element-getelementsbytagname" title="dom-Element-getElementsByTagName"><code>getElementsByTagName(<var>localName</var>)</code></dfn>
method must return the
<a href="#concept-getelementsbytagname" title="concept-getElementsByTagName">list of elements with local name <var title="">localName</var></a>
for the <a href="#context-object">context object</a>.

<p>The
<dfn id="dom-element-getelementsbytagnamens" title="dom-Element-getElementsByTagNameNS"><code>getElementsByTagNameNS(<var>namespace</var>, <var>localName</var>)</code></dfn>
method must return the
<a href="#concept-getelementsbytagnamens" title="concept-getElementsByTagNameNS">list of elements with namespace <var title="">namespace</var> and local name <var title="">localName</var></a>
for the <a href="#context-object">context object</a>.

<p>The
<dfn id="dom-element-getelementsbyclassname" title="dom-Element-getElementsByClassName"><code>getElementsByClassName(<var title="">classNames</var>)</code></dfn>
method must return the
<a href="#concept-getelementsbyclassname" title="concept-getElementsByClassName">list of elements with class names <var title="">classNames</var></a>
for the <a href="#context-object">context object</a>.


<h4 id="interface-attr"><span class="secno">6.8.1 </span>Interface <code><a href="#attr">Attr</a></code></h4>
<pre class="idl">interface <dfn id="attr">Attr</dfn> {
  readonly attribute DOMString <a href="#dom-attr-localname" title="dom-Attr-localName">localName</a>;
           attribute DOMString <a href="#dom-attr-value" title="dom-Attr-value">value</a>;

  readonly attribute DOMString <a href="#dom-attr-name" title="dom-Attr-name">name</a>;
  readonly attribute DOMString? <a href="#dom-attr-namespaceuri" title="dom-Attr-namespaceURI">namespaceURI</a>;
  readonly attribute DOMString? <a href="#dom-attr-prefix" title="dom-Attr-prefix">prefix</a>;
};</pre>

<p><code><a href="#attr">Attr</a></code> objects are simply known as
<dfn id="concept-attribute" title="concept-attribute">attributes</dfn>. They are sometimes referred
to as <em>content attributes</em> to avoid confusion with IDL attributes.

<p><a href="#concept-attribute" title="concept-attribute">Attributes</a> have a
<dfn id="concept-attribute-local-name" title="concept-attribute-local-name">local name</dfn> and
<dfn id="concept-attribute-value" title="concept-attribute-value">value</dfn>.

<p>For legacy reasons, <a href="#concept-attribute" title="concept-attribute">attributes</a> also
have an associated <dfn id="concept-attribute-name" title="concept-attribute-name">name</dfn>,
<dfn id="concept-attribute-namespace" title="concept-attribute-namespace">namespace</dfn>, and
<dfn id="concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</dfn>.

<p>When an <a href="#concept-attribute" title="concept-attribute">attribute</a> is created, its
<a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> and
<a href="#concept-attribute-value" title="concept-attribute-value">value</a> are always given. Unless
explicitly given when an <a href="#concept-attribute" title="concept-attribute">attribute</a> is
created, its <a href="#concept-attribute-name" title="concept-attribute-name">name</a> is
identical to its <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>,
and its <a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> and
<a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a> are
null.

<p>An
<dfn id="concept-named-attribute" title="concept-named-attribute"><code><var title="">A</var></code> attribute</dfn>
is an <a href="#concept-attribute" title="concept-attribute">attribute</a> whose
<a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> is
<code><var title="">A</var></code> and whose
<a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a> and
<a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a> are
null.

<hr>

<p>The <dfn id="dom-attr-localname" title="dom-Attr-localName"><code>localName</code></dfn> attribute
must return the <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>.

<p>The <dfn id="dom-attr-value" title="dom-Attr-value"><code>value</code></dfn> attribute must
return the <a href="#concept-attribute-value" title="concept-attribute-value">value</a>.

<p>Setting the <code title="dom-Attr-value"><a href="#dom-attr-value">value</a></code> attribute must set
<a href="#concept-attribute-value" title="concept-attribute-value">value</a> to the new value.

<hr>

<p>The <dfn id="dom-attr-name" title="dom-Attr-name"><code>name</code></dfn> attribute must
return the <a href="#concept-attribute-name" title="concept-attribute-name">name</a>.

<p>The <dfn id="dom-attr-namespaceuri" title="dom-Attr-namespaceURI"><code>namespaceURI</code></dfn>
attribute must return the
<a href="#concept-attribute-namespace" title="concept-attribute-namespace">namespace</a>.

<p>The <dfn id="dom-attr-prefix" title="dom-Attr-prefix"><code>prefix</code></dfn> attribute must
return the
<a href="#concept-attribute-namespace-prefix" title="concept-attribute-namespace-prefix">namespace prefix</a>.


<h3 id="interface-characterdata"><span class="secno">6.9 </span>Interface <code><a href="#characterdata">CharacterData</a></code></h3>
<pre class="idl">interface <dfn id="characterdata">CharacterData</dfn> : <a href="#node">Node</a> {
  [TreatNullAs=EmptyString] attribute DOMString <a href="#dom-characterdata-data" title="dom-CharacterData-data">data</a>;
  readonly attribute unsigned long <a href="#dom-characterdata-length" title="dom-CharacterData-length">length</a>;
  DOMString <a href="#dom-characterdata-substringdata" title="dom-CharacterData-substringData">substringData</a>(unsigned long <var title="">offset</var>, unsigned long <var title="">count</var>);
  void <a href="#dom-characterdata-appenddata" title="dom-CharacterData-appendData">appendData</a>(DOMString <var title="">data</var>);
  void <a href="#dom-characterdata-insertdata" title="dom-CharacterData-insertData">insertData</a>(unsigned long <var title="">offset</var>, DOMString <var title="">data</var>);
  void <a href="#dom-characterdata-deletedata" title="dom-CharacterData-deleteData">deleteData</a>(unsigned long <var title="">offset</var>, unsigned long <var title="">count</var>);
  void <a href="#dom-characterdata-replacedata" title="dom-CharacterData-replaceData">replaceData</a>(unsigned long <var title="">offset</var>, unsigned long <var title="">count</var>, DOMString <var title="">data</var>);
};</pre>

<p class="note"><code><a href="#characterdata">CharacterData</a></code> is an abstract interface and does
not exist as <a href="#concept-node" title="concept-node">node</a>. It is used by
<code><a href="#text">Text</a></code>, <code><a href="#comment">Comment</a></code>, and
<code><a href="#processinginstruction">ProcessingInstruction</a></code> <a href="#concept-node" title="concept-node">nodes</a>.

<p>Each <a href="#concept-node" title="concept-node">node</a> inheriting from the
<code><a href="#characterdata">CharacterData</a></code> interface has an associated mutable string
called <dfn id="concept-cd-data" title="concept-CD-data">data</dfn>.

<p>To <dfn id="concept-cd-replace" title="concept-CD-replace">replace data</dfn> of node
<var title="">node</var> with offset <var title="">offset</var>, count
<var title="">count</var>, and data <var title="">data</var>, run these steps:</p>

<ol>
 <li><p>Let <var title="">length</var> be the <var title="">node</var>'s
 <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value.

 <li><p>If <var title="">offset</var> is greater than <var title="">length</var>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#indexsizeerror">IndexSizeError</a></code>" exception and terminate these steps.

 <li><p>If <var title="">offset</var> plus <var title="">count</var> is greater
 than <var title="">length</var> let <var title="">count</var> be
 <var title="">length</var> minus <var title="">offset</var>.

 <li><p><a href="#queue-a-mutation-record">Queue a mutation record</a> of "<code><a href="#characterdata">characterData</a></code>"
 for <var title="">node</var> with oldValue <var title="">node</var>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a>.

 <li><p>Insert <var title="">data</var> into <var title="">node</var>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a> after <var title="">offset</var>
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a>.

 <li><p>Let <var title="">delete offset</var> be <var title="">offset</var> plus
 the number of
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> in
 <var title="">data</var>.

 <li><p>Starting from <var title="">delete offset</var>
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a>, remove
 <var title="">count</var>
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> from
 <var title="">node</var>'s <a href="#concept-cd-data" title="concept-CD-data">data</a>.

 <!-- ranges -->
 <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="">node</var> and
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is greater than
 <var title="">offset</var> but less than or equal to <var title="">offset</var>
 plus <var title="">count</var>, set its
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> to
 <var title="">offset</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="">node</var> and
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> is greater than
 <var title="">offset</var> but less than or equal to <var title="">offset</var>
 plus <var title="">count</var>, set its
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> to
 <var title="">offset</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="">node</var> and
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is greater than
 <var title="">offset</var> plus <var title="">count</var>, increase its
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> by the number of
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> in
 <var title="">data</var>, then decrease it 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="">node</var> and
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> is greater than
 <var title="">offset</var> plus <var title="">count</var>, increase its
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> by the number of
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> in
 <var title="">data</var>, then decrease it by <var title="">count</var>.
</ol>
<!-- delete happens after insert for better cursor positioning with editing
https://www.w3.org/Bugs/Public/show_bug.cgi?id=13153 -->

<!-- If you set a node's data to a new value (e.g., using the data
attribute):

IE 9: Acts like the node was deleted and recreated, moves the boundary
points up to the parent
Firefox 4: Resets the offset to 0, always
Chrome 11 dev: Resets the offset to 0, except it does nothing if the new
data is the same as the old data
Opera 11: Sets a start offset to 0 and an end offset to the end of the
data, always

The spec originally followed WebKit, since it seemed to make the most sense.
Opera's approach of setting end offsets to the length of the new data
arguably makes more sense, but that's debatable, and it's greatly
outnumbered. However, after some feedback by bzbarsky that checking for
equality is expensive, I removed the special case and matched Firefox:

https://www.w3.org/Bugs/Public/show_bug.cgi?id=13250

Authors who want WebKit-like behavior can always use replaceData() instead.

XXX replaceData is the same as setting data these days -->


<p>To <dfn id="concept-cd-substring" title="concept-CD-substring">substring data</dfn> with node
<var title="">node</var>, offset <var title="">offset</var>, and count
<var title="">count</var>, run these steps:

<ol>
 <li><p>Let <var title="">length</var> be <var title="">node</var>'s
 <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value.

 <li><p>If <var title="">offset</var> is greater than <var title="">length</var>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#indexsizeerror">IndexSizeError</a></code>" exception and terminate these steps.

 <li><p>If <var title="">offset</var> plus <var title="">count</var> is
 greater than <var title="">length</var>, return a string whose value is the
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> from the
 <var title="">offset</var><sup>th</sup>
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit">code unit</a> to the end of
 <var title="">node</var>'s <a href="#concept-cd-data" title="concept-CD-data">data</a>, and then
 terminate these steps.

 <li><p>Return a string whose value is the
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> from the
 <var title="">offset</var><sup>th</sup>
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit">code unit</a> to the
 <var title="">offset</var>+<var title="">count</var><sup>th</sup>
 <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit">code unit</a> in <var title="">node</var>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a>.
</ol>

<p>The <dfn id="dom-characterdata-data" title="dom-CharacterData-data"><code>data</code></dfn> attribute
must return <a href="#concept-cd-data" title="concept-CD-data">data</a>, and on setting, must
<a href="#concept-cd-replace" title="concept-CD-replace">replace data</a> with node
<a href="#context-object">context object</a> offset 0, count
<code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value, and data
new value.

<p>The <dfn id="dom-characterdata-length" title="dom-CharacterData-length"><code>length</code></dfn>
attribute must return the number of
<a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-code-unit" title="code unit">code units</a> in
<a href="#concept-cd-data" title="concept-CD-data">data</a>.

<p>The
<dfn id="dom-characterdata-substringdata" title="dom-CharacterData-substringData"><code>substringData(<var title="">offset</var>, <var title="">count</var>)</code></dfn>
method must <a href="#concept-cd-substring" title="concept-CD-substring">substring data</a> with node
<a href="#context-object">context object</a>, offset <var title="">offset</var>, and count
<var title="">count</var>.

<p>The
<dfn id="dom-characterdata-appenddata" title="dom-CharacterData-appendData"><code>appendData(<var title="">data</var>)</code></dfn>
method must <a href="#concept-cd-replace" title="concept-CD-replace">replace data</a> with node
<a href="#context-object">context object</a>, offset
<code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value, count 0,
and data <var title="">data</var>.

<p>The
<dfn id="dom-characterdata-insertdata" title="dom-CharacterData-insertData"><code>insertData(<var title="">offset</var>, <var title="">data</var>)</code></dfn>
method must <a href="#concept-cd-replace" title="concept-CD-replace">replace data</a> with node
<a href="#context-object">context object</a>, offset <var title="">offset</var>, count 0, and
data <var title="">data</var>.

<p>The
<dfn id="dom-characterdata-deletedata" title="dom-CharacterData-deleteData"><code>deleteData(<var title="">offset</var>, <var title="">count</var>)</code></dfn>
method must <a href="#concept-cd-replace" title="concept-CD-replace">replace data</a> with node
<a href="#context-object">context object</a>, offset <var title="">offset</var>, count
<var title="">count</var>, and data the empty string.

<p>The
<dfn id="dom-characterdata-replacedata" title="dom-CharacterData-replaceData"><code>replaceData(<var title="">offset</var>, <var title="">count</var>, <var title="">data</var>)</code></dfn>
method must <a href="#concept-cd-replace" title="concept-CD-replace">replace data</a> with node
<a href="#context-object">context object</a>, offset <var title="">offset</var>, count
<var title="">count</var>, and data <var title="">data</var>.


<h3 id="interface-text"><span class="secno">6.10 </span>Interface <code><a href="#text">Text</a></code></h3>
<pre class="idl">[<a href="#dom-text" title="dom-Text">Constructor</a>(optional DOMString <var title="">data</var> = "")]
interface <dfn id="text">Text</dfn> : <a href="#characterdata">CharacterData</a> {
  <a href="#text">Text</a> <a href="#dom-text-splittext" title="dom-Text-splitText">splitText</a>(unsigned long <var title="">offset</var>);
  readonly attribute DOMString <a href="#dom-text-wholetext" title="dom-Text-wholeText">wholeText</a>;
};</pre>

<dl class="domintro">
 <dt><code><var title="">text</var> = new <a href="#dom-documentfragment" title="dom-DocumentFragment">Text</a>([<var title="">data</var> = ""])</code>
 <dd><p>Returns a new <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a> whose
 <a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var>.

 <dt><code><var title="">text</var> . <a href="#dom-text-splittext" title="dom-Text-splitText">splitText</a>(<var title="">offset</var>)</code>
 <dd><p>Splits <a href="#concept-cd-data" title="concept-CD-data">data</a> at the given
 <var title="">offset</var> and returns the remainder as <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a>.

 <dt><code><var title="">text</var> . <a href="#dom-text-wholetext" title="dom-Text-wholeText">wholeText</a></code>
 <dd><p>Returns the combined <a href="#concept-cd-data" title="concept-CD-data">data</a> of all direct
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>
 <a href="#concept-tree-sibling" title="concept-tree-sibling">siblings</a>.
</dl>

<p>The <dfn id="dom-text" title="dom-Text"><code>Text(<var title="">data</var>)</code></dfn> constructor
must return a new <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a> whose
<a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var> and
<a href="#concept-node-document" title="concept-node-document">node document</a> is the global object's associated
<a href="#concept-document" title="concept-document">document</a>.

<p>To <dfn id="concept-text-split" title="concept-Text-split">split</dfn> a <code><a href="#text">Text</a></code>
<a href="#concept-node" title="concept-node">node</a> <var title="">node</var> with offset
<var title="">offset</var>, run these steps:

<ol>
 <li><p>Let <var title="">length</var> be the
 <code title="dom-CharacterData-length"><a href="#dom-characterdata-length">length</a></code> attribute value.

 <li><p>If <var title="">offset</var> is greater than <var title="">length</var>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#indexsizeerror">IndexSizeError</a></code>" exception and terminate these steps.

 <li><p>Let <var title="">count</var> be <var title="">length</var> minus
 <var title="">offset</var>.

 <li><p>Let <var title="">new data</var> be the result of
 <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
 <var title="">node</var>, offset <var title="">offset</var>, and count
 <var title="">count</var>.

 <li><p>Let <var title="">new node</var> be a new <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a>, with the same
 <a href="#concept-node-document" title="concept-node-document">node document</a> as
 <var title="">node</var>. Set <var title="">new node</var>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a> to <var title="">new data</var>.

 <li><p>Let <var title="">parent</var> be the <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li>
  <p>If <var title="">parent</var> is not null, run these substeps:

  <ol>
   <li><p><a href="#concept-node-insert" title="concept-node-insert">Insert</a>
   <var title="">new node</var> into <var title="">parent</var> before
   <var title="">node</var>'s
   <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a>.
   <!-- Do this before we replace data, so that the data replacement won't
   mutate ranges prematurely:
   https://www.w3.org/Bugs/Public/show_bug.cgi?id=15325 -->

   <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="">node</var> and
   <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is greater than
   <var title="">offset</var>, set its
   <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> to
   <var title="">new node</var> and decrease its
   <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> by
   <var title="">offset</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="">node</var> and
   <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> is greater than
   <var title="">offset</var>, set its
   <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> to
   <var title="">new node</var> and decrease its
   <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> by
   <var title="">offset</var>.

   <!-- This shit is complicated:
        https://www.w3.org/Bugs/Public/show_bug.cgi?id=19968 -->
   <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 equal to
   the <a href="#concept-tree-index" title="concept-tree-index">index</a> of
   <var title="">node</var> + 1, increase its
   <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> by one.

   <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 equal to
   the <a href="#concept-tree-index" title="concept-tree-index">index</a> of
   <var title="">node</var> + 1, increase its
   <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> by one.
  </ol>

 <li><p><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
 <var title="">node</var>, offset <var title="">offset</var>, count
 <var title="">count</var>, and data the empty string.

 <li>
  <p>If <var title="">parent</var> is null, run these substeps:</p>

  <ol>
   <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="">node</var> and
   <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> is greater
   than <var title="">offset</var>, set its
   <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> to
   <var title="">offset</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="">node</var> and
   <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> is greater than
   <var title="">offset</var>, set its
   <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a> to
   <var title="">offset</var>.
  </ol>

 <li><p>Return <var title="">new node</var>.
</ol>

<p>The
<dfn id="dom-text-splittext" title="dom-Text-splitText"><code>splitText(<var>offset</var>)</code></dfn>
method must <a href="#concept-text-split" title="concept-Text-split">split</a> the
<a href="#context-object">context object</a> with offset <var title="">offset</var>.


<p>The <dfn id="contiguous-text-nodes">contiguous <code>Text</code> nodes</dfn> of a node are the node
itself, the
<a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a>
<code><a href="#text">Text</a></code> node (if any) and its
<a href="#contiguous-text-nodes">contiguous <code>Text</code> nodes</a>, and the
<a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a> <code><a href="#text">Text</a></code>
node (if any) and its <a href="#contiguous-text-nodes">contiguous <code>Text</code> nodes</a>,
avoiding any duplicates.

<p>The <dfn id="dom-text-wholetext" title="dom-Text-wholeText"><code>wholeText</code></dfn>
attribute must return a concatenation of the
<a href="#concept-cd-data" title="concept-CD-data">data</a> of the
<a href="#contiguous-text-nodes">contiguous <code>Text</code> nodes</a> of the
<a href="#context-object">context object</a>, in
<a href="#concept-tree-order" title="concept-tree-order">tree order</a>.


<h3 id="interface-processinginstruction"><span class="secno">6.11 </span>Interface <code><a href="#processinginstruction">ProcessingInstruction</a></code></h3>
<pre class="idl">interface <dfn id="processinginstruction">ProcessingInstruction</dfn> : <a href="#characterdata">CharacterData</a> {
  readonly attribute DOMString <a href="#dom-processinginstruction-target" title="dom-ProcessingInstruction-target">target</a>;
};</pre>

<p><code><a href="#processinginstruction">ProcessingInstruction</a></code> <a href="#concept-node" title="concept-node">nodes</a>
have an associated <dfn id="concept-pi-target" title="concept-PI-target">target</dfn>.

<p>The <dfn id="dom-processinginstruction-target" title="dom-ProcessingInstruction-target"><code>target</code></dfn>
attribute must return the <a href="#concept-pi-target" title="concept-PI-target">target</a>.


<h3 id="interface-comment"><span class="secno">6.12 </span>Interface <code><a href="#comment">Comment</a></code></h3>
<pre class="idl">[<a href="#dom-comment" title="dom-Comment">Constructor</a>(optional DOMString <var title="">data</var> = "")]
interface <dfn id="comment">Comment</dfn> : <a href="#characterdata">CharacterData</a> {
};</pre>

<dl class="domintro">
 <dt><code><var title="">comment</var> = new <a href="#dom-comment" title="dom-Comment">Comment</a>([<var title="">data</var> = ""])</code>
 <dd><p>Returns a new <code><a href="#comment">Comment</a></code> <a href="#concept-node" title="concept-node">node</a> whose
 <a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var>.
</dl>

<p>The <dfn id="dom-comment" title="dom-Comment"><code>Comment(<var title="">data</var>)</code></dfn>
constructor must return a new <code><a href="#comment">Comment</a></code> <a href="#concept-node" title="concept-node">node</a>
whose <a href="#concept-cd-data" title="concept-CD-data">data</a> is <var title="">data</var> and
<a href="#concept-node-document" title="concept-node-document">node document</a> is the global object's associated
<a href="#concept-document" title="concept-document">document</a>.


<h2 id="ranges"><span class="secno">7 </span>Ranges</h2>
<!-- XXX do not call other methods but use concepts -->

<h3 id="introduction-to-dom-ranges"><span class="secno">7.1 </span>Introduction to "DOM Ranges"</h3>

<p>A <code><a href="#range">Range</a></code> object (<a href="#concept-range" title="concept-range">range</a>)
represents a sequence of content within a
<a href="#concept-node-tree" title="concept-node-tree">node tree</a>. Each
<a href="#concept-range" title="concept-range">range</a> has a
<a href="#concept-range-start" title="concept-range-start">start</a> and an
<a href="#concept-range-end" title="concept-range-end">end</a> which are
<a href="#concept-range-bp" title="concept-range-bp">boundary points</a>. A
<a href="#concept-range-bp" title="concept-range-bp">boundary point</a> is a tuple consisting of
a <a href="#concept-node" title="concept-node">node</a> and a non-negative numeric
<a href="#concept-range-bp-offset" title="concept-range-bp-offset">offset</a>. So in other words, a
<a href="#concept-range" title="concept-range">range</a> represents a piece of content within
a <a href="#concept-node-tree" title="concept-node-tree">node tree</a> between two
<a href="#concept-range-bp" title="concept-range-bp">boundary points</a>.

<p><a href="#concept-range" title="concept-range">Ranges</a> are frequently used in editing
for selecting and copying content.

<ul class="domTree">
 <li class="t1"><a href="#concept-element" title="concept-element">Element</a>: <code>p</code>
  <ul>
   <li class="t1"><a href="#concept-element" title="concept-element">Element</a>: <code>img</code> <span class="t2" title=""><code class="attribute name">src</code>="<code class="attribute value">insanity-wolf</code>"</span> <span class="t2" title=""><code class="attribute name">alt</code>="<code class="attribute value">Little-endian BOM; decode as big-endian!</code>"</span>
   <li class="t3"><code><a href="#text">Text</a></code>: <span title=""> CSS 2.1 syndata is </span>
   <li class="t1"><a href="#concept-element" title="concept-element">Element</a>: <code>em</code>
    <ul>
     <li class="t3"><code><a href="#text">Text</a></code>: <span title="">awesome</span>
    </ul>
   <li class="t3"><code><a href="#text">Text</a></code>: <span title="">!</span>
  </ul>
</ul>
<!-- http://w3cmemes.tumblr.com/post/35332222321/css-2-1-syndata-is-awesome -->

<p>In the <a href="#concept-node-tree" title="concept-node-tree">node tree</a> above, a
<a href="#concept-range" title="concept-range">range</a> can be used to represent the sequence
“syndata is awes”. Assuming <var title="">p</var> is assigned to the
<code>p</code> <a href="#concept-element" title="concept-element">element</a>, and
<var title="">em</var> to the <code>em</code>
<a href="#concept-element" title="concept-element">element</a>, this would be done as follows:

<pre><code>var range = new Range(),
    firstText = p.childNodes[1],
    secondText = em.firstChild
range.setStart(firstText, 9) // do not forget the leading space
range.setEnd(secondText, 4)
// range now stringifies to the aforementioned quote</code></pre>

<p class="note"><a href="#concept-attribute" title="concept-attribute">Attributes</a> such as
<code>src</code> and <code>alt</code> in the
<a href="#concept-node-tree" title="concept-node-tree">node tree</a> above cannot be represented
by a <a href="#concept-range" title="concept-range">range</a>. The
<a href="#concept-range" title="concept-range">ranges</a> concept is only useful for
<a href="#concept-node" title="concept-node">nodes</a>.

<p><a href="#concept-range" title="concept-range">Ranges</a> are affected by mutations to the
<a href="#concept-node-tree" title="concept-node-tree">node tree</a>. Such mutations will not
invalidate a <a href="#concept-range" title="concept-range">range</a> and will try to ensure
that the <a href="#concept-range" title="concept-range">range</a> still represents the same
piece of content. Necessarily, a <a href="#concept-range" title="concept-range">range</a>
might itself be modified as part of the mutation to the
<a href="#concept-node-tree" title="concept-node-tree">node tree</a> when e.g. part of the content
it represents is mutated.

<p class="note">See the <a href="#concept-node-insert" title="concept-node-insert">insert</a> and
<a href="#concept-node-remove" title="concept-node-remove">remove</a> algorithms, the
<code title="dom-Node-normalize"><a href="#dom-node-normalize">normalize()</a></code> method, and the
<a href="#concept-cd-replace" title="concept-CD-replace">replace data</a> and
<a href="#concept-text-split" title="concept-Text-split">split</a> algorithms for the hairy
details.


<h3 id="interface-range"><span class="secno">7.2 </span>Interface <code><a href="#range">Range</a></code></h3>
<pre class="idl">[<a href="#dom-range" title="dom-Range">Constructor</a>]
interface <dfn id="range">Range</dfn> {
  readonly attribute <a href="#node">Node</a> <a href="#dom-range-startcontainer" title="dom-Range-startContainer">startContainer</a>;
  readonly attribute unsigned long <a href="#dom-range-startoffset" title="dom-Range-startOffset">startOffset</a>;
  readonly attribute <a href="#node">Node</a> <a href="#dom-range-endcontainer" title="dom-Range-endContainer">endContainer</a>;
  readonly attribute unsigned long <a href="#dom-range-endoffset" title="dom-Range-endOffset">endOffset</a>;
  readonly attribute boolean <a href="#dom-range-collapsed" title="dom-Range-collapsed">collapsed</a>;
  readonly attribute <a href="#node">Node</a> <a href="#dom-range-commonancestorcontainer" title="dom-Range-commonAncestorContainer">commonAncestorContainer</a>;

  void <a href="#dom-range-setstart" title="dom-Range-setStart">setStart</a>(<a href="#node">Node</a> <var title="">refNode</var>, unsigned long <var title="">offset</var>);
  void <a href="#dom-range-setend" title="dom-Range-setEnd">setEnd</a>(<a href="#node">Node</a> <var title="">refNode</var>, unsigned long <var title="">offset</var>);
  void <a href="#dom-range-setstartbefore" title="dom-Range-setStartBefore">setStartBefore</a>(<a href="#node">Node</a> <var title="">refNode</var>);
  void <a href="#dom-range-setstartafter" title="dom-Range-setStartAfter">setStartAfter</a>(<a href="#node">Node</a> <var title="">refNode</var>);
  void <a href="#dom-range-setendbefore" title="dom-Range-setEndBefore">setEndBefore</a>(<a href="#node">Node</a> <var title="">refNode</var>);
  void <a href="#dom-range-setendafter" title="dom-Range-setEndAfter">setEndAfter</a>(<a href="#node">Node</a> <var title="">refNode</var>);
  void <a href="#dom-range-collapse" title="dom-Range-collapse">collapse</a>(boolean <var title="">toStart</var>);
  void <a href="#dom-range-selectnode" title="dom-Range-selectNode">selectNode</a>(<a href="#node">Node</a> <var title="">refNode</var>);
  void <a href="#dom-range-selectnodecontents" title="dom-Range-selectNodeContents">selectNodeContents</a>(<a href="#node">Node</a> <var title="">refNode</var>);

  const unsigned short <dfn id="dom-comparehow-start_to_start" title="dom-CompareHow-START_TO_START">START_TO_START</dfn> = 0;
  const unsigned short <dfn id="dom-comparehow-start_to_end" title="dom-CompareHow-START_TO_END">START_TO_END</dfn> = 1;
  const unsigned short <dfn id="dom-comparehow-end_to_end" title="dom-CompareHow-END_TO_END">END_TO_END</dfn> = 2;
  const unsigned short <dfn id="dom-comparehow-end_to_start" title="dom-CompareHow-END_TO_START">END_TO_START</dfn> = 3;
  short <a href="#dom-range-compareboundarypoints" title="dom-Range-compareBoundaryPoints">compareBoundaryPoints</a>(unsigned short <var title="">how</var>, <a href="#range">Range</a> <var title="">sourceRange</var>);

  void <a href="#dom-range-deletecontents" title="dom-Range-deleteContents">deleteContents</a>();
  <a href="#documentfragment">DocumentFragment</a> <a href="#dom-range-extractcontents" title="dom-Range-extractContents">extractContents</a>();
  <a href="#documentfragment">DocumentFragment</a> <a href="#dom-range-clonecontents" title="dom-Range-cloneContents">cloneContents</a>();
  void <a href="#dom-range-insertnode" title="dom-Range-insertNode">insertNode</a>(<a href="#node">Node</a> <var title="">node</var>);
  void <a href="#dom-range-surroundcontents" title="dom-Range-surroundContents">surroundContents</a>(<a href="#node">Node</a> <var title="">newParent</var>);

  <a href="#range">Range</a> <a href="#dom-range-clonerange" title="dom-Range-cloneRange">cloneRange</a>();
  void <a href="#dom-range-detach" title="dom-Range-detach">detach</a>();

  boolean <a href="#dom-range-ispointinrange" title="dom-Range-isPointInRange">isPointInRange</a>(<a href="#node">Node</a> <var title="">node</var>, unsigned long <var title="">offset</var>);
  short <a href="#dom-range-comparepoint" title="dom-Range-comparePoint">comparePoint</a>(<a href="#node">Node</a> <var title="">node</var>, unsigned long <var title="">offset</var>);

  boolean <a href="#dom-range-intersectsnode" title="dom-Range-intersectsNode">intersectsNode</a>(<a href="#node">Node</a> <var title="">node</var>);

  <a href="#dom-range-stringifier" title="dom-Range-stringifier">stringifier</a>;
};</pre>

<p><code><a href="#range">Range</a></code> objects are simply known as
<dfn id="concept-range" title="concept-range">ranges</dfn>.

<p>A <dfn id="concept-range-bp" title="concept-range-bp">boundary point</dfn> is a
(<a href="#concept-node" title="concept-node">node</a>,
<dfn id="concept-range-bp-offset" title="concept-range-bp-offset">offset</dfn>) tuple, where
<a href="#concept-range-bp-offset" title="concept-range-bp-offset">offset</a> is a non-negative
integer.

<p class="note">Generally speaking, a
<a href="#concept-range-bp" title="concept-range-bp">boundary point</a>'s
<a href="#concept-range-bp-offset" title="concept-range-bp-offset">offset</a> will be between zero and
the <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>'s
<a href="#concept-node" title="concept-node">node</a>
<a href="#concept-node-length" title="concept-node-length">length</a>, inclusive. Algorithms that
modify a <a href="#concept-tree" title="concept-tree">tree</a> (in particular the
<a href="#concept-node-insert" title="concept-node-insert">insert</a>,
<a href="#concept-node-remove" title="concept-node-remove">remove</a>,
<a href="#concept-cd-replace" title="concept-CD-replace">replace data</a>, and
<a href="#concept-text-split" title="concept-Text-split">split</a> algorithms) also modify
<a href="#concept-range" title="concept-range">ranges</a> associated with that
<a href="#concept-tree" title="concept-tree">tree</a>.

<p>If the two <a href="#concept-node" title="concept-node">nodes</a> of
<a href="#concept-range-bp" title="concept-range-bp">boundary points</a>
(<var title="">node A</var>, <var title="">offset A</var>) and
(<var title="">node B</var>, <var title="">offset B</var>) have the same
<a href="#concept-tree-root" title="concept-tree-root">root</a>, the
<dfn id="concept-range-bp-position" title="concept-range-bp-position">position</dfn> of the first relative to
the second is either <dfn id="concept-range-bp-before" title="concept-range-bp-before">before</dfn>,
<dfn id="concept-range-bp-equal" title="concept-range-bp-equal">equal</dfn>, or
<dfn id="concept-range-bp-after" title="concept-range-bp-after">after</dfn>,
as returned by the following algorithm:

<ol>
 <li><p>If <var title="">node A</var> is the same as <var title="">node B</var>,
 return <a href="#concept-range-bp-equal" title="concept-range-bp-equal">equal</a> if
 <var title="">offset A</var> is the same as <var title="">offset B</var>,
 <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a> if
 <var title="">offset A</var> is less than <var title="">offset B</var>, and
 <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a> if
 <var title="">offset A</var> is greater than <var title="">offset B</var>.

 <li><p>If <var title="">node A</var> is
 <a href="#concept-tree-following" title="concept-tree-following">following</a>
 <var title="">node B</var>, compute the
 <a href="#concept-range-bp-position" title="concept-range-bp-position">position</a> of
 (<var title="">node B</var>, <var title="">offset B</var>) relative to
 (<var title="">node A</var>, <var title="">offset A</var>). If it is
 <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>, return
 <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>. If it is
 <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>, return
 <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>. In either case terminate
 these steps.

 <li>
  <p>If <var title="">node A</var> is an
  <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of
  <var title="">node B</var>:

  <ol>
   <li><p>Let <var title="">child</var> equal <var title="">node B</var>.

   <li><p>While <var title="">child</var> is not a
   <a href="#concept-tree-child" title="concept-tree-child">child</a> of <var title="">node A</var>,
   set <var title="">child</var> to its
   <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

   <li><p>If the <a href="#concept-tree-index" title="concept-tree-index">index</a> of
   <var title="">child</var> is less than <var title="">offset A</var>, return
   <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>.
  </ol>

 <li><p>Return <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>.
</ol>

<p>Each <a href="#concept-range" title="concept-range">range</a> has two associated
<a href="#concept-range-bp" title="concept-range-bp">boundary points</a> — a
<dfn id="concept-range-start" title="concept-range-start">start</dfn> and
<dfn id="concept-range-end" title="concept-range-end">end</dfn>.

<p>For convenience, <dfn id="concept-range-start-node" title="concept-range-start-node">start node</dfn> is
<a href="#concept-range-start" title="concept-range-start">start</a>'s
<a href="#concept-node" title="concept-node">node</a>,
<dfn id="concept-range-start-offset" title="concept-range-start-offset">start offset</dfn> is
<a href="#concept-range-start" title="concept-range-start">start</a>'s
<a href="#concept-range-bp-offset" title="concept-range-bp-offset">offset</a>,
<dfn id="concept-range-end-node" title="concept-range-end-node">end node</dfn> is
<a href="#concept-range-end" title="concept-range-end">end</a>'s
<a href="#concept-node" title="concept-node">node</a>,  and
<dfn id="concept-range-end-offset" title="concept-range-end-offset">end offset</dfn> is
<a href="#concept-range-end" title="concept-range-end">end</a>'s
<a href="#concept-range-bp-offset" title="concept-range-bp-offset">offset</a>.

<p>The <dfn id="concept-range-root" title="concept-range-root">root</dfn> of a
<a href="#concept-range" title="concept-range">range</a> is the
<a href="#concept-tree-root" title="concept-tree-root">root</a> of its
<a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.
<!-- start and end have an identical root -->

<p>A <a href="#concept-node" title="concept-node">node</a> <var title="">node</var> is
<dfn id="contained">contained</dfn> in a <a href="#concept-range" title="concept-range">range</a>
<var title="">range</var> if <var title="">node</var>'s
<a href="#concept-tree-root" title="concept-tree-root">root</a> is
the same as <var title="">range</var>'s
<a href="#concept-range-root" title="concept-range-root">root</a>, and (<var title="">node</var>, 0)
is <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a> <var title="">range</var>'s
<a href="#concept-range-start" title="concept-range-start">start</a>, and (<var title="">node</var>,
<a href="#concept-node-length" title="concept-node-length">length</a> of <var title="">node</var>) is
<a href="#concept-range-bp-before" title="concept-range-bp-before">before</a> <var title="">range</var>'s
<a href="#concept-range-end" title="concept-range-end">end</a>.

<p>A <a href="#concept-node" title="concept-node">node</a> is <dfn id="partially-contained">partially contained</dfn>
in a <a href="#concept-range" title="concept-range">range</a> if it is an
<a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of the
<a href="#concept-range" title="concept-range">range</a>'s
<a href="#concept-range-start-node" title="concept-range-start-node">start node</a> but not its
<a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, or vice versa.

<div class="note">
 <p>Some facts to better understand these definitions:

 <ul>
  <li><p>The content that one would think of as being within the
  <a href="#concept-range" title="concept-range">range</a> consists of all
  <a href="#contained">contained</a> <a href="#concept-node" title="concept-node">nodes</a>, plus
  possibly some of the contents of the
  <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> and
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> if those are
  <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">nodes</a>.

  <li><p>The <a href="#concept-node" title="concept-node">nodes</a> that are contained in a
  <a href="#concept-range" title="concept-range">range</a> will generally not be contiguous,
  because the <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> of a
  <a href="#contained">contained</a> <a href="#concept-node" title="concept-node">node</a> will not
  always be <a href="#contained">contained</a>.

  <li><p>However, the <a href="#concept-tree-descendant" title="concept-tree-descendant">descendants</a>
  of a <a href="#contained">contained</a> <a href="#concept-node" title="concept-node">node</a> are
  <a href="#contained">contained</a>, and if two
  <a href="#concept-tree-sibling" title="concept-tree-sibling">siblings</a> are
  <a href="#contained">contained</a>, so are any
  <a href="#concept-tree-sibling" title="concept-tree-sibling">siblings</a> that lie between them.

  <li><p>The first <a href="#contained">contained</a>
  <a href="#concept-node" title="concept-node">node</a> (if there are any) will always be
  after the <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>, and the
  last <a href="#contained">contained</a> <a href="#concept-node" title="concept-node">node</a> will
  always be equal to or before the
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>'s last
  <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a>.

  <li><p>The <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> and
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> of a
  <a href="#concept-range" title="concept-range">range</a> are never <a href="#contained">contained</a>
  within it.

  <li><p>There exists some partially contained
  <a href="#concept-node" title="concept-node">node</a> if and only if the
  <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> and
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> are different.

  <li><p>The
  <code title="dom-Range-commonAncestorContainer"><a href="#dom-range-commonancestorcontainer">commonAncestorContainer</a></code>
  attribute value is never <a href="#contained">contained</a> or
  <a href="#partially-contained">partially contained</a>.

  <li>If the <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is an
  <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of the
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, the common
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> will
  be the <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>. Exactly one
  of its <a href="#concept-tree-child" title="concept-tree-child">children</a> will be
  <a href="#partially-contained">partially contained</a>, and a
  <a href="#concept-tree-child" title="concept-tree-child">child</a> will be <a href="#contained">contained</a>
  if and only if it <a href="#concept-tree-preceding" title="concept-tree-preceding">precedes</a> the
  <a href="#partially-contained">partially contained</a>
  <a href="#concept-tree-child" title="concept-tree-child">child</a>. If the
  <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> is an
  <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of the
  <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>, the opposite
  holds.

  <li><p>If the <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is
  not an
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
  the <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, nor vice versa,
  the common
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> will
  be distinct from both of them. Exactly two of its
  <a href="#concept-tree-child" title="concept-tree-child">children</a> will be
  <a href="#partially-contained">partially contained</a>, and a
  <a href="#concept-tree-child" title="concept-tree-child">child</a> will be contained if and only
  if it lies between those two.
 </ul>
</div>

<hr>

<dl class="domintro">
 <dt><code><var title="">range</var> = new <a href="#dom-range" title="dom-Range">Range</a>()</code>
 <dd><p>Returns a new <a href="#concept-range" title="concept-range">range</a>.
</dl>

<p>The <dfn id="dom-range" title="dom-Range"><code>Range()</code></dfn> constructor must return a new
<a href="#concept-range" title="concept-range">range</a> with
(global object's associated <a href="#concept-document" title="concept-document">document</a>, 0) as its
<a href="#concept-range-start" title="concept-range-start">start</a> and
<a href="#concept-range-end" title="concept-range-end">end</a>.

<hr>

<dl class="domintro">
 <dt><var title="">node</var> = <var title="">range</var> . <code title="dom-Range-startContainer"><a href="#dom-range-startcontainer">startContainer</a></code>
 <dd><p>Returns <var title="">range</var>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.

 <dt><var title="">offset</var> = <var title="">range</var> . <code title="dom-Range-startOffset"><a href="#dom-range-startoffset">startOffset</a></code>
 <dd><p>Returns <var title="">range</var>'s
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>.

 <dt><var title="">node</var> = <var title="">range</var> . <code title="dom-Range-endContainer"><a href="#dom-range-endcontainer">endContainer</a></code>
 <dd><p>Returns <var title="">range</var>'s
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>.

 <dt><var title="">offset</var> = <var title="">range</var> . <code title="dom-Range-endOffset"><a href="#dom-range-endoffset">endOffset</a></code>
 <dd><p>Returns <var title="">range</var>'s
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>.

 <dt><var title="">collapsed</var> = <var title="">range</var> . <code title="dom-Range-collapsed"><a href="#dom-range-collapsed">collapsed</a></code>
 <dd><p>Returns true if <var title="">range</var>'s
 <a href="#concept-range-start" title="concept-range-start">start</a> and
 <a href="#concept-range-end" title="concept-range-end">end</a> are the same, and false otherwise.

 <dt><var title="">container</var> = <var title="">range</var> . <code title="dom-Range-commonAncestorContainer"><a href="#dom-range-commonancestorcontainer">commonAncestorContainer</a></code>
 <dd><p>Returns the <a href="#concept-node" title="concept-node">node</a>, furthest away from
 the <a href="#concept-document" title="concept-document">document</a>, that is an
 <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of both
 <var title="">range</var>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> and
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>.
</dl>

<p>The <dfn id="dom-range-startcontainer" title="dom-Range-startContainer"><code>startContainer</code></dfn>
attribute must return the
<a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.

<p>The <dfn id="dom-range-startoffset" title="dom-Range-startOffset"><code>startOffset</code></dfn>
attribute must return the
<a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>.

<p>The <dfn id="dom-range-endcontainer" title="dom-Range-endContainer"><code>endContainer</code></dfn>
attribute must return the
<a href="#concept-range-end-node" title="concept-range-end-node">end node</a>.

<p>The <dfn id="dom-range-endoffset" title="dom-Range-endOffset"><code>endOffset</code></dfn>
attribute must return the
<a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>.

<p>The <dfn id="dom-range-collapsed" title="dom-Range-collapsed"><code>collapsed</code></dfn> attribute
must return true if <a href="#concept-range-start" title="concept-range-start">start</a> is the same
as <a href="#concept-range-end" title="concept-range-end">end</a>, and false otherwise.

<p>The
<dfn id="dom-range-commonancestorcontainer" title="dom-Range-commonAncestorContainer"><code>commonAncestorContainer</code></dfn>
attribute must run these steps:

<ol>
 <li><p>Let <var title="">container</var> be
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.

 <li><p>While <var title="">container</var> is not an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, let
 <var title="">container</var> be <var title="">container</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>Return <var title="">container</var>.
</ol>

<hr>

<p>To <dfn id="concept-range-bp-set" title="concept-range-bp-set">set the start or end</dfn> of a
<var title="">range</var> to a
<a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
(<var title="">node</var>, <var title="">offset</var>), run these steps:

<ol>
 <li><p>If <var title="">node</var> is a
 <a href="#concept-doctype" title="concept-doctype">doctype</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.

 <li><p>If <var title="">offset</var> is greater than
 <var title="">node</var>'s <a href="#concept-node-length" title="concept-node-length">length</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#indexsizeerror">IndexSizeError</a></code>" exception and terminate these steps.

 <li><p>Let <var title="">bp</var> be the
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">node</var>, <var title="">offset</var>).

 <li>
  <dl class="switch">
   <dt>If these steps were invoked as "set the start"
   <dd>
    <ol>
     <li><p>If <var title="">bp</var> is
     <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a> the
     <var title="">range</var>'s <a href="#concept-range-end" title="concept-range-end">end</a>, or
     if the <var title="">range</var>'s
     <a href="#concept-range-root" title="concept-range-root">root</a> is not equal to
     <var title="">node</var>'s <a href="#concept-tree-root" title="concept-tree-root">root</a>, set
     <var title="">range</var>'s <a href="#concept-range-end" title="concept-range-end">end</a> to
     <var title="">bp</var>.

     <li><p>Set <var title="">range</var>'s
     <a href="#concept-range-start" title="concept-range-start">start</a> to <var title="">bp</var>.
    </ol>
   <dt>If these steps were invoked as "set the end"
   <dd>
    <ol>
     <li><p>If <var title="">bp</var> is
     <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a> the
     <var title="">range</var>'s <a href="#concept-range-start" title="concept-range-start">start</a>,
     or if the <var title="">range</var>'s
     <a href="#concept-range-root" title="concept-range-root">root</a> is not equal to
     <var title="">node</var>'s <a href="#concept-tree-root" title="concept-tree-root">root</a>, set
     <var title="">range</var>'s <a href="#concept-range-start" title="concept-range-start">start</a>
     to <var title="">bp</var>.

     <li><p>Set <var title="">range</var>'s
     <a href="#concept-range-end" title="concept-range-end">end</a> to <var title="">bp</var>.
    </ol>
  </dl>
</ol>

<p>The
<dfn id="dom-range-setstart" title="dom-Range-setStart"><code>setStart(<var>node</var>, <var>offset</var>)</code></dfn>
method must <a href="#concept-range-bp-set" title="concept-range-bp-set">set the start</a> of the
<a href="#context-object">context object</a> to
<a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
(<var title="">node</var>, <var title="">offset</var>).

<p>The
<dfn id="dom-range-setend" title="dom-Range-setEnd"><code>setEnd(<var>refNode</var>, <var>offset</var>)</code></dfn>
method must <a href="#concept-range-bp-set" title="concept-range-bp-set">set the end</a> of the
<a href="#context-object">context object</a> to
<a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
(<var title="">node</var>, <var title="">offset</var>).

<p>The
<dfn id="dom-range-setstartbefore" title="dom-Range-setStartBefore"><code>setStartBefore(<var>node</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">parent</var> be <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">parent</var> is null,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.

 <li><p><a href="#concept-range-bp-set" title="concept-range-bp-set">Set the start</a> of the
 <a href="#context-object">context object</a> to
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">parent</var>, <var title="">node</var>'s
 <a href="#concept-tree-index" title="concept-tree-index">index</a>).
</ol>

<p>The
<dfn id="dom-range-setstartafter" title="dom-Range-setStartAfter"><code>setStartAfter(<var>node</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">parent</var> be <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">parent</var> is null,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.

 <li><p><a href="#concept-range-bp-set" title="concept-range-bp-set">Set the start</a> of the
 <a href="#context-object">context object</a> to
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">parent</var>, <var title="">node</var>'s
 <a href="#concept-tree-index" title="concept-tree-index">index</a> plus one).
</ol>

<p>The
<dfn id="dom-range-setendbefore" title="dom-Range-setEndBefore"><code>setEndBefore(<var>node</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">parent</var> be <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">parent</var> is null,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.

 <li><p><a href="#concept-range-bp-set" title="concept-range-bp-set">Set the end</a> of the
 <a href="#context-object">context object</a> to
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">parent</var>, <var title="">node</var>'s
 <a href="#concept-tree-index" title="concept-tree-index">index</a>).
</ol>

<p>The
<dfn id="dom-range-setendafter" title="dom-Range-setEndAfter"><code>setEndAfter(<var>node</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">parent</var> be <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">parent</var> is null,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.

 <li><p><a href="#concept-range-bp-set" title="concept-range-bp-set">Set the end</a> of the
 <a href="#context-object">context object</a> to
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">parent</var>, <var title="">node</var>'s
 <a href="#concept-tree-index" title="concept-tree-index">index</a> plus one).
</ol>


<p>The
<dfn id="dom-range-collapse" title="dom-Range-collapse"><code>collapse(<var>toStart</var>)</code></dfn>
method must if <var title="">toStart</var> is true, set
<a href="#concept-range-end" title="concept-range-end">end</a> to
<a href="#concept-range-start" title="concept-range-start">start</a>, and set
<a href="#concept-range-start" title="concept-range-start">start</a> to
<a href="#concept-range-end" title="concept-range-end">end</a> otherwise.


<p>The
<dfn id="dom-range-selectnode" title="dom-Range-selectNode"><code>selectNode(<var>refNode</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">parent</var> be <var title="">refNode</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">parent</var> is null,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" and terminate these steps.

 <li><p>Let <var title="">index</var> be the
 <a href="#concept-tree-index" title="concept-tree-index">index</a> of <var title="">refNode</var>.

 <li><p>Set <a href="#concept-range-start" title="concept-range-start">start</a> to the
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">parent</var>, <var title="">index</var>).

 <li><p>Set <a href="#concept-range-end" title="concept-range-end">end</a> to the
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">parent</var>, <var title="">index</var> plus one).
</ol>

<p>The
<dfn id="dom-range-selectnodecontents" title="dom-Range-selectNodeContents"><code>selectNodeContents(<var>refNode</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">refNode</var> is a
 <a href="#concept-doctype" title="concept-doctype">doctype</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" and terminate these steps.

 <li><p>Let <var title="">length</var> be the
 <a href="#concept-node-length" title="concept-node-length">length</a> of <var title="">refNode</var>.

 <li><p>Set <a href="#concept-range-start" title="concept-range-start">start</a> to the
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">refNode</var>, 0).

 <li><p>Set <a href="#concept-range-end" title="concept-range-end">end</a> to the
 <a href="#concept-range-bp" title="concept-range-bp">boundary point</a>
 (<var title="">refNode</var>, <var title="">length</var>).
</ol>

<hr>

<p>The
<dfn id="dom-range-compareboundarypoints" title="dom-Range-compareBoundaryPoints"><code>compareBoundaryPoints(<var>how</var>, <var>sourceRange</var>)</code></dfn>
method must run these steps:

<ol>
 <li>
  <p>If <var>how</var> is not one of
  <ul>
   <li><code title="dom-CompareHow-START_TO_START"><a href="#dom-comparehow-start_to_start">START_TO_START</a></code>,
   <li><code title="dom-CompareHow-START_TO_END"><a href="#dom-comparehow-start_to_end">START_TO_END</a></code>,
   <li><code title="dom-CompareHow-END_TO_END"><a href="#dom-comparehow-end_to_end">END_TO_END</a></code>, and
   <li><code title="dom-CompareHow-END_TO_START"><a href="#dom-comparehow-end_to_start">END_TO_START</a></code>,
  </ul>
  <p><a href="#concept-throw" title="concept-throw">throw</a> a
  "<code><a href="#notsupportederror">NotSupportedError</a></code>" exception and terminate these steps.
 <!--
 Apparent behaviors from black-box testing:

 IE9: Converts to unsigned short per WebIDL, then throws "Error: Invalid
 argument." if it's not 0-3.

 Firefox 12.0a1: Converts to unsigned short per WebIDL, then throws
 NS_ERROR_ILLEGAL_VALUE if it's not 0-3.

 Chrome 17 dev: Converts to unsigned *long* per WebIDL, and treats bad values
 as 0.  Never throws.

 Opera Next 12.00 alpha: Throws NotSupportedError unless the value is -0, 0, 1,
 2, 3, or an integer equal to one of these modulo 2^32.  (In particular, it
 throws on NaN, Infinity, and -Infinity instead of treating them as 0 per
 WebIDL.)

 The spec follows IE9/Gecko, except that we throw NotSupportedError (like
 Opera) instead of a nonstandard exception type.
 -->

 <li><p>If <a href="#context-object">context object</a>'s
 <a href="#concept-range-root" title="concept-range-root">root</a> is not the same as
 <var title="">sourceRange</var>'s <a href="#concept-range-root" title="concept-range-root">root</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> a
 "<code><a href="#wrongdocumenterror">WrongDocumentError</a></code>" exception and terminate these
 steps.

 <li>
  <p>If <var title="">how</var> is:
  <dl class="switch">
   <dt><code title="dom-CompareHow-START_TO_START"><a href="#dom-comparehow-start_to_start">START_TO_START</a></code>:
   <dd>
    <p>Let <var title="">this point</var> be the <a href="#context-object">context object</a>'s
    <a href="#concept-range-start" title="concept-range-start">start</a>.
    <p>Let <var title="">other point</var> be <var title="">sourceRange</var>'s
    <a href="#concept-range-start" title="concept-range-start">start</a>.

   <dt><code title="dom-CompareHow-START_TO_END"><a href="#dom-comparehow-start_to_end">START_TO_END</a></code>:
   <dd>
    <p>Let <var title="">this point</var> be the <a href="#context-object">context object</a>'s
    <a href="#concept-range-end" title="concept-range-end">end</a>.
    <p>Let <var title="">other point</var> be <var title="">sourceRange</var>'s
    <a href="#concept-range-start" title="concept-range-start">start</a>.

    <dt><code title="dom-CompareHow-END_TO_END"><a href="#dom-comparehow-end_to_end">END_TO_END</a></code>:
    <dd>
     <p>Let <var title="">this point</var> be the <a href="#context-object">context object</a>'s
     <a href="#concept-range-end" title="concept-range-end">end</a>.
     <p>Let <var title="">other point</var> be <var title="">sourceRange</var>'s
     <a href="#concept-range-end" title="concept-range-end">end</a>.

    <dt><code title="dom-CompareHow-END_TO_START"><a href="#dom-comparehow-end_to_start">END_TO_START</a></code>:
    <dd>
     <p>Let <var title="">this point</var> be the <a href="#context-object">context object</a>'s
     <a href="#concept-range-start" title="concept-range-start">start</a>.
     <p>Let <var title="">other point</var> be <var title="">sourceRange</var>'s
     <a href="#concept-range-end" title="concept-range-end">end</a>.
   </dl>

  <li>
   <p>If the <a href="#concept-range-bp-position" title="concept-range-bp-position">position</a> of
   <var title="">this point</var> relative to <var title="">other point</var> is

   <dl class="switch">
    <dt><a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>
    <dd>Return −1.

    <dt><a href="#concept-range-bp-equal" title="concept-range-bp-equal">equal</a>
    <dd>Return 0.

    <dt><a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>
    <dd>Return 1.
   </dl>
</ol>

<p>The <dfn id="dom-range-deletecontents" title="dom-Range-deleteContents"><code>deleteContents()</code></dfn>
method must run these steps:

<ol>
 <li><p>If <a href="#concept-range-start" title="concept-range-start">start</a> equals
 <a href="#concept-range-end" title="concept-range-end">end</a>, terminate these steps.
 <!-- This might actually make no difference, but it's not immediately
 obvious what would happen otherwise if the start/end were text/comment:
 are all the substeps of the next step actually no-ops, or could some have
 side effects? -->

 <li><p>Let <var title="">original start node</var>,
 <var title="">original start offset</var>, <var title="">original end node</var>,
 and <var title="">original end offset</var> be the
 <a href="#context-object">context object</a>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>,
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>,
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, and
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>, respectively.

 <li><p>If <var title="">original start node</var> and
 <var title="">original end node</var> are the same, and they are a
 <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-cd-replace" title="concept-CD-replace">replace data</a> with node
 <var title="">original start node</var>, offset
 <var title="">original start offset</var>, count
 <var title="">original end offset</var> minus
 <var title="">original start offset</var>, and data the empty string, and then
 terminate these steps.

 <li><p>Let <var title="">nodes to remove</var> be a list of all the
 <a href="#concept-node" title="concept-node">nodes</a> that are <a href="#contained">contained</a> in
 the <a href="#context-object">context object</a>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, omitting any
 <a href="#concept-node" title="concept-node">node</a> whose
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is also
 <a href="#contained">contained</a> in the <a href="#context-object">context object</a>.

 <li><p>If <var title="">original start node</var> is an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original end node</var>, set
 <var title="">new node</var> to <var title="">original start node</var> and
 <var title="">new offset</var> to <var title="">original start offset</var>.

 <li>
  <p>Otherwise:
  <ol>
   <li><p>Let <var title="">reference node</var> equal
   <var title="">original start node</var>.

   <li><p>While <var title="">reference node</var>'s
   <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is not null and is not an
   <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
   <var title="">original end node</var>, set <var title="">reference node</var>
   to its <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

   <li>
    <p>Set <var title="">new node</var> to the
    <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> of
    <var title="">reference node</var>, and <var title="">new offset</var> to one
    plus the <a href="#concept-tree-index" title="concept-tree-index">index</a> of
    <var title="">reference node</var>.

    <p class="note">If <var title="">reference node</var>'s
    <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> were null, it would be the
    <a href="#concept-range-root" title="concept-range-root">root</a> of the
    <a href="#context-object">context object</a>, so would be an
    <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
    <var title="">original end node</var>, and we could not reach this point.
  </ol>

 <li><p>If <var title="">original start node</var> is a <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-cd-replace" title="concept-CD-replace">replace data</a> with node
 <var title="">original start node</var>, offset
 <var title="">original start offset</var>, count
 <var title="">original start node</var>'s
 <a href="#concept-node-length" title="concept-node-length">length</a> minus
 <var title="">original start offset</var>, data the empty string.

 <li><p>For each <var title="">node</var> in <var title="">nodes to remove</var>,
 in <a href="#concept-tree-order" title="concept-tree-order">tree order</a>,
 <a href="#concept-node-remove" title="concept-node-remove">remove</a> <var title="">node</var> from
 its <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">original end node</var> is a <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-cd-replace" title="concept-CD-replace">replace data</a> with node
 <var title="">original end node</var>, offset 0, count
 <var title="">original end offset</var>), and data the empty string.

 <li><p>Set <a href="#concept-range-start" title="concept-range-start">start</a> and
 <a href="#concept-range-end" title="concept-range-end">end</a> to
 (<var title="">new node</var>, <var title="">new offset</var>).
</ol>

<p>The <dfn id="dom-range-extractcontents" title="dom-Range-extractContents"><code>extractContents()</code></dfn> method
must run these steps:

<ol>
 <li><p>Let <var title="">frag</var> be a new <code><a href="#documentfragment">DocumentFragment</a></code>
 whose <a href="#concept-node-document" title="concept-node-document">node document</a> is the same as
 the <a href="#concept-node-document" title="concept-node-document">node document</a> of the
 <a href="#context-object">context object</a>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.

 <li><p>If <a href="#concept-range-start" title="concept-range-start">start</a> equals
 <a href="#concept-range-end" title="concept-range-end">end</a>, return <var title="">frag</var>, and
 terminate these steps.
 <!-- This is only really needed when the start and end nodes are
 text/comment, to avoid creating an empty clone as the child of the
 fragment. (Opera 11 actually does include such an empty clone, it seems,
 but Gecko and WebKit do not as of March 2011, so we follow them.)
 Otherwise, the following steps are all no-ops. But it's simplest to include
 this step anyway. -->

 <li><p>Let <var title="">original start node</var>,
 <var title="">original start offset</var>, <var title="">original end node</var>,
 and <var title="">original end offset</var> be the
 <a href="#context-object">context object</a>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>,
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>,
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, and
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>, respectively.

 <li>
  <p>If <var title="">original start node</var> equals
  <var title="">original end node</var>, and they are a <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>:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">original start node</var>.

   <li><p>Set the <a href="#concept-cd-data" title="concept-CD-data">data</a> of
   <var title="">clone</var> to the result of
   <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
   <var title="">original start node</var>, offset
   <var title="">original start offset</var>, and count
   <var title="">original end offset</var> minus
   <var title="">original start offset</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

   <li><p><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
   <var title="">original start node</var>, offset
   <var title="">original start offset</var>, count
   <var title="">original end offset</var> minus
   <var title="">original start offset</var>, and data the empty string.

   <li><p>Return <var title="">frag</var> and terminate these steps.
  </ol>

 <li><p>Let <var title="">common ancestor</var> be
 <var title="">original start node</var>.

 <li><p>While <var title="">common ancestor</var> is not an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original end node</var>, set <var title="">common ancestor</var> to
 its own <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">original start node</var> is an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original end node</var>, let
 <var title="">first partially contained child</var> be null.

 <li><p>Otherwise, let <var title="">first partially contained child</var> be
 the first <a href="#concept-tree-child" title="concept-tree-child">child</a> of
 <var title="">common ancestor</var> that is <a href="#partially-contained">partially contained</a>
 in the <a href="#context-object">context object</a>.

 <li><p>If <var title="">original end node</var> is an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original start node</var>, let
 <var title="">last partially contained child</var> be null.

 <li>
  <p>Otherwise, let <var title="">last partially contained child</var> be
  the last <a href="#concept-tree-child" title="concept-tree-child">child</a> of
  <var title="">common ancestor</var> that is <a href="#partially-contained">partially contained</a>
  in the <a href="#context-object">context object</a>.

  <p class="note">These variable assignments do actually always make sense.
  For instance, if the original start node is not an
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
  the
  original end node, the original start node is itself partially contained in
  the range, and so are all its ancestors up until a child of the common
  ancestor. The common ancestor can't be original start node, because it must
  be an
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
  the original end node. The other case is
  similar. Also, notice that the two children will never be equal if both are
  defined.

 <li><p>Let <var title="">contained children</var> be a list of all
 <a href="#concept-tree-child" title="concept-tree-child">children</a> of
 <var title="">common ancestor</var> that are <a href="#contained">contained</a> in the
 <a href="#context-object">context object</a>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.

 <li>
  <p>If any member of <var title="">contained children</var> is a
  <code><a href="#documenttype">DocumentType</a></code>, <a href="#concept-throw" title="concept-throw">throw</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" exception and terminate these
  steps.
  <!-- Firefox 4.0 actually removes the non-DocumentType nodes before
  throwing the exception. Opera 11.00 removes the DocumentType too, and
  doesn't throw. I go with IE9 and Chrome 12 dev, which don't remove any
  nodes. DOM 2 Range doesn't specify what exactly happens here, except that
  an exception should be thrown. -->

  <p class="note">We do not have to worry about the first or last partially
  contained node, because a <code><a href="#documenttype">DocumentType</a></code> can never be
  partially contained. It cannot be a boundary point of a range, and it
  cannot be the ancestor of anything.

 <li><p>If <var title="">original start node</var> is an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original end node</var>, set <var title="">new node</var> to
 <var title="">original start node</var> and <var title="">new offset</var> to
 <var title="">original start offset</var>.

 <li>
  <p>Otherwise:
  <ol>
    <li>Let <var title="">reference node</var> equal <var title="">original start
    node</var>.

    <li>While <var title="">reference node</var>'s <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is not null and is not an
    <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
    <var title="">original end node</var>,
    set <var title="">reference node</var> to its <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

    <li>Set <var title="">new node</var> to the <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> of <var title="">reference node</var>,
    and <var title="">new offset</var> to one plus the <a href="#concept-tree-index" title="concept-tree-index">index</a> of <var title="">reference node</var>.

    <p class="note">If <var title="">reference node</var>'s <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> were null,
    it would be the <a href="#concept-range-root" title="concept-range-root">root</a> of the
    <a href="#context-object">context object</a>, so would be an
    <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of <var title="">original end node</var>, and we couldn't
    reach this point.
  </ol>

  <!-- Now we start with mutations, so we can't refer to the context object
  anymore unless we carefully consider how it will have mutated. -->

 <li>
  <p>If <var title="">first partially contained child</var> is a
  <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>:

  <p class="note">In this case, the first partially contained child is the
  original start node.

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">original start node</var>.

   <li><p>Set the <a href="#concept-cd-data" title="concept-CD-data">data</a> of
   <var title="">clone</var> to the result of
   <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
   <var title="">original start node</var>, offset
   <var title="">original start offset</var>, and count
   <var title="">original start node</var>'s
   <a href="#concept-node-length" title="concept-node-length">length</a> minus
   <var title="">original start offset</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

   <li><p><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
   <var title="">original start node</var>, offset
   <var title="">original start offset</var>, count
   <var title="">original start node</var>'s
   <a href="#concept-node-length" title="concept-node-length">length</a> minus
   <var title="">original start offset</var>, and data the empty string.
  </ol>

 <li>
  <p>Otherwise, if <var title="">first partially contained child</var> is not
  null:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">first partially contained child</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

    <li>Let <var title="">subrange</var> be a new <code><a href="#range">Range</a></code> whose <a href="#concept-range-start" title="concept-range-start">start</a> is (<var title="">original start
    node</var>, <var title="">original start offset</var>) and whose <a href="#concept-range-end" title="concept-range-end">end</a> is (<var title="">first partially contained
    child</var>, <a href="#concept-node-length" title="concept-node-length">length</a> of <var title="">first partially contained child</var>).

    <li>Let <var title="">subfrag</var> be the result of calling <code title="dom-Range-extractContents"><a href="#dom-range-extractcontents">extractContents()</a></code> on <var title="">subrange</var>.

    <p class="XXX">Is this method of recursing black-box detectable?  E.g., would
    it fire extra DOM mutation events or something?  What we really mean is to
    get a list of nodes to insert, then insert them directly into <var title="">frag</var>, without an intermediate document fragment.

   <li>For each <a href="#concept-tree-child" title="concept-tree-child">child</a> of
   <var title="">subfrag</var>, in
   <a href="#concept-tree-order" title="concept-tree-order">tree order</a>,
   <a href="#concept-node-append" title="concept-node-append">append</a> that
   <a href="#concept-tree-child" title="concept-tree-child">child</a> to <var title="">clone</var>.
  </ol>

 <li><p>For each <var title="">contained child</var> in
 <var title="">contained children</var>,
 <a href="#concept-node-append" title="concept-node-append">append</a>
 <var title="">contained child</var> to <var title="">frag</var>.

 <li>
  <p>If <var title="">last partially contained child</var> is a
  <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>:

  <p class="note">In this case, the last partially contained child is the
  original end node.

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">original end node</var>.

   <li><p>Set the <a href="#concept-cd-data" title="concept-CD-data">data</a> of
   <var title="">clone</var> to the result of
   <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
   <var title="">original end node</var>, offset 0, and count
   <var title="">original end offset</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

    <li><p><a href="#concept-cd-replace" title="concept-CD-replace">Replace data</a> with node
    <var title="">original end node</var>, offset 0, count
    <var title="">original end offset</var>, and data the empty string.
  </ol>

 <li>
  <p>Otherwise, if <var title="">last partially contained child</var> is not
  null:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">last partially contained child</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

    <li>Let <var title="">subrange</var> be a new <code><a href="#range">Range</a></code> whose <a href="#concept-range-start" title="concept-range-start">start</a> is (<var title="">last partially
    contained child</var>, 0) and whose <a href="#concept-range-end" title="concept-range-end">end</a> is (<var title="">original end node</var>,
    <var title="">original end offset</var>).

    <li>Let <var title="">subfrag</var> be the result of calling <code title="dom-Range-extractContents"><a href="#dom-range-extractcontents">extractContents()</a></code> on <var title="">subrange</var>.

   <li><p>For each <a href="#concept-tree-child" title="concept-tree-child">child</a> of
   <var title="">subfrag</var>, in
   <a href="#concept-tree-order" title="concept-tree-order">tree order</a>,
   <a href="#concept-node-append" title="concept-node-append">append</a> that
   <a href="#concept-tree-child" title="concept-tree-child">child</a> to <var title="">clone</var>.
  </ol>

 <li><p>Set <a href="#concept-range-start" title="concept-range-start">start</a> and
 <a href="#concept-range-end" title="concept-range-end">end</a> to
 (<var title="">new node</var>, <var title="">new offset</var>).

 <li><p>Return <var title="">frag</var>.
</ol>

<p>The <dfn id="dom-range-clonecontents" title="dom-Range-cloneContents"><code>cloneContents()</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">frag</var> be a new <code><a href="#documentfragment">DocumentFragment</a></code>
 whose <a href="#concept-node-document" title="concept-node-document">node document</a> is the same as
 the <a href="#concept-node-document" title="concept-node-document">node document</a> of the
 <a href="#context-object">context object</a>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.

 <li><p>If <a href="#concept-range-start" title="concept-range-start">start</a> equals
 <a href="#concept-range-end" title="concept-range-end">end</a>, return <var title="">frag</var>, and
 terminate these steps.
 <!-- This is only really needed when the start and end nodes are
 text/comment, to avoid creating an empty clone as the child of the
 fragment. (Opera 11 actually does include such an empty clone, it seems,
 but Gecko and WebKit do not as of March 2011, so we follow them.)
 Otherwise, the following steps are all no-ops. But it's simplest to include
 this step anyway. -->

 <li><p>Let <var title="">original start node</var>,
 <var title="">original start offset</var>, <var title="">original end node</var>,
 and <var title="">original end offset</var> be the
 <a href="#context-object">context object</a>'s
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>,
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>,
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, and
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>, respectively.

 <li>
  <p>If <var title="">original start node</var> equals
  <var title="">original end node</var>, and they are a <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>:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">original start node</var>.

   <li><p>Set the <a href="#concept-cd-data" title="concept-CD-data">data</a> of
   <var title="">clone</var> to the result of
   <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
   <var title="">original start node</var>, offset
   <var title="">original start offset</var>, and count
   <var title="">original end offset</var> minus
   <var title="">original start offset</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

   <li><p>Return <var title="">frag</var> and terminate these steps.
  </ol>

 <li><p>Let <var title="">common ancestor</var> be
 <var title="">original start node</var>.

 <li><p>While <var title="">common ancestor</var> is not an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original end node</var>, set
 <var title="">common ancestor</var> to its own
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">original start node</var> is an
 <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
 <var title="">original end node</var>, let
 <var title="">first partially contained child</var> be null.

 <li><p>Otherwise, let <var title="">first partially contained child</var> be
 the first <a href="#concept-tree-child" title="concept-tree-child">child</a> of
 <var title="">common ancestor</var> that is <a href="#partially-contained">partially contained</a>
 in the <a href="#context-object">context object</a>.

 <li><p>If <var title="">original end node</var> is an
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
  <var title="">original start node</var>, let <var title="">last
  partially contained child</var> be null.

  <li>Otherwise, let <var title="">last partially contained child</var> be the
  last <a href="#concept-tree-child" title="concept-tree-child">child</a> of
  <var title="">common ancestor</var> that is <a href="#partially-contained">partially contained</a> in
  the <a href="#context-object">context object</a>.

  <p class="note">These variable assignments do actually always make sense. For
  instance, if the original start node is not an
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
  the
  original end node, the original start node is itself partially contained in
  the range, and so are all its ancestors up until a child of the common
  ancestor. The common ancestor can't be original start node, because it must
  be an
  <a href="#concept-tree-inclusive-ancestor" title="concept-tree-inclusive-ancestor">inclusive ancestor</a> of
  the original end node. The other case is
  similar. Also, notice that the two children will never be equal if both are
  defined.

 <li><p>Let <var title="">contained children</var> be a list of all
 <a href="#concept-tree-child" title="concept-tree-child">children</a> of
 <var title="">common ancestor</var> that are <a href="#contained">contained</a> in the
 <a href="#context-object">context object</a>, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.

 <li>
  <p>If any member of <var title="">contained children</var> is a
  <code><a href="#documenttype">DocumentType</a></code>, <a href="#concept-throw" title="concept-throw">throw</a> a
  "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" exception and terminate these
  steps.

  <p class="note">We don't have to worry about the first or last partially
  contained node, because a <code><a href="#documenttype">DocumentType</a></code> can never be partially
  contained. It can't be a boundary point of a range, and it can't be the
  ancestor of anything.

 <li>
  <p>If <var title="">first partially contained child</var> is a
  <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>:

  <p class="note">In this case, the first partially contained child is the
  original start node.

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">original start node</var>.

   <li><p>Set the <a href="#concept-cd-data" title="concept-CD-data">data</a> of
   <var title="">clone</var> to the result of
   <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
   <var title="">original start node</var>, offset
   <var title="">original start offset</var>, and count
   <var title="">original start node</var>'s
   <a href="#concept-node-length" title="concept-node-length">length</a> minus
   <var title="">original start offset</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.
  </ol>

 <li>
  <p>Otherwise, if <var title="">first partially contained child</var> is not
  null:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">first partially contained child</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

    <li>Let <var title="">subrange</var> be a new <code><a href="#range">Range</a></code> whose <a href="#concept-range-start" title="concept-range-start">start</a> is (<var title="">original start
    node</var>, <var title="">original start offset</var>) and whose <a href="#concept-range-end" title="concept-range-end">end</a> is (<var title="">first partially contained
    child</var>, <a href="#concept-node-length" title="concept-node-length">length</a> of <var title="">first partially contained child</var>).

    <li>Let <var title="">subfrag</var> be the result of calling <code title="dom-Range-cloneContents"><a href="#dom-range-clonecontents">cloneContents()</a></code> on <var title="">subrange</var>.

    <p class="XXX">Is this method of recursing black-box detectable?  E.g., would
    it fire extra DOM mutation events or something?  What we really mean is to
    get a list of nodes to insert, then insert them directly into <var title="">frag</var>, without an intermediate document fragment.

   <li><p>For each <a href="#concept-tree-child" title="concept-tree-child">child</a> of
   <var title="">subfrag</var>, in
   <a href="#concept-tree-order" title="concept-tree-order">tree order</a>,
   <a href="#concept-node-append" title="concept-node-append">append</a> that
   <a href="#concept-tree-child" title="concept-tree-child">child</a> to <var title="">clone</var>.
  </ol>

 <li>
  <p>For each <var title="">contained child</var> in
  <var title="">contained children</var>:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">contained child</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.
  </ol>

 <li>
  <p>If <var title="">last partially contained child</var> is a
  <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>:

  <p class="note">In this case, the last partially contained child is the
  original end node.

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">original end node</var>.

   <li><p>Set the <a href="#concept-cd-data" title="concept-CD-data">data</a> of
   <var title="">clone</var> to the result of
   <a href="#concept-cd-substring" title="concept-CD-substring">substringing data</a> with node
   <var title="">original end node</var>, offset 0, and count
   <var title="">original end offset</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.
  </ol>

 <li>
  <p>Otherwise, if <var title="">last partially contained child</var> is not
  null:

  <ol>
   <li><p>Let <var title="">clone</var> be a
   <a href="#concept-node-clone" title="concept-node-clone">clone</a> of
   <var title="">last partially contained child</var>.

   <li><p><a href="#concept-node-append" title="concept-node-append">Append</a> <var title="">clone</var>
   to <var title="">frag</var>.

    <li>Let <var title="">subrange</var> be a new <code><a href="#range">Range</a></code> whose <a href="#concept-range-start" title="concept-range-start">start</a> is (<var title="">last partially
    contained child</var>, 0) and whose <a href="#concept-range-end" title="concept-range-end">end</a> is (<var title="">original end node</var>,
    <var title="">original end offset</var>).

    <li>Let <var title="">subfrag</var> be the result of calling <code title="dom-Range-cloneContents"><a href="#dom-range-clonecontents">cloneContents()</a></code> on <var title="">subrange</var>.

   <li><p>For each <a href="#concept-tree-child" title="concept-tree-child">child</a> of
   <var title="">subfrag</var>, in
   <a href="#concept-tree-order" title="concept-tree-order">tree order</a>,
   <a href="#concept-node-append" title="concept-node-append">append</a> that
   <a href="#concept-tree-child" title="concept-tree-child">child</a> to <var title="">clone</var>.
  </ol>

 <li><p>Return <var title="">frag</var>.
</ol>

<p>The
<dfn id="dom-range-insertnode" title="dom-Range-insertNode"><code>insertNode(<var>node</var>)</code></dfn>
method must run these steps:

<ol>
  <!-- IE9 and Opera 11.00 throw "WrongDocumentError" if the documents don't
  match, as is their wont, and as DOM 2 Range requires. But as elsewhere, we
  just let the UA change the document if it doesn't match.

  Chrome 12 dev also throws "HierarchyRequestError" if node is the same
  as the start node (at least for text nodes). This doesn't seem to make
  much sense, since insertBefore() works fine to move a node to its current
  position, and other browsers disagree, so the spec follows the majority.
  -->

 <li><p>If <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is either
 a <code><a href="#processinginstruction">ProcessingInstruction</a></code> or <code><a href="#comment">Comment</a></code>
 <a href="#concept-node" title="concept-node">node</a>, or a <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">node</a> whose
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is null,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>" exception and terminate these steps.
 <!--
 Behavior for Text node with null parent:

 IE9: Allows it to go through, resulting in the text/comment node having a non-null previousSibling but a null parentNode. (?!)
 Firefox 4.0: Throws non-standard exception
 Chrome 12 dev: Throws "HierarchyRequestError"
 Opera 11.00: Doesn't come up, doesn't allow ranges on detached nodes

 IE is clearly crazy, and non-standard exceptions are no good, so we go with
 WebKit.

 For a Comment node, see https://www.w3.org/Bugs/Public/show_bug.cgi?id=15350.
 IE9, Firefox 12.0a1, and Chrome 17 dev all agree on throwing a
 HierarchyRequestError.  Opera Next 12.00 alpha splits the comment, same as a
 text node.
 -->

 <!-- IE9 and Chrome 12 dev throw an exception before splitting the text
 node if the insertBefore() is going to throw an exception (at least if the
 new node is the parent of the start node, for instance). Firefox 4.0 and
 Opera 11.00 don't, and the latter behavior is much easier to spec, so
 that's what I go with.

 IE9 doesn't call splitText() if the offset is 0. This makes sense, but I go
 with what all other browsers do. -->
 <li><p>If <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is a
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>,
 <a href="#concept-text-split" title="concept-Text-split">split</a> it with offset
 <a href="#context-object">context object</a>'s
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>, and let
 <var title="">reference node</var> be the result.

 <li><p>Otherwise, let <var title="">reference node</var> be the
 <a href="#concept-tree-child" title="concept-tree-child">child</a> of
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> whose
 <a href="#concept-tree-index" title="concept-tree-index">index</a> is
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a>, or null if
 there is no such <a href="#concept-tree-child" title="concept-tree-child">child</a>.

 <li><p>If <var title="">reference node</var> is null, let
 <var title="">parent</var> be
 <a href="#concept-range-start-node" title="concept-range-start-node">start node</a>.

 <li><p>Otherwise, let <var title="">parent</var> be the
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> of
 <var title="">reference node</var>.

 <!-- Browsers disagree on how to handle the case where the range is
 collapsed: do you increment the end offset so the node is now included, or
 not?  DOM 2 Range says no, and Firefox 12.0a1 follows that, but IE9, Chrome
 17 dev, and Opera Next 12.00 alpha all do increment.  Apparently this
 traces back to Acid3 at one point requiring the non-standard behavior.
 Previously the spec matched DOM 2 Range, but it changed to match the
 majority of browsers.  See
 https://www.w3.org/Bugs/Public/show_bug.cgi?id=15297.

 We have to be careful here, because if node is a DocumentFragment, we might
 have inserted any number of nodes, including zero.  One corner case is if
 we insert an empty DocumentFragment and the range is collapsed in a text
 node.  In that case, the text node gets split, but browsers disagree on
 what to do with the range's end.  IE9 leaves it in place; Chrome 17 dev
 moves it to the parent element, before the reference node; Opera Next 12.00
 alpha moves it to the beginning of the new text node.  The spec follows
 WebKit just because it happens to be easier for me to spec.

 The logic for how much to increment the position by is copied from the
 "insert" algorithm.  Getting the new offset right was surprisingly tricky.
 -->
 <li><p>Let <var title="">new offset</var> be the
 <a href="#concept-tree-index" title="concept-tree-index">index</a> of
 <var title="">reference node</var>, or <var title="">parent</var>'s
 <a href="#concept-node-length" title="concept-node-length">length</a> if
 <var title="">reference node</var> is null.

 <li><p>Add <var title="">node</var>'s
 <a href="#concept-node-length" title="concept-node-length">length</a> to
 <var title="">new offset</var>, if <var title="">node</var> is a
 <code><a href="#documentfragment">DocumentFragment</a></code>.  Otherwise add one to
 <var title="">new offset</var>.

 <li><p><a href="#concept-node-pre-insert" title="concept-node-pre-insert">Pre-insert</a>
 <var title="">node</var> into <var title="">parent</var> before
 <var title="">reference node</var>.

 <li><p>If <a href="#concept-range-start" title="concept-range-start">start</a> and
 <a href="#concept-range-end" title="concept-range-end">end</a> are the same, set
 <a href="#concept-range-end" title="concept-range-end">end</a> to (<var title="">parent</var>,
 <var title="">new offset</var>).
</ol>

<p>The
<dfn id="dom-range-surroundcontents" title="dom-Range-surroundContents"><code>surroundContents(<var>newParent</var>)</code></dfn>
method must run these steps:

<!--
IE9 and Chrome 12 dev throw exceptions before doing any DOM mutations in at
least some cases, so they don't wind up modifying the DOM halfway. Like if you
try surrounding a selection with an ancestor. As with insertNode(), this is
slightly nicer, but Firefox 4.0 and Opera 11.00 don't do this, and their
behavior is slightly easier to spec, so I go with them for exceptions that are
thrown by things we call, like insertNode(). However, for
BAD_BOUNDARYPOINTS_ERR/INVALID_NODE_TYPE_ERR that we throw ourselves, I do the
check first thing, which matches everyone but Firefox.
-->

<ol>
 <li><p>If a non-<code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a> is
 <a href="#partially-contained">partially contained</a> in the <a href="#context-object">context object</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidstateerror">InvalidStateError</a></code>" exception and terminate these steps.
 <!-- Makes some sense: otherwise we'd clone a bunch of containers, which is
 unexpected. -->
 <!-- XXX Could we rephrase this condition to be more algorithmic and less
 declarative?-->

 <li><p>If <var title="">newParent</var> is a <code><a href="#document">Document</a></code>,
 <code><a href="#documenttype">DocumentType</a></code>, or <code><a href="#documentfragment">DocumentFragment</a></code>
 <a href="#concept-node" title="concept-node">node</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.
 <!-- But for Comment, Text, and ProcessingInstruction, we just fall through
 and throw a HIERARCHY_REQUEST_ERR when we try appendChild(). This makes
 absolutely no sense, but it's what DOM 2 Range specifies, and it's what
 IE9, Chrome 12 dev, and Opera 11.00 implement. Firefox 4.0 only throws
 INVALID_NODE_TYPE_ERR on DocumentFragments, it falls through to
 HIERARCHY_REQUEST_ERR for Documents and DocumentTypes.

 Firefox 4.0 does this check later on, so it will do DOM mutations of some
 type if passed a DocumentFragment. We match IE9, Chrome 12 dev, and Opera
 11.00 in doing the check early.

 If newParent is a Document/DocumentType/DocumentFragment, and some node is
 also partially contained, DOM 2 Range doesn't say whether to throw
 BAD_BOUNDARYPOINTS_ERR or INVALID_NODE_TYPE_ERR. IE9 and Chrome 12 dev
 throw INVALID_NODE_TYPE_ERR, while Firefox 4.0 and Opera 11.00 throw
 BAD_BOUNDARYPOINTS_ERR. I chose the latter because it's the first thing I
 happened to write down and it makes no real difference, with the even
 split. -->

  <li>Call <code title="dom-Range-extractContents"><a href="#dom-range-extractcontents">extractContents()</a></code> on
  the <a href="#context-object">context object</a>, and let <var title="">fragment</var> be the
  result.
  <!-- If the range contains a DocumentType, Firefox 4.0 and Opera 11.00 don't
  immediately throw here. Firefox removes the non-DocumentType nodes and
  throws, Opera removes all nodes and doesn't throw. This applies to
  extractContents() proper, and also affects surroundContents(). I match DOM 2
  Range, IE9, and Chrome 12 dev. -->

 <li><p>If <var title="">newParent</var> has
 <a href="#concept-tree-child" title="concept-tree-child">children</a>,
 <a href="#concept-node-replace-all" title="concept-node-replace-all">replace all</a> with null within
 <var title="">newParent</var>.

  <li>Call <code title="dom-Range-insertNode"><a href="#dom-range-insertnode">insertNode(<var title="">newParent</var>)</a></code> on the <a href="#context-object">context object</a>.

  <li>Call <code title="dom-Node-appendChild"><a href="#dom-node-appendchild">appendChild(<var title="">fragment</var>)</a></code> on
  <var title="">newParent</var>.

  <li>Call <code title="dom-Range-selectNode"><a href="#dom-range-selectnode">selectNode(<var title="">newParent</var>)</a></code> on the <a href="#context-object">context object</a>.
  <!-- Generally this isn't needed, because insertNode() will already do it,
  but it makes a difference in at least one corner case (when the original
  range lies in a single text node). -->
</ol>

<p>The <dfn id="dom-range-clonerange" title="dom-Range-cloneRange"><code>cloneRange()</code></dfn>
method must return a new <a href="#concept-range" title="concept-range">range</a> with the
same <a href="#concept-range-start" title="concept-range-start">start</a> and
<a href="#concept-range-end" title="concept-range-end">end</a> as the <a href="#context-object">context object</a>.

<p>The <dfn id="dom-range-detach" title="dom-Range-detach"><code>detach()</code></dfn> method must
do nothing. <span class="note">Its functionality (disabling a
<code><a href="#range">Range</a></code> object) was removed, but the method itself is preserved
for compatibility.

</span><hr>

<dl class="domintro">
 <dt><var title="">position</var> = <var title="">range</var> . <code title="dom-Range-comparePoint"><a href="#dom-range-comparepoint">comparePoint</a></code>( <var title="">parent</var>, <var title="">offset</var> )
 <dd><p>Returns −1 if the point is before the range, 0 if the point is
 in the range, and 1 if the point is after the range.

 <dt><var title="">intersects</var> = <var title="">range</var> . <code title="dom-Range-intersectsNode"><a href="#dom-range-intersectsnode">intersectsNode</a></code>( <var title="">node</var> )
 <dd><p>Returns whether <var title="">range</var> intersects
 <var title="">node</var>.
</dl>

<div class="impl">

<p>The
<dfn id="dom-range-ispointinrange" title="dom-Range-isPointInRange"><code>isPointInRange(<var>node</var>, <var>offset</var>)</code></dfn>
must run these steps:
<!-- Tested October 2011 on Firefox 9.0a2 and Chrome 16 dev.  IE9 and Opera
11.50 don't support the method. -->

<ol>
 <li><p>If <var title="">node</var>'s <a href="#concept-tree-root" title="concept-tree-root">root</a> is
 different from the <a href="#context-object">context object</a>'s <a href="#concept-range-root" title="concept-range-root">root</a>, return false and terminate these steps.
 <!-- This happens even if the offset is negative or too large, or if the node
 is a doctype, in both Firefox 9.0a2 and Chrome 16 dev. -->

 <li><p>If <var title="">node</var> is a
 <a href="#concept-doctype" title="concept-doctype">doctype</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.
 <!-- Firefox 9.0a2 doesn't throw.  It ignores the offset and returns true or
 false depending on whether the doctype itself is in the range.  This makes
 some sense, but it doesn't match how other Range APIs handle doctypes, and
 having the second argument mandatory but ignored is just weird.  Thus I go
 with Chrome 16 dev, although I can see the merit in how Gecko works here. -->

 <li><p>If <var title="">offset</var> is greater than
 <var title="">node</var>'s <a href="#concept-node-length" title="concept-node-length">length</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#indexsizeerror">IndexSizeError</a></code>" exception and terminate these steps.
 <!-- Firefox 9.0a2 doesn't throw.  It seems to return true if the node is
 completely contained in the range, like with selectNode(), and false otherwise
 - even if all boundary points in the node are contained in the range, like
 with selectNodeContents().  This is weird, and inconsistent with other Range
 APIs, so I go with Chrome 16 dev.  This is probably an authoring bug, so it's
 best to throw anyway. -->

 <li><p>If (<var title="">node</var>, <var title="">offset</var>) is
 <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>
 <a href="#concept-range-start" title="concept-range-start">start</a> or
 <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>
 <a href="#concept-range-end" title="concept-range-end">end</a>, return false and terminate these
 steps.

 <li><p>Return true.
</ol>


<p>The
<dfn id="dom-range-comparepoint" title="dom-Range-comparePoint"><code>comparePoint(<var>node</var>, <var>offset</var>)</code></dfn>
method must run these steps:
<!-- IE9 doesn't support this method at all.  Firefox 12.0a1, Chrome 17 dev,
and Opera Next 12.00 alpha all do. -->

<ol>
 <li><p>If <var title="">node</var>'s <a href="#concept-tree-root" title="concept-tree-root">root</a> is
 different from the <a href="#context-object">context object</a>'s
 <a href="#concept-range-root" title="concept-range-root">root</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#wrongdocumenterror">WrongDocumentError</a></code>"
 exception and terminate these steps.
 <!-- Opera Next 12.00 alpha seems to return -1 in this case.  The spec matches
 Firefox 12.0a1 and Chrome 17 dev. -->

 <li><p>If <var title="">node</var> is a
 <a href="#concept-doctype" title="concept-doctype">doctype</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidnodetypeerror">InvalidNodeTypeError</a></code>" exception and terminate these
 steps.
 <!-- This matches Chrome 17 dev instead of Firefox 12.0a1 and Opera Next 12.00
 alpha, which don't throw and seem to just ignore the offset instead.  See
 comment for isPointInRange(). -->

 <li><p>If <var title="">offset</var> is greater than
 <var title="">node</var>'s <a href="#concept-node-length" title="concept-node-length">length</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#indexsizeerror">IndexSizeError</a></code>" exception and terminate these steps.
 <!-- This matches Chrome 17 dev instead of Firefox 12.0a1 and Opera Next 12.00
 alpha, which don't throw.  See comment for isPointInRange(). -->

 <li><p>If (<var title="">node</var>, <var title="">offset</var>) is
 <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>
 <a href="#concept-range-start" title="concept-range-start">start</a>, return −1 and terminate
 these steps.

 <li><p>If (<var title="">node</var>, <var title="">offset</var>) is
 <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>
 <a href="#concept-range-end" title="concept-range-end">end</a>, return 1 and terminate these steps.

 <li><p>Return 0.
</ol>

<hr>

<p>The
<dfn id="dom-range-intersectsnode" title="dom-Range-intersectsNode"><code>intersectsNode(<var>node</var>)</code></dfn>
method must run these steps:
<!-- Supported by Chrome 17 dev and Opera Next 12.00 alpha, but not IE9 or
Firefox 12.0a1. -->

<ol>
 <li><p>If <var title="">node</var>'s <a href="#concept-tree-root" title="concept-tree-root">root</a>
 is different from the <a href="#context-object">context object</a>'s
 <a href="#concept-range-root" title="concept-range-root">root</a>, return false and terminate
 these steps.
 <!-- It seems like for doctypes, Opera Next 12.00 alpha throws
 InvalidNodeTypeError instead of returning false.  The spec follows Chrome
 17 dev. -->

 <li><p>Let <var title="">parent</var> be <var title="">node</var>'s
 <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

 <li><p>If <var title="">parent</var> is null, return true and terminate these
 steps.
 <!-- browsers currently throw, but are willing to change
      https://www.w3.org/Bugs/Public/show_bug.cgi?id=16759 -->

 <li><p>Let <var title="">offset</var> be <var title="">node</var>'s
 <a href="#concept-tree-index" title="concept-tree-index">index</a>.

 <li><p>If (<var title="">parent</var>, <var title="">offset</var>) is
 <a href="#concept-range-bp-before" title="concept-range-bp-before">before</a>
 <a href="#concept-range-end" title="concept-range-end">end</a> and (<var title="">parent</var>,
 <var title="">offset</var> + 1) is
 <a href="#concept-range-bp-after" title="concept-range-bp-after">after</a>
 <a href="#concept-range-start" title="concept-range-start">start</a>, return true and terminate
 these steps.

 <li><p>Return false.
</ol>

</div>

<hr>

<p>The <dfn id="dom-range-stringifier" title="dom-Range-stringifier">stringifier</dfn> must run these
steps:

<ol>
 <li><p>Let <var title="">s</var> be the empty string.

 <li><p>If <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> equals
 <a href="#concept-range-end-node" title="concept-range-end-node">end node</a>, and it is a
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>, return the
 substring of that <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>'s <a href="#concept-cd-data" title="concept-CD-data">data</a> beginning at
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> and ending at
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>, and terminate these
 steps.

 <li><p>If <a href="#concept-range-start-node" title="concept-range-start-node">start node</a> is a
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>, append to
 <var title="">s</var> the substring of that
 <a href="#concept-node" title="concept-node">node</a>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a> from the
 <a href="#concept-range-start-offset" title="concept-range-start-offset">start offset</a> until the end.

 <li><p>Append to <var title="">s</var> the concatenation, in
 <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, of the
 <a href="#concept-cd-data" title="concept-CD-data">data</a> of all <code><a href="#text">Text</a></code>
 <a href="#concept-node" title="concept-node">nodes</a> that are <a href="#contained">contained</a> in
 the <a href="#context-object">context object</a>.

 <li><p>If <a href="#concept-range-end-node" title="concept-range-end-node">end node</a> is a
 <code><a href="#text">Text</a></code> <a href="#concept-node" title="concept-node">node</a>, append to
 <var title="">s</var> the substring of that
 <a href="#concept-node" title="concept-node">node</a>'s
 <a href="#concept-cd-data" title="concept-CD-data">data</a> from its start until the
 <a href="#concept-range-end-offset" title="concept-range-end-offset">end offset</a>.

 <li><p>Return <var title="">s</var>.
</ol>

<hr>

<div class="note">
<p>The following extensions to the <code><a href="#range">Range</a></code> interface are defined
in various other specifications:
<ul>
 <li>the <code class="external" data-anolis-spec="domps" title="dom-Range-createContextualFragment"><a href="http://html5.org/specs/dom-parsing.html#dom-range-createcontextualfragment">createContextualFragment()</a></code> method;
 <a class="informative" href="#refsDOMPS">[DOMPS]</a>
 <li>the <code title="dom-Range-getClientRects">getClientRects()</code> method; and
 <li>the <code title="dom-Range-getBoundingClientRect">getBoundingClientRect()</code> method.
 <a class="informative" href="#refsCSSOMVIEW">[CSSOMVIEW]</a>
 <!-- XXX xref for cssom-view is broken -->
</ul>
</div>


<h2 id="traversal"><span class="secno">8 </span>Traversal</h2>

<p><code><a href="#nodeiterator">NodeIterator</a></code> and <code><a href="#treewalker">TreeWalker</a></code> objects can be used
to filter and traverse <a href="#concept-node" title="concept-node">node</a>
<a href="#concept-tree" title="concept-tree">trees</a>.

<p>Each <code><a href="#nodeiterator">NodeIterator</a></code> and <code><a href="#treewalker">TreeWalker</a></code> object has an
associated <dfn id="concept-traversal-active" title="concept-traversal-active">active flag</dfn> to avoid
recursive invocations. It is initially unset.

<p>Each <code><a href="#nodeiterator">NodeIterator</a></code> and <code><a href="#treewalker">TreeWalker</a></code> object also
has an associated <dfn id="concept-traversal-root" title="concept-traversal-root">root</dfn>
<a href="#concept-node" title="concept-node">node</a>,
<dfn id="concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</dfn> bitmask, and
<dfn id="concept-traversal-filter" title="concept-traversal-filter">filter</dfn> callback.

<p>To <dfn id="concept-node-filter" title="concept-node-filter">filter</dfn> <var title="">node</var> run
these steps:

<ol>
 <li><p>If <a href="#concept-traversal-active" title="concept-traversal-active">active flag</a> is set
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidstateerror">InvalidStateError</a></code>", terminate these steps, and
 terminate the steps of the algorithm that invoked this algorithm.
 <li><p>Let <var title="">n</var> be <var title="">node</var>'s
 <code title="dom-Node-nodeType"><a href="#dom-node-nodetype">nodeType</a></code> attribute value minus 1.
 <li><p>If the <var title="">n</var><sup>th</sup> bit (where 0 is the least
 significant bit) of
 <a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a> is not set,
 return <code title="dom-NodeFilter-FILTER_SKIP"><a href="#dom-nodefilter-filter_skip">FILTER_SKIP</a></code> and
 terminate these steps.
 <!-- !((1 << (node.nodeType - 1)) & whatToShow) -->
 <li><p>If <a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a> is null,
 return <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code> and
 terminate these steps.
 <li><p>Set the <a href="#concept-traversal-active" title="concept-traversal-active">active flag</a>.
 <li><p>Let <var title="">result</var> be the return value of invoking
 <a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a>.
 <li><p>Unset the <a href="#concept-traversal-active" title="concept-traversal-active">active flag</a>.
 <li><p>If an exception was thrown, re-throw the exception, terminate these
 steps, and terminate the steps of the algorithm that invoked this
 algorithm.
 <li><p>Return <var title="">result</var>.
</ol>


<h3 id="interface-nodeiterator"><span class="secno">8.1 </span>Interface <code><a href="#nodeiterator">NodeIterator</a></code></h3>

<pre class="idl">interface <dfn id="nodeiterator">NodeIterator</dfn> {
  readonly attribute <a href="#node">Node</a> <a href="#dom-nodeiterator-root" title="dom-NodeIterator-root">root</a>;
  readonly attribute <a href="#node">Node</a>? <a href="#dom-nodeiterator-referencenode" title="dom-NodeIterator-referenceNode">referenceNode</a>;
  readonly attribute boolean <a href="#dom-nodeiterator-pointerbeforereferencenode" title="dom-NodeIterator-pointerBeforeReferenceNode">pointerBeforeReferenceNode</a>;
  readonly attribute unsigned long <a href="#dom-nodeiterator-whattoshow" title="dom-NodeIterator-whatToShow">whatToShow</a>;
  readonly attribute <a href="#nodefilter">NodeFilter</a>? <a href="#dom-nodeiterator-filter" title="dom-NodeIterator-filter">filter</a>;<!--
  readonly attribute boolean <span title=dom-NodeIterator-expandEntityReferences>expandEntityReferences</span>;-->

  <a href="#node">Node</a>? <a href="#dom-nodeiterator-nextnode" title="dom-NodeIterator-nextNode">nextNode</a>();
  <a href="#node">Node</a>? <a href="#dom-nodeiterator-previousnode" title="dom-NodeIterator-previousNode">previousNode</a>();

  void <a href="#dom-nodeiterator-detach" title="dom-NodeIterator-detach">detach</a>();
};</pre>

<p class="note"><code><a href="#nodeiterator">NodeIterator</a></code> objects can be created using the
<code title="dom-Document-createNodeIterator"><a href="#dom-document-createnodeiterator">createNodeIterator()</a></code>
method.

<p>Each <code><a href="#nodeiterator">NodeIterator</a></code> object has an associated
<dfn id="iterator-collection">iterator collection</dfn>, which is a
<a href="#concept-collection" title="concept-collection">collection</a> rooted at
<a href="#concept-traversal-root" title="concept-traversal-root">root</a>, whose filter matches any
<a href="#concept-node" title="concept-node">node</a>.

<p>Before a <a href="#concept-node" title="concept-node">node</a> is removed from the
<a href="#iterator-collection">iterator collection</a>, these steps must be run:

<ol>
 <li><p>If the <a href="#concept-node" title="concept-node">node</a> is not a
 <a href="#concept-tree-descendant" title="concept-tree-descendant">descendant</a> of
 <a href="#concept-traversal-root" title="concept-traversal-root">root</a> and is not an
 <a href="#concept-tree-ancestor" title="concept-tree-ancestor">ancestor</a> of the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute
 value or the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute
 value itself, terminate these steps.

 <li><p>If the
 <code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
 attribute value is false, set the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute
 to the first <a href="#concept-node" title="concept-node">node</a>
 <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a> the
 <a href="#concept-node" title="concept-node">node</a> that is being removed, and terminate
 these steps.

 <li><p>If the
 <code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
 attribute value is true and there is a <a href="#concept-node" title="concept-node">node</a>
 <a href="#concept-tree-following" title="concept-tree-following">following</a> the
 <a href="#concept-node" title="concept-node">node</a> that is being removed, set the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute
 to the first such <a href="#concept-node" title="concept-node">node</a>, and terminate these
 steps.

 <li><p>Set the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute
 to the first <a href="#concept-node" title="concept-node">node</a>
 <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a> the
 <a href="#concept-node" title="concept-node">node</a> that is being removed and set the
 <code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
 attribute to false.
</ol>

<p class="note">As mentioned earlier <code><a href="#nodeiterator">NodeIterator</a></code> objects have an
associated <a href="#concept-traversal-active" title="concept-traversal-active">active flag</a>,
<a href="#concept-traversal-root" title="concept-traversal-root">root</a>
<a href="#concept-node" title="concept-node">node</a>,
<a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a> bitmask, and
<a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a> callback as well.

<hr>

<p>The <dfn id="dom-nodeiterator-root" title="dom-NodeIterator-root"><code>root</code></dfn> attribute
must return <a href="#concept-traversal-root" title="concept-traversal-root">root</a>.</p>

<p>The
<dfn id="dom-nodeiterator-referencenode" title="dom-NodeIterator-referenceNode"><code>referenceNode</code></dfn>
and
<dfn id="dom-nodeiterator-pointerbeforereferencenode" title="dom-NodeIterator-pointerBeforeReferenceNode"><code>pointerBeforeReferenceNode</code></dfn>
attributes must return what they were initialized to.</p>

<p>The <dfn id="dom-nodeiterator-whattoshow" title="dom-NodeIterator-whatToShow"><code>whatToShow</code></dfn>
attribute must return
<a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a>.

<p>The <dfn id="dom-nodeiterator-filter" title="dom-NodeIterator-filter"><code>filter</code></dfn>
attribute must return <a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a>.

<p>To <dfn id="concept-nodeiterator-traverse" title="concept-NodeIterator-traverse">traverse</dfn> in direction
<var title="">direction</var> run these steps:

<ol>
 <li><p>Let <var title="">node</var> be the value of the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute.

 <li><p>Let <var title="">before node</var> be the value of the
 <code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
 attribute.

 <li>
  <p>Run these substeps:
  <ol>
   <li>
    <dl class="switch">
     <dt>If direction is next</dt>
     <dd>
      <p>If <var title="">before node</var> is false, let <var title="">node</var>
      be the first <a href="#concept-node" title="concept-node">node</a>
      <a href="#concept-tree-following" title="concept-tree-following">following</a>
      <var title="">node</var> in the <a href="#iterator-collection">iterator collection</a>. If
      there is no such <a href="#concept-node" title="concept-node">node</a> return null and
      terminate these steps.
      <p>If <var title="">before node</var> is true, set it to false.
     <dt>If direction is previous</dt>
     <dd>
      <p>If <var title="">before node</var> is true, let <var title="">node</var>
      be the first <a href="#concept-node" title="concept-node">node</a>
      <a href="#concept-tree-preceding" title="concept-tree-preceding">preceding</a>
      <var title="">node</var> in the <a href="#iterator-collection">iterator collection</a>. If
      there is no such <a href="#concept-node" title="concept-node">node</a> return null and
      terminate these steps.
      <p>If <var title="">before node</var> is false, set it to true.
    </dl>
   <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
   <var title="">node</var> and let <var title="">result</var> be the return
   value.
   <li>
    <p>If <var title="">result</var> is
    <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, go to the
    next step in the overall set of steps.
    <p>Otherwise, run these substeps again.
  </ol>
 <li><p>Set the
 <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> attribute
 to <var title="">node</var>, set the
 <code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
 attribute to <var title="">before node</var>, and return
 <var title="">node</var>.
</ol>

<p>The <dfn id="dom-nodeiterator-nextnode" title="dom-NodeIterator-nextNode"><code>nextNode()</code></dfn>
method must <a href="#concept-nodeiterator-traverse" title="concept-NodeIterator-traverse">traverse</a> in
direction next.

<p>The
<dfn id="dom-nodeiterator-previousnode" title="dom-NodeIterator-previousNode"><code>previousNode()</code></dfn>
method must <a href="#concept-nodeiterator-traverse" title="concept-NodeIterator-traverse">traverse</a> in
direction previous.

<p>The <dfn id="dom-nodeiterator-detach" title="dom-NodeIterator-detach"><code>detach()</code></dfn>
method must do nothing.


<h3 id="interface-treewalker"><span class="secno">8.2 </span>Interface <code><a href="#treewalker">TreeWalker</a></code></h3>

<pre class="idl">interface <dfn id="treewalker">TreeWalker</dfn> {
  readonly attribute <a href="#node">Node</a> <a href="#dom-treewalker-root" title="dom-TreeWalker-root">root</a>;
  readonly attribute unsigned long <a href="#dom-treewalker-whattoshow" title="dom-TreeWalker-whatToShow">whatToShow</a>;
  readonly attribute <a href="#nodefilter">NodeFilter</a>? <a href="#dom-treewalker-filter" title="dom-TreeWalker-filter">filter</a>;<!--
  readonly attribute boolean <span title=dom-TreeWalker-expandEntityReferences>expandEntityReferences</span>;-->
           attribute <a href="#node">Node</a> <a href="#dom-treewalker-currentnode" title="dom-TreeWalker-currentNode">currentNode</a>;

  <a href="#node">Node</a>? <a href="#dom-treewalker-parentnode" title="dom-TreeWalker-parentNode">parentNode</a>();
  <a href="#node">Node</a>? <a href="#dom-treewalker-firstchild" title="dom-TreeWalker-firstChild">firstChild</a>();
  <a href="#node">Node</a>? <a href="#dom-treewalker-lastchild" title="dom-TreeWalker-lastChild">lastChild</a>();
  <a href="#node">Node</a>? <a href="#dom-treewalker-previoussibling" title="dom-TreeWalker-previousSibling">previousSibling</a>();
  <a href="#node">Node</a>? <a href="#dom-treewalker-nextsibling" title="dom-TreeWalker-nextSibling">nextSibling</a>();
  <a href="#node">Node</a>? <a href="#dom-treewalker-previousnode" title="dom-TreeWalker-previousNode">previousNode</a>();
  <a href="#node">Node</a>? <a href="#dom-treewalker-nextnode" title="dom-TreeWalker-nextNode">nextNode</a>();
};</pre>

<p class="note"><code><a href="#treewalker">TreeWalker</a></code> objects can be created using the
<code title="dom-Document-createTreeWalker"><a href="#dom-document-createtreewalker">createTreeWalker()</a></code> method.

<p class="note">As mentioned earlier <code><a href="#treewalker">TreeWalker</a></code> objects have an
associated <a href="#concept-traversal-active" title="concept-traversal-active">active flag</a>,
<a href="#concept-traversal-root" title="concept-traversal-root">root</a>
<a href="#concept-node" title="concept-node">node</a>,
<a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a> bitmask, and
<a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a> callback.

<p>The <dfn id="dom-treewalker-root" title="dom-TreeWalker-root"><code>root</code></dfn> attribute must
return <a href="#concept-traversal-root" title="concept-traversal-root">root</a>.</p>

<p>The <dfn id="dom-treewalker-whattoshow" title="dom-TreeWalker-whatToShow"><code>whatToShow</code></dfn>
attribute must return
<a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a>.

<p>The <dfn id="dom-treewalker-filter" title="dom-TreeWalker-filter"><code>filter</code></dfn> attribute
must return <a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a>.

<p>The <dfn id="dom-treewalker-currentnode" title="dom-TreeWalker-currentNode"><code>currentNode</code></dfn>
attribute must return what it was initialized to.</p>

<p>Setting the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code>
attribute must set it to the new value.</p>


<p>The <dfn id="dom-treewalker-parentnode" title="dom-TreeWalker-parentNode"><code>parentNode()</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">node</var> be the value of the
 <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute.

 <li>
  <p>While <var title="">node</var> is not null and is not
  <a href="#concept-traversal-root" title="concept-traversal-root">root</a>, run these substeps:

  <ol>
   <li><p>Let <var title="">node</var> be <var title="">node</var>'s
   <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

   <li><p>If <var title="">node</var> is not null and
   <a href="#concept-node-filter" title="concept-node-filter">filtering</a> <var title="">node</var>
   returns <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>,
   then set the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code>
   attribute to <var title="">node</var>, return <var title="">node</var>, and
   terminate these steps.
  </ol>

 <li><p>Return null.
</ol>

<p>To <dfn id="concept-traverse-children" title="concept-traverse-children">traverse children</dfn> of type
<var title="">type</var>, run these steps:

<ol>
 <li><p>Let <var title="">node</var> be the value
 of the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute.

 <li><p>Set <var title="">node</var> to <var title="">node</var>'s
 <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a> if
 <var title="">type</var> is first, and <var title="">node</var>'s
 <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a> if
 <var title="">type</var> is last.

 <li>
  <p><dfn id="concept-traverse-children-main" title="concept-traverse-children-main">Main</dfn>:
  While <var title="">node</var> is not null, run these substeps:

  <ol>
   <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
   <var title="">node</var> and let <var title="">result</var> be the return
   value.

   <li><p>If <var title="">result</var> is
   <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then set
   the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code>
   attribute to <var title="">node</var> and return <var title="">node</var>.

   <li>
    <p>If <var title="">result</var> is
    <code title="dom-NodeFilter-FILTER_SKIP"><a href="#dom-nodefilter-filter_skip">FILTER_SKIP</a></code>, run these
    subsubsteps:

    <ol>
     <li><p>Let <var title="">child</var> be <var title="">node</var>'s
     <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a> if
     <var title="">type</var> is first, and <var title="">node</var>'s
     <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a> if
     <var title="">type</var> is last.

     <li><p>If <var title="">child</var> is not null, set <var title="">node</var>
     to <var title="">child</var> and goto
     <a href="#concept-traverse-children-main" title="concept-traverse-children-main">Main</a>.
    </ol>

   <li>
    <p>While <var title="">node</var> is not null, run these subsubsteps:

    <ol>
     <li><p>Let <var title="">sibling</var> be <var title="">node</var>'s
     <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a> if
     <var title="">type</var> is first, and <var title="">node</var>'s
     <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a> if
     <var title="">type</var> is last.

     <li><p>If <var title="">sibling</var> is not null, set
     <var title="">node</var> to <var title="">sibling</var> and goto
     <a href="#concept-traverse-children-main" title="concept-traverse-children-main">Main</a>.

     <li><p>Let <var title="">parent</var> be <var title="">node</var>'s
     <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

     <li><p>If <var title="">parent</var> is null, <var title="">parent</var> is
     <a href="#concept-traversal-root" title="concept-traversal-root">root</a>, or
     <var title="">parent</var> is
     <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute's
     value, return null.

     <li><p>Otherwise, set <var title="">node</var> to <var title="">parent</var>.
    </ol>
  </ol>
 <li><p>Return null.
</ol>

<p>The <dfn id="dom-treewalker-firstchild" title="dom-TreeWalker-firstChild"><code>firstChild()</code></dfn>
method must <a href="#concept-traverse-children" title="concept-traverse-children">traverse children</a>
of type first.

<p>The <dfn id="dom-treewalker-lastchild" title="dom-TreeWalker-lastChild"><code>lastChild()</code></dfn>
method must <a href="#concept-traverse-children" title="concept-traverse-children">traverse children</a>
of type last.

<p>To <dfn id="concept-traverse-siblings" title="concept-traverse-siblings">traverse siblings</dfn> of type
<var title="">type</var> run these steps:

<ol>
 <li><p>Let <var title="">node</var> be the value of the
 <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute.

 <li><p>If <var title="">node</var> is
 <a href="#concept-traversal-root" title="concept-traversal-root">root</a>, return null.

 <li>
  <p>Run these substeps:

  <ol>
   <li><p>Let <var title="">sibling</var> be <var title="">node</var>'s
   <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a> if
   <var title="">type</var> is next, and <var title="">node</var>'s
   <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a> if
   <var title="">type</var> is previous.

   <li>
    <p>While <var title="">sibling</var> is not null, run these subsubsteps:

    <ol>
     <li><p>Set <var title="">node</var> to <var title="">sibling</var>.

     <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
     <var title="">node</var> and let <var title="">result</var> be the return
     value.

     <li><p>If <var title="">result</var> is
     <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then set
     the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code>
     attribute to <var title="">node</var> and return <var title="">node</var>.

     <li><p>Set <var title="">sibling</var> to <var title="">node</var>'s
     <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a> if
     <var title="">type</var> is next, and <var title="">node</var>'s
     <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a> if
     <var title="">type</var> is previous.

     <li><p>If <var title="">result</var> is
     <code title="dom-NodeFilter-FILTER_REJECT"><a href="#dom-nodefilter-filter_reject">FILTER_REJECT</a></code> or
     <var title="">sibling</var> is null, then set <var title="">sibling</var> to
     <var title="">node</var>'s
     <a href="#concept-tree-next-sibling" title="concept-tree-next-sibling">next sibling</a> if
     <var title="">type</var> is next, and <var title="">node</var>'s
     <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a> if
     <var title="">type</var> is previous.
    </ol>

   <li><p>Set <var title="">node</var> to its
   <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

   <li><p>If <var title="">node</var> is null or is
   <a href="#concept-traversal-root" title="concept-traversal-root">root</a>, return null.

   <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
   <var title="">node</var> and if the return value is
   <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then
   return null.
   <!-- XXX WTF? -->

   <li><p>Run these substeps again.
  </ol>
</ol>

<p>The
<dfn id="dom-treewalker-nextsibling" title="dom-TreeWalker-nextSibling"><code>nextSibling()</code></dfn>
method must <a href="#concept-traverse-siblings" title="concept-traverse-siblings">traverse siblings</a>
of type next.

<p>The
<dfn id="dom-treewalker-previoussibling" title="dom-TreeWalker-previousSibling"><code>previousSibling()</code></dfn>
method must <a href="#concept-traverse-siblings" title="concept-traverse-siblings">traverse siblings</a>
of type previous.

<p>The
<dfn id="dom-treewalker-previousnode" title="dom-TreeWalker-previousNode"><code>previousNode()</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">node</var> be the value of the
 <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute.

 <li>
  <p>While <var title="">node</var> is not
  <a href="#concept-traversal-root" title="concept-traversal-root">root</a>, run these substeps:

  <ol>
   <li><p>Let <var title="">sibling</var> be the
   <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a> of
   <var title="">node</var>.

   <li>
    <p>While <var title="">sibling</var> is not null, run these subsubsteps:

    <ol>
     <li><p>Set <var title="">node</var> to <var title="">sibling</var>.

     <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
     <var title="">node</var> and let <var title="">result</var> be the return
     value.

     <li><p>While <var title="">result</var> is not
     <code title="dom-NodeFilter-FILTER_REJECT"><a href="#dom-nodefilter-filter_reject">FILTER_REJECT</a></code> and
     <var title="">node</var> has a
     <a href="#concept-tree-child" title="concept-tree-child">child</a>, set <var title="">node</var>
     to its <a href="#concept-tree-last-child" title="concept-tree-last-child">last child</a> and then
     <a href="#concept-node-filter" title="concept-node-filter">filter</a> <var title="">node</var> and
     set <var title="">result</var> to the return value.

     <li><p>If <var title="">result</var> is
     <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then set
     the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code>
     attribute to <var title="">node</var> and return <var title="">node</var>.

     <li><p>Set <var title="">sibling</var> to the
     <a href="#concept-tree-previous-sibling" title="concept-tree-previous-sibling">previous sibling</a> of
     <var title="">node</var>.
    </ol>

   <li><p>If <var title="">node</var> is
   <a href="#concept-traversal-root" title="concept-traversal-root">root</a> or <var title="">node</var>'s
   <a href="#concept-tree-parent" title="concept-tree-parent">parent</a> is null, return null.

   <li><p>Set <var title="">node</var> to its
   <a href="#concept-tree-parent" title="concept-tree-parent">parent</a>.

   <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
   <var title="">node</var> and if the return value is
   <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then set
   the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute
   to <var title="">node</var> and return <var title="">node</var>.
  </ol>

 <li><p>Return null.
</ol>

<p>The <dfn id="dom-treewalker-nextnode" title="dom-TreeWalker-nextNode"><code>nextNode()</code></dfn>
method must run these steps:

<ol>
 <li><p>Let <var title="">node</var> be the value of the
 <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute.

 <li><p>Let <var title="">result</var> be
 <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>.

 <li>
  <p>Run these substeps:

  <ol>
   <li>
    <p>While <var title="">result</var> is not
    <code title="dom-NodeFilter-FILTER_REJECT"><a href="#dom-nodefilter-filter_reject">FILTER_REJECT</a></code> and
    <var title="">node</var> has a <a href="#concept-tree-child" title="concept-tree-child">child</a>,
    run these subsubsteps:

    <ol>
     <li><p>Set <var title="">node</var> to its
     <a href="#concept-tree-first-child" title="concept-tree-first-child">first child</a>.

     <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
     <var title="">node</var> and set <var title="">result</var> to the return
     value.

     <li><p>If <var title="">result</var> is
     <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then set
     the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute
     to <var title="">node</var> and return <var title="">node</var>.
    </ol>

   <li>
    <p>If a <a href="#concept-node" title="concept-node">node</a> is
    <a href="#concept-tree-following" title="concept-tree-following">following</a>
    <var title="">node</var> and is not
    <a href="#concept-tree-following" title="concept-tree-following">following</a>
    <a href="#concept-traversal-root" title="concept-traversal-root">root</a>, set
    <var title="">node</var> to the first such
    <a href="#concept-node" title="concept-node">node</a>.
    <p>Otherwise, return null.
    <!-- Implemented as iterating over parent/nextSibling -->

   <li><p><a href="#concept-node-filter" title="concept-node-filter">Filter</a>
   <var title="">node</var> and set <var title="">result</var> to the return
   value.

   <li><p>If <var title="">result</var> is
   <code title="dom-NodeFilter-FILTER_ACCEPT"><a href="#dom-nodefilter-filter_accept">FILTER_ACCEPT</a></code>, then set
   the <code title="dom-TreeWalker-currentNode"><a href="#dom-treewalker-currentnode">currentNode</a></code> attribute
   to <var title="">node</var> and return <var title="">node</var>.

   <li><p>Run these substeps again.
  </ol>
</ol>


<h3 id="interface-nodefilter"><span class="secno">8.3 </span>Interface <code><a href="#nodefilter">NodeFilter</a></code></h3>

<pre class="idl">callback interface <dfn id="nodefilter">NodeFilter</dfn> {
  // Constants for <span title="dom-NodeFilter-acceptNode">acceptNode()</span>
  const unsigned short <a href="#dom-nodefilter-filter_accept" title="dom-NodeFilter-FILTER_ACCEPT">FILTER_ACCEPT</a> = 1;
  const unsigned short <a href="#dom-nodefilter-filter_reject" title="dom-NodeFilter-FILTER_REJECT">FILTER_REJECT</a> = 2;
  const unsigned short <a href="#dom-nodefilter-filter_skip" title="dom-NodeFilter-FILTER_SKIP">FILTER_SKIP</a> = 3;

  // Constants for <a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a>
  const unsigned long <a href="#dom-nodefilter-show_all" title="dom-NodeFilter-SHOW_ALL">SHOW_ALL</a> = 0xFFFFFFFF;
  const unsigned long <a href="#dom-nodefilter-show_element" title="dom-NodeFilter-SHOW_ELEMENT">SHOW_ELEMENT</a> = 0x1;
  const unsigned long <span title="dom-NodeFilter-SHOW_ATTRIBUTE">SHOW_ATTRIBUTE</span> = 0x2; // historical
  const unsigned long <a href="#dom-nodefilter-show_text" title="dom-NodeFilter-SHOW_TEXT">SHOW_TEXT</a> = 0x4;
  const unsigned long <span title="dom-NodeFilter-SHOW_CDATA_SECTION">SHOW_CDATA_SECTION</span> = 0x8; // historical
  const unsigned long <span title="dom-NodeFilter-SHOW_ENTITY_REFERENCE">SHOW_ENTITY_REFERENCE</span> = 0x10; // historical
  const unsigned long <span title="dom-NodeFilter-SHOW_ENTITY">SHOW_ENTITY</span> = 0x20; // historical
  const unsigned long <a href="#dom-nodefilter-show_processing_instruction" title="dom-NodeFilter-SHOW_PROCESSING_INSTRUCTION">SHOW_PROCESSING_INSTRUCTION</a> = 0x40;
  const unsigned long <a href="#dom-nodefilter-show_comment" title="dom-NodeFilter-SHOW_COMMENT">SHOW_COMMENT</a> = 0x80;
  const unsigned long <a href="#dom-nodefilter-show_document" title="dom-NodeFilter-SHOW_DOCUMENT">SHOW_DOCUMENT</a> = 0x100;
  const unsigned long <a href="#dom-nodefilter-show_document_type" title="dom-NodeFilter-SHOW_DOCUMENT_TYPE">SHOW_DOCUMENT_TYPE</a> = 0x200;
  const unsigned long <a href="#dom-nodefilter-show_document_fragment" title="dom-NodeFilter-SHOW_DOCUMENT_FRAGMENT">SHOW_DOCUMENT_FRAGMENT</a> = 0x400;
  const unsigned long <span title="dom-NodeFilter-SHOW_NOTATION">SHOW_NOTATION</span> = 0x800; // historical

  unsigned short <span title="dom-NodeFilter-acceptNode">acceptNode</span>(<a href="#node">Node</a> <var title="">node</var>);
};</pre>

<p><code><a href="#nodefilter">NodeFilter</a></code> objects can be used as
<a href="#concept-traversal-filter" title="concept-traversal-filter">filter</a> callback and provide
constants for the <a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a>
bitmask.

<p class="note">It is typically implemented as an ECMAScript function.

<p>These constants can be used as callback return value:

<ul class="brief">
 <li><dfn id="dom-nodefilter-filter_accept" title="dom-NodeFilter-FILTER_ACCEPT"><code>FILTER_ACCEPT</code></dfn> (1);
 <li><dfn id="dom-nodefilter-filter_reject" title="dom-NodeFilter-FILTER_REJECT"><code>FILTER_REJECT</code></dfn> (2);
 <li><dfn id="dom-nodefilter-filter_skip" title="dom-NodeFilter-FILTER_SKIP"><code>FILTER_SKIP</code></dfn> (3).
</ul>

<p>These constants can be used for the
<a href="#concept-traversal-whattoshow" title="concept-traversal-whatToShow">whatToShow</a> bitmask:

<ul class="brief">
 <li><dfn id="dom-nodefilter-show_all" title="dom-NodeFilter-SHOW_ALL"><code>SHOW_ALL</code></dfn> (4294967295, FFFFFFFF in hexadecimal);
 <li><dfn id="dom-nodefilter-show_element" title="dom-NodeFilter-SHOW_ELEMENT"><code>SHOW_ELEMENT</code></dfn> (1);
 <!-- AttrExodus
 <li><dfn title=dom-NodeFilter-SHOW_ATTRIBUTE><code>SHOW_ATTRIBUTE</code></dfn> (2, historical);
 -->
 <li><dfn id="dom-nodefilter-show_text" title="dom-NodeFilter-SHOW_TEXT"><code>SHOW_TEXT</code></dfn> (4);
 <!-- XXX still questionable
 <li><dfn title=dom-NodeFilter-SHOW_CDATA_SECTION><code>SHOW_CDATA_SECTION</code></dfn> (8; historical);
 -->
 <li><dfn id="dom-nodefilter-show_processing_instruction" title="dom-NodeFilter-SHOW_PROCESSING_INSTRUCTION"><code>SHOW_PROCESSING_INSTRUCTION</code></dfn> (64, 40 in hexadecimal);
 <li><dfn id="dom-nodefilter-show_comment" title="dom-NodeFilter-SHOW_COMMENT"><code>SHOW_COMMENT</code></dfn> (128, 80 in hexadecimal);
 <li><dfn id="dom-nodefilter-show_document" title="dom-NodeFilter-SHOW_DOCUMENT"><code>SHOW_DOCUMENT</code></dfn> (256, 100 in hexadecimal);
 <li><dfn id="dom-nodefilter-show_document_type" title="dom-NodeFilter-SHOW_DOCUMENT_TYPE"><code>SHOW_DOCUMENT_TYPE</code></dfn> (512, 200 in hexadecimal);
 <li><dfn id="dom-nodefilter-show_document_fragment" title="dom-NodeFilter-SHOW_DOCUMENT_FRAGMENT"><code>SHOW_DOCUMENT_FRAGMENT</code></dfn> (1024, 400 in hexadecimal).
</ul>


<h2 id="collections"><span class="secno">9 </span>Collections</h2>

<p>A <dfn id="concept-collection" title="concept-collection">collection</dfn> is an object that
represents a lists of DOM nodes. A
<a href="#concept-collection" title="concept-collection">collection</a> can be either
<dfn id="concept-collection-live" title="concept-collection-live">live</dfn> or
<dfn id="concept-collection-static" title="concept-collection-static">static</dfn>. Unless otherwise stated,
a <a href="#concept-collection" title="concept-collection">collection</a> must be
<a href="#concept-collection-live" title="concept-collection-live">live</a>.

<p>If a <a href="#concept-collection" title="concept-collection">collection</a> is <a href="#concept-collection-live" title="concept-collection-live">live</a>, then the attributes and methods
on that object must operate on the actual underlying data, not a snapshot of
the data.

<p>When a <a href="#concept-collection" title="concept-collection">collection</a> is created, a
filter and a root are associated with it.

<p>The <a href="#concept-collection" title="concept-collection">collection</a> then
<dfn id="represented-by-the-collection" title="represented by the collection">represents</dfn> a view of the
subtree rooted at the <a href="#concept-collection" title="concept-collection">collection's</a>
root, containing only nodes that match the given filter. The view is linear.
In the absence of specific requirements to the contrary, the nodes within
the <a href="#concept-collection" title="concept-collection">collection</a> must be sorted in
<a href="#concept-tree-order" title="concept-tree-order">tree order</a>.

<p>An attribute that returns a
<a href="#concept-collection-live" title="concept-collection-live">live</a>
<a href="#concept-collection" title="concept-collection">collection</a> must return the same object
every time it is retrieved.


<h3 id="interface-nodelist"><span class="secno">9.1 </span>Interface <code><a href="#nodelist">NodeList</a></code></h3>

<p>A <code><a href="#nodelist">NodeList</a></code> object is a
<a href="#concept-collection" title="concept-collection">collection</a> of
<a href="#concept-node" title="concept-node">nodes</a>.

<pre class="idl">[ArrayClass]
interface <dfn id="nodelist">NodeList</dfn> {
  getter <a href="#node">Node</a>? <a href="#dom-nodelist-item" title="dom-NodeList-item">item</a>(unsigned long <var title="">index</var>);
  readonly attribute unsigned long <a href="#dom-nodelist-length" title="dom-NodeList-length">length</a>;
};</pre>

<dl class="domintro">
 <dt><var title="">collection</var> . <code title="dom-NodeList-length"><a href="#dom-nodelist-length">length</a></code>
 <dd>
  <p>Returns the number of <a href="#concept-node" title="concept-node">nodes</a> in the
  <a href="#concept-collection" title="concept-collection">collection</a>.

 <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-NodeList-item"><a href="#dom-nodelist-item">item</a></code>(<var title="">index</var>)
 <dt><var title="">element</var> = <var title="">collection</var>[<var title="">index</var>]
 <dd>
  <p>Returns the <a href="#concept-node" title="concept-node">node</a> with index
  <var title="">index</var> from the
  <a href="#concept-collection" title="concept-collection">collection</a>. The
  <a href="#concept-node" title="concept-node">nodes</a> are sorted in
  <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.
</dl>

<div class="impl">

<p>The object's <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>
are the numbers in the range zero to one less than the number of nodes
<a href="#represented-by-the-collection">represented by the collection</a>. If there are no such elements, then
there are no <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.

<p>The <dfn id="dom-nodelist-length" title="dom-NodeList-length"><code>length</code></dfn> attribute must
return the number of nodes <a href="#represented-by-the-collection">represented by the collection</a>.

<p>The
<dfn id="dom-nodelist-item" title="dom-NodeList-item"><code>item(<var title="">index</var>)</code></dfn>
method must return the <var title="">index</var>th
node in the <a href="#concept-collection" title="concept-collection">collection</a>. If there is no
<var title="">index</var>th node in the <a href="#concept-collection" title="concept-collection">collection</a>, then the method must return null.

</div>


<h3 id="interface-htmlcollection"><span class="secno">9.2 </span>Interface <code><a href="#htmlcollection">HTMLCollection</a></code></h3>

<p>An <code><a href="#htmlcollection">HTMLCollection</a></code> object is a
<a href="#concept-collection" title="concept-collection">collection</a> of
<a href="#concept-element" title="concept-element">elements</a>.

<p class="note">This interface is called <code><a href="#htmlcollection">HTMLCollection</a></code> for
historical reasons. The
<code title="dom-HTMLCollection-namedItem"><a href="#dom-htmlcollection-nameditem">namedItem()</a></code> method returns an
<code class="external" data-anolis-spec="webidl"><a href="http://dev.w3.org/2006/webapi/WebIDL/#idl-object">object</a></code> for interfaces that inherit from
this interface, which return other objects for historical reasons.

<pre class="idl">interface <dfn id="htmlcollection">HTMLCollection</dfn> {
  readonly attribute unsigned long <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a>;
  getter <a href="#element">Element</a>? <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>(unsigned long <var title="">index</var>);
  getter <a href="#element">Element</a>? <a href="#dom-htmlcollection-nameditem" title="dom-HTMLCollection-namedItem">namedItem</a>(DOMString <var title="">name</var>);
};</pre>

<dl class="domintro">
 <dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code>
 <dd>
  <p>Returns the number of <a href="#concept-element" title="concept-element">elements</a> in
  the <a href="#concept-collection" title="concept-collection">collection</a>.

 <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)
 <dt><var title="">element</var> = <var title="">collection</var>[<var title="">index</var>]
 <dd>
  <p>Returns the <a href="#concept-element" title="concept-element">element</a> with index
  <var title="">index</var> from the <a href="#concept-collection" title="concept-collection">collection</a>.
  The <a href="#concept-element" title="concept-element">elements</a> are sorted in <a href="#concept-tree-order" title="concept-tree-order">tree order</a>.

 <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-namedItem"><a href="#dom-htmlcollection-nameditem">namedItem</a></code>(<var title="">name</var>)
 <dt><var title="">element</var> = <var title="">collection</var>[<var title="">name</var>]
 <dd>
  <p>Returns the first <a href="#concept-element" title="concept-element">element</a> with <a href="#concept-id" title="concept-id">ID</a> or name <var title="">name</var>
  from the collection.
  <p>Only <code title="">a</code>, <code title="">applet</code>,
  <code title="">area</code>, <code title="">embed</code>,
  <code title="">form</code>, <code title="">frame</code>,
  <code title="">frameset</code>, <code title="">iframe</code>,
  <code title="">img</code>, and <code title="">object</code>
  <a href="#concept-element" title="concept-element">element</a> in the
  <a href="#html-namespace">HTML namespace</a> can have a name for the purpose of this
  method; their name is given by the value of their
  <code title="">name</code> attribute.
</dl>

<div class="impl">

<p>The object's <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>
are the numbers in the range zero to one less than the number of nodes
<a href="#represented-by-the-collection">represented by the collection</a>. If there are no such elements, then
there are no <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.

<p>The <dfn id="dom-htmlcollection-length" title="dom-HTMLCollection-length"><code>length</code></dfn> attribute
must return the number of nodes <a href="#represented-by-the-collection">represented by the collection</a>.

<p>The
<dfn id="dom-htmlcollection-item" title="dom-HTMLCollection-item"><code>item(<var title="">index</var>)</code></dfn>
method must return the <var title="">index</var>th
<a href="#concept-element" title="concept-element">element</a> in the <a href="#concept-collection" title="concept-collection">collection</a>. If there is no
<var title="">index</var>th <a href="#concept-element" title="concept-element">element</a> in the <a href="#concept-collection" title="concept-collection">collection</a>, then the method must return null.

<p>The <a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-names">supported property names</a> are the
values from the list returned by these steps:

<ol>
 <li><p>Let <var title="">result</var> be an empty list.
 <li>
  <p>For each <var title="">element</var>
  <a href="#represented-by-the-collection">represented by the collection</a>, in
  <a href="#concept-tree-order" title="concept-tree-order">tree order</a>, run these substeps:
  <ol>
   <li><p>If <var title="">element</var> is in the <a href="#html-namespace">HTML namespace</a>
   and <a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> a
   <a href="#concept-named-attribute" title="concept-named-attribute"><code title="">name</code> attribute</a>
   whose <a href="#concept-attribute-value" title="concept-attribute-value">value</a> is neither the
   empty string nor is in <var title="">result</var>, append
   <var title="">element</var>'s
   <a href="#concept-named-attribute" title="concept-named-attribute"><code title="">name</code> attribute</a>
   <a href="#concept-attribute-value" title="concept-attribute-value">value</a> to <var title="">result</var>.

   <li><p>If <var title="">element</var> has an
   <a href="#concept-id" title="concept-ID">ID</a> which is not in <var title="">result</var>,
   append <var title="">element</var>'s <a href="#concept-id" title="concept-ID">ID</a> to
   <var title="">result</var>.
  </ol>
 <li><p>Return <var title="">result</var>.
</ol>

<p>The
<dfn id="dom-htmlcollection-nameditem" title="dom-HTMLCollection-namedItem"><code>namedItem(<var title="">key</var>)</code></dfn>
method must return the first <a href="#concept-element" title="concept-element">element</a> in
the <a href="#concept-collection" title="concept-collection">collection</a> that either
<a href="#concept-element-attribute-has" title="concept-element-attribute-has">has</a> a
<a href="#concept-named-attribute" title="concept-named-attribute"><code title="">name</code> attribute</a>
whose <a href="#concept-attribute-value" title="concept-attribute-value">value</a> is
<var title="">key</var> or has an <a href="#concept-id" title="concept-id">ID</a> which is
<var title="">key</var>, or null otherwise.

</div>


<!-- AttrExodus
<h3>Interface <code>NamedNodeMap</code></h3>
<p>Since <code title=dom-Node-attributes>attributes</code> is the
only remaining API using this interface and the tentative plan is to change
<code>Attr</code> we also plan to remove this interface and replace it with
a lightweight <code>AttrMap</code> or some such &mdash;
<a href=http://lists.w3.org/Archives/Public/public-webapps/2010JulSep/0797.html>http://lists.w3.org/Archives/Public/public-webapps/2010JulSep/0797.html</a>

<p>A <code>NamedNodeMap</code> object is a kind of <span
title=concept-collection>collection</span>, whose primary purpose is to expose
<code>Node</code>s by name.

<pre class=idl>interface <dfn>NamedNodeMap</dfn> {
  <span>Node</span> <span title=dom-NamedNodeMap-getNamedItem>getNamedItem</span>(DOMString name);
  <span>Node</span> <span title=dom-NamedNodeMap-setNamedItem>setNamedItem</span>(<span>Node</span> arg);
  <span>Node</span> <span title=dom-NamedNodeMap-removeNamedItem>removeNamedItem</span>(DOMString name);
  <span>Node</span> <span title=dom-NamedNodeMap-item>item</span>(unsigned long index);
  readonly attribute unsigned long <span title=dom-NamedNodeMap-length>length</span>;
  <span>Node</span> <span title=dom-NamedNodeMap-getNamedItemNS>getNamedItemNS</span>(DOMString namespace, DOMString localName);
  <span>Node</span> <span title=dom-NamedNodeMap-setNamedItemNS>setNamedItemNS</span>(<span>Node</span> arg);
  <span>Node</span> <span title=dom-NamedNodeMap-removeNamedItemNS>removeNamedItemNS</span>(DOMString namespace, DOMString localName);
};</pre>

<p><dfn title=dom-NamedNodeMap-getNamedItem>getNamedItem</dfn>

<p><dfn title=dom-NamedNodeMap-setNamedItem>setNamedItem</dfn>

<p><dfn title=dom-NamedNodeMap-removeNamedItem>removeNamedItem</dfn>

<p><dfn title=dom-NamedNodeMap-item>item</dfn>

<p>The <dfn title=dom-NamedNodeMap-length><code>length</code></dfn> attribute must return the number of nodes <span>represented by the collection</span>.

<p><dfn title=dom-NamedNodeMap-getNamedItemNS>getNamedItemNS</dfn>

<p><dfn title=dom-NamedNodeMap-setNamedItemNS>setNamedItemNS</dfn>

<p><dfn title=dom-NamedNodeMap-removeNamedItemNS>removeNamedItemNS</dfn>
-->


<h2 id="lists"><span class="secno">10 </span>Lists</h2>

<h3 id="interface-domtokenlist"><span class="secno">10.1 </span>Interface <code><a href="#domtokenlist">DOMTokenList</a></code></h3>

<pre class="idl">interface <dfn id="domtokenlist">DOMTokenList</dfn> {
  readonly attribute unsigned long <a href="#dom-domtokenlist-length" title="dom-DOMTokenList-length">length</a>;
  getter DOMString? <a href="#dom-domtokenlist-item" title="dom-DOMTokenList-item">item</a>(unsigned long <var title="">index</var>);
  boolean <a href="#dom-domtokenlist-contains" title="dom-DOMTokenList-contains">contains</a>(DOMString <var title="">token</var>);
  void <a href="#dom-domtokenlist-add" title="dom-DOMTokenList-add">add</a>(DOMString... <var title="">tokens</var>);
  void <a href="#dom-domtokenlist-remove" title="dom-DOMTokenList-remove">remove</a>(DOMString... <var title="">tokens</var>);
  boolean <a href="#dom-domtokenlist-toggle" title="dom-DOMTokenList-toggle">toggle</a>(DOMString <var title="">token</var>, optional boolean <var title="">force</var>);
  <a href="#dom-domtokenlist-stringifier" title="dom-DOMTokenList-stringifier">stringifier</a>;
};</pre>

<p>A <code><a href="#domtokenlist">DOMTokenList</a></code> object has an associated list of unique tokens, which is initially empty.

<p>A <code><a href="#domtokenlist">DOMTokenList</a></code> object also has an associated
<a href="#concept-element" title="concept-element">element</a> and an
<a href="#concept-attribute" title="concept-attribute">attribute</a>'s
<a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a>.

<p>A <code><a href="#domtokenlist">DOMTokenList</a></code> object's
<dfn id="concept-dtl-update" title="concept-DTL-update">update steps</dfn> are:

<ol>
 <li><p>If there is no associated
 <a href="#concept-attribute" title="concept-attribute">attribute</a> (when the object is a
 <code><a href="#domsettabletokenlist">DOMSettableTokenList</a></code>), terminate these steps.

 <li><p><a href="#concept-element-attributes-set" title="concept-element-attributes-set">Set an attribute</a>
 for the associated <a href="#concept-element" title="concept-element">element</a> using
 associated <a href="#concept-attribute" title="concept-attribute">attribute</a>'s
 <a href="#concept-attribute-local-name" title="concept-attribute-local-name">local name</a> and the result
 of running the <a href="#concept-set-serializer" title="concept-set-serializer">set serializer</a> for
 the associated list of tokens.
</ol>

<dl class="domintro">
 <dt><code><var title="">tokenlist</var> . <a href="#dom-domtokenlist-length" title="dom-DOMTokenList-length">length</a></code>
 <dd><p>Returns the number of tokens.

 <dt><code><var title="">tokenlist</var> . <a href="#dom-domtokenlist-item" title="dom-DOMTokenList-item">item</a>(<var title="">index</var>)</code>
 <dt><code><var title="">tokenlist</var>[<var title="">index</var>]</code>
 <dd><p>Returns the token with index <var title="">index</var>.

 <dt><code><var title="">tokenlist</var> . <a href="#dom-domtokenlist-contains" title="dom-DOMTokenList-contains">contains</a>(<var title="">token</var>)</code>
 <dd>
  <p>Returns true if <var title="">token</var> is present, and false otherwise.
  <p>Throws a "<code><a href="#syntaxerror">SyntaxError</a></code>" exception if <var title="">token</var>
  is the empty string.
  <p>Throws an "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception if
  <var title="">token</var> contains any
  <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>.

 <dt><code><var title="">tokenlist</var> . <a href="#dom-domtokenlist-add" title="dom-DOMTokenList-add">add</a>(<var title="">tokens</var>…)</code>
 <dd>
  <p>Adds all arguments passed, except those already present.
  <p>Throws a "<code><a href="#syntaxerror">SyntaxError</a></code>" exception if one if the arguments
  is the empty string.
  <p>Throws an "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception if one of the
  arguments contains any
  <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>.

 <dt><code><var title="">tokenlist</var> . <a href="#dom-domtokenlist-remove" title="dom-DOMTokenList-remove">remove</a>(<var title="">tokens</var>…)</code>
 <dd>
  <p>Removes arguments passed, if they are present.
  <p>Throws a "<code><a href="#syntaxerror">SyntaxError</a></code>" exception if one if the arguments
  is the empty string.
  <p>Throws an "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception if one of the
  arguments contains any
  <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>.

 <dt><code><var title="">tokenlist</var> . <a href="#dom-domtokenlist-toggle" title="dom-DOMTokenList-toggle">toggle</a>(<var title="">token</var> [, <var title="">force</var>])</code>
 <dd>
  <p>If <var title="">force</var> is not given, "toggles"
  <var title="">token</var>, removing it if it's present and adding it if it's
  not. If <var title="">force</var> is true, adds <var title="">token</var> (same
  as <code title="dom-DOMTokenList-add"><a href="#dom-domtokenlist-add">add()</a></code>).  If
  <var title="">force</var> is false, removes <var title="">token</var> (same as
  <code title="dom-DOMTokenList-remove"><a href="#dom-domtokenlist-remove">remove()</a></code>).
  <p>Returns true if <var title="">token</var> is now present, and false
  otherwise.
  <p>Throws a "<code><a href="#syntaxerror">SyntaxError</a></code>" exception if <var title="">token</var> is empty.
  <p>Throws an "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception if <var title="">token</var> contains any spaces.
</dl>

<div class="impl">

<p>The <dfn id="dom-domtokenlist-length" title="dom-DOMTokenList-length"><code>length</code></dfn>
attribute must return the number of tokens in the list of tokens.

<p>The object's
<a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the
numbers in the range zero to the number of tokens in the list of tokens
minus one, unless the list of tokens is empty, in which case there are no
<a class="external" data-anolis-spec="webidl" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.

<p>The
<dfn id="dom-domtokenlist-item" title="dom-DOMTokenList-item"><code>item(<var title="">index</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">index</var> is equal to or greater than the number of
 tokens in the list of tokens, return null and terminate these steps.

 <li><p>Return the <var title="">index</var>th token in the list of tokens.
</ol>

<p>The
<dfn id="dom-domtokenlist-contains" title="dom-DOMTokenList-contains"><code>contains(<var title="">token</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">token</var> is the empty string, then
 <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>"
 exception.

 <li><p>If <var title="">token</var> contains any
 <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>, then
 <a href="#concept-throw" title="concept-throw">throw</a>
 an "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception.

 <li><p>Return true if <var title="">token</var> is in the list of tokens, and
 false otherwise.
</ol>

<p>The
<dfn id="dom-domtokenlist-add" title="dom-DOMTokenList-add"><code>add(<var title="">tokens</var>…)</code></dfn>
method must run these steps:

<ol>
 <li><p>If one of <var title="">tokens</var> is the empty string,
 <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>"
 exception.

 <li><p>If one of <var title="">tokens</var> contains any
 <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>, then
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception.

 <li><p>For each <var title="">token</var> in <var title="">tokens</var>, in given
 order, that is not in the list of tokens, append <var title="">token</var> to
 the list of tokens.

 <li><p>Run the <a href="#concept-dtl-update" title="concept-DTL-update">update steps</a>.
</ol>

<p>The
<dfn id="dom-domtokenlist-remove" title="dom-DOMTokenList-remove"><code>remove(<var title="">tokens</var>…)</code></dfn>
method must run these steps:

<ol>
 <li><p>If one of <var title="">tokens</var> is the empty string,
 <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>"
 exception.

 <li><p>If one of <var title="">tokens</var> contains any
 <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>, then
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception.

 <li><p>For each <var title="">token</var> in <var title="">tokens</var>, remove
 <var title="">token</var> from the list of tokens.

 <li><p>Run the <a href="#concept-dtl-update" title="concept-DTL-update">update steps</a>.
</ol>

<p>The
<dfn id="dom-domtokenlist-toggle" title="dom-DOMTokenList-toggle"><code>toggle(<var title="">token</var>, <var title="">force</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title="">token</var> is the empty string,
 <a href="#concept-throw" title="concept-throw">throw</a> a "<code><a href="#syntaxerror">SyntaxError</a></code>"
 exception.

 <li><p>If <var title="">token</var> contains any
 <a class="external" data-anolis-spec="encoding" href="http://encoding.spec.whatwg.org/#ascii-whitespace">ASCII whitespace</a>,
 <a href="#concept-throw" title="concept-throw">throw</a> an
 "<code><a href="#invalidcharactererror">InvalidCharacterError</a></code>" exception.

 <li><p>If <var title="">token</var> is in the list of tokens and
 <var title="">force</var> is not true (either false or omitted), then remove
 <var title="">token</var> from the list of tokens, run the
 <a href="#concept-dtl-update" title="concept-DTL-update">update steps</a>, and return false.

 <li><p>If <var title="">token</var> is in the list of tokens and
 <var title="">force</var> is true (neither false nor omitted), return true.

 <li><p>If <var title="">force</var> is false (neither true nor omitted),
 return false.

 <li><p>Append <var title="">token</var> to the list of tokens, run the
 <a href="#concept-dtl-update" title="concept-DTL-update">update steps</a>, and return true.
</ol>

<p>The <dfn id="dom-domtokenlist-stringifier" title="dom-DOMTokenList-stringifier">stringifier</dfn> must
return the result of the
<a href="#concept-set-serializer" title="concept-set-serializer">set serializer</a> for the associated
list of tokens.

</div>


<h3 id="interface-domsettabletokenlist"><span class="secno">10.2 </span>Interface <code><a href="#domsettabletokenlist">DOMSettableTokenList</a></code></h3>

<pre class="idl">interface <dfn id="domsettabletokenlist">DOMSettableTokenList</dfn> : <a href="#domtokenlist">DOMTokenList</a> {
            attribute DOMString <a href="#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>;
};</pre>

<p>A <code><a href="#domsettabletokenlist">DOMSettableTokenList</a></code> object is equivalent to a
<a href="#domtokenlist">DOMTokenList</a> object without an associated
<a href="#concept-attribute" title="concept-attribute">attribute</a>.

<dl class="domintro">
 <dt><code><var title="">tokenlist</var> . <a href="#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a></code>
 <dd>
  <p>Returns the associated set as string.
  <p>Can be set, to change the associated set via a string.
</dl>

<div class="impl">

<p>The <dfn id="dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value"><code>value</code></dfn>
attribute must return the result of the
<a href="#concept-set-serializer" title="concept-set-serializer">set serializer</a> for the associated
list of tokens.

<p>Setting the <code title="dom-DOMSettableTokenList-value"><a href="#dom-domsettabletokenlist-value">value</a></code>
attribute must run the <a href="#concept-set-parser" title="concept-set-parser">set parser</a> for
the given value and set the associated list of tokens to the result.

</div>


<h2 id="historical"><span class="secno">11 </span>Historical</h2>

<p>As explained in <a href="#goals">goals</a> this specification is a
significant revision of various DOM specifications. This section attempts to
enumerate the changes.


<h3 id="dom-events"><span class="secno">11.1 </span>DOM Events</h3>

<p>These are the changes made to the features described in the
"DOM Event Architecture", "Basic Event Interfaces", "Mutation Events", and
"Mutation Name Event Types" chapters of <cite>DOM Level 3 Events</cite>. The
other chapters are defined by the <cite>UI Events</cite> specification.
<a class="informative" href="#refsDOM3EVENTS">[DOM3EVENTS]</a>
<a href="#refsUIEVENTS">[UIEVENTS]</a>

<ul class="brief">
 <li>Events have constructors now.
 <li>Removes <dfn id="mutationevent"><code>MutationEvent</code></dfn>, and
 <dfn id="mutationnameevent"><code>MutationNameEvent</code></dfn>.
 <li>Fire is no longer synonymous with dispatch, but includes initializing
 an event.</li>
 <li>The propagation and canceled flags are unset when invoking
 <code title="dom-Event-initEvent"><a href="#dom-event-initevent">initEvent()</a></code> rather than after
 dispatch.
</ul>


<h3 id="dom-core"><span class="secno">11.2 </span>DOM Core</h3>

<p>These are the changes made to the features described in
<cite>DOM Level 3 Core</cite>.

<p><dfn id="domstring"><code>DOMString</code></dfn> and
<dfn id="domtimestamp"><code>DOMTimeStamp</code></dfn> are now defined in Web IDL.

<p><code><a href="#node">Node</a></code> now inherits from <code><a href="#eventtarget">EventTarget</a></code>.</p>

<p><a href="#concept-node" title="concept-node">Nodes</a> are implicitly
<a href="#concept-node-adopt" title="concept-node-adopt">adopted</a> across
<a href="#concept-document" title="concept-document">document</a> boundaries.

<p><a href="#concept-doctype" title="concept-doctype">Doctypes</a> now always have a
<a href="#concept-node-document" title="concept-node-document">node document</a> and can be moved
across <a href="#concept-document" title="concept-document">document</a> boundaries.

<p><code><a href="#processinginstruction">ProcessingInstruction</a></code> now inherits from
<code><a href="#characterdata">CharacterData</a></code>.

<p><code><a href="#domerror">DOMError</a></code> is completely redesigned.</p>

<p>The remainder of interfaces and interface members listed in this section
were removed to simplify the DOM platform. Implementations conforming to
this specification will not support them.

<p class="warning">It is not yet clear if it would be web-compatible to
remove all the following features. The editors welcome any data showing that
some of these features should be reintroduced.

<p>Interfaces:
<ul class="brief">
 <li><dfn id="cdatasection"><code>CDATASection</code></dfn>
 <li><dfn id="domconfiguration"><code>DOMConfiguration</code></dfn>
 <li><dfn id="domerrorhandler"><code>DOMErrorHandler</code></dfn>
 <li><dfn id="domimplementationlist"><code>DOMImplementationList</code></dfn>
 <li><dfn id="domimplementationsource"><code>DOMImplementationSource</code></dfn>
 <li><dfn id="domlocator"><code>DOMLocator</code></dfn>
 <li><dfn id="domobject"><code>DOMObject</code></dfn>
 <li><dfn id="domuserdata"><code>DOMUserData</code></dfn>
 <li><dfn id="entity"><code>Entity</code></dfn>
 <li><dfn id="entityreference"><code>EntityReference</code></dfn>
 <li><dfn id="namednodemap"><code>NamedNodeMap</code></dfn> <!--AttrExodus-->
 <li><dfn id="namelist"><code>NameList</code></dfn>
 <li><dfn id="notation"><code>Notation</code></dfn>
 <li><dfn id="typeinfo"><code>TypeInfo</code></dfn>
 <li><dfn id="userdatahandler"><code>UserDataHandler</code></dfn>
</ul>

<p>Interface members:
<dl>
 <dt><code><a href="#node">Node</a></code>
 <dd>
  <ul class="brief">
   <!--AttrExodus-->
   <li><dfn id="dom-node-hasattributes" title="dom-Node-hasAttributes"><code>hasAttributes()</code></dfn>
   <li><dfn id="dom-node-attributes" title="dom-Node-attributes"><code>attributes</code></dfn>

   <!--NodeExodus-->
   <li><dfn id="dom-node-namespaceuri" title="dom-Node-namespaceURI"><code>namespaceURI</code></dfn>
   <li><dfn id="dom-node-prefix" title="dom-Node-prefix"><code>prefix</code></dfn>
   <li><dfn id="dom-node-localname" title="dom-Node-localName"><code>localName</code></dfn>

   <li><dfn id="dom-node-issupported" title="dom-Node-isSupported"><code>isSupported</code></dfn>
   <li><dfn id="dom-node-getfeature" title="dom-Node-getFeature"><code>getFeature()</code></dfn>
   <li><dfn id="dom-node-getuserdata" title="dom-Node-getUserData"><code>getUserData()</code></dfn>
   <li><dfn id="dom-node-setuserdata" title="dom-Node-setUserData"><code>setUserData()</code></dfn>

   <li><dfn id="dom-node-issamenode" title="dom-Node-isSameNode"><code>isSameNode()</code></dfn>
  </ul>

 <dt><code><a href="#document">Document</a></code>
 <dd>
  <ul class="brief">
   <li><dfn id="dom-document-createcdatasection" title="dom-Document-createCDATASection"><code>createCDATASection()</code></dfn>
   <li><dfn id="dom-document-createattribute" title="dom-Document-createAttribute"><code>createAttribute()</code></dfn>
   <li><dfn id="dom-document-createattributens" title="dom-Document-createAttributeNS"><code>createAttributeNS()</code></dfn>
   <li><dfn id="dom-document-createentityreference" title="dom-Document-createEntityReference"><code>createEntityReference()</code></dfn>
   <li><dfn id="dom-document-inputencoding" title="dom-Document-inputEncoding"><code>inputEncoding</code></dfn>
   <li><dfn id="dom-document-xmlencoding" title="dom-Document-xmlEncoding"><code>xmlEncoding</code></dfn>
   <li><dfn id="dom-document-xmlstandalone" title="dom-Document-xmlStandalone"><code>xmlStandalone</code></dfn>
   <li><dfn id="dom-document-xmlversion" title="dom-Document-xmlVersion"><code>xmlVersion</code></dfn>
   <li><dfn id="dom-document-stricterrorchecking" title="dom-Document-strictErrorChecking"><code>strictErrorChecking</code></dfn>
   <li><dfn id="dom-document-domconfig" title="dom-Document-domConfig"><code>domConfig</code></dfn>
   <li><dfn id="dom-document-normalizedocument" title="dom-Document-normalizeDocument"><code>normalizeDocument()</code></dfn>
   <li><dfn id="dom-document-renamenode" title="dom-Document-renameNode"><code>renameNode()</code></dfn>
  </ul>

 <dt><code><a href="#domimplementation">DOMImplementation</a></code>
 <dd>
  <ul class="brief">
   <li><dfn id="dom-domimplementation-getfeature" title="dom-DOMImplementation-getFeature"><code>getFeature()</code></dfn>
  </ul>

 <dt><code><a href="#attr">Attr</a></code>
 <dd>
  <p>No longer inherits from <code><a href="#node">Node</a></code> and therefore completely
  changed.
  <!--AttrExodus
  <p><dfn title=dom-Attr-schemaTypeInfo><code>schemaTypeInfo</code></dfn>
  <p><dfn title=dom-Attr-isId><code>isId</code></dfn>
  -->

 <dt><code><a href="#element">Element</a></code>
 <dd>
  <ul class="brief">
   <li><dfn id="dom-element-getattributenode" title="dom-Element-getAttributeNode"><code>getAttributeNode()</code></dfn>
   <li><dfn id="dom-element-getattributenodens" title="dom-Element-getAttributeNodeNS"><code>getAttributeNodeNS()</code></dfn>
   <li><dfn id="dom-element-setattributenode" title="dom-Element-setAttributeNode"><code>setAttributeNode()</code></dfn>
   <li><dfn id="dom-element-removeattributenode" title="dom-Element-removeAttributeNode"><code>removeAttributeNode()</code></dfn>
   <li><dfn id="dom-element-schematypeinfo" title="dom-Element-schemaTypeInfo"><code>schemaTypeInfo</code></dfn>
   <li><dfn id="dom-element-setidattribute" title="dom-Element-setIdAttribute"><code>setIdAttribute()</code></dfn>
   <li><dfn id="dom-element-setidattributens" title="dom-Element-setIdAttributeNS"><code>setIdAttributeNS()</code></dfn>
   <li><dfn id="dom-element-setidattributenode" title="dom-Element-setIdAttributeNode"><code>setIdAttributeNode()</code></dfn>
  </ul>

 <dt><code><a href="#documenttype">DocumentType</a></code>
 <dd>
  <ul class="brief">
   <li><dfn id="dom-documenttype-entities" title="dom-DocumentType-entities"><code>entities</code></dfn>
   <li><dfn id="dom-documenttype-notations" title="dom-DocumentType-notations"><code>notations</code></dfn>
   <li><dfn id="dom-documenttype-internalsubset" title="dom-DocumentType-internalSubset"><code>internalSubset</code></dfn>
  </ul>

 <dt><code><a href="#text">Text</a></code>
 <dd>
  <ul class="brief">
   <li><dfn id="dom-text-iselementcontentwhitespace" title="dom-Text-isElementContentWhitespace"><code>isElementContentWhitespace</code></dfn>
   <li><dfn id="dom-text-replacewholetext" title="dom-Text-replaceWholeText"><code>replaceWholeText()</code></dfn>
  </ul>
</dl>

<h3 id="dom-ranges"><span class="secno">11.3 </span>DOM Ranges</h3>

<p>These are the changes made to the features described in the
"Document Object Model Range" chapter of
<cite>DOM Level 2 Traversal and Range</cite>.

<p><dfn id="rangeexception"><code>RangeException</code></dfn> has been removed.

<p><code><a href="#range">Range</a></code> objects can now be moved between
<a href="#concept-document" title="concept-document">documents</a> and used on
<a href="#concept-node" title="concept-node">nodes</a> that are not
<a href="#in-a-document">in a document</a>.

<p class="XXX">Probably incomplete.


<h3 id="dom-traversal"><span class="secno">11.4 </span>DOM Traversal</h3>

<p>These are the changes made to the features described in the
"Document Object Model Traversal" chapter of
<cite>DOM Level 2 Traversal and Range</cite>.

<p>Differences with respect to
<code title="dom-Document-createNodeIterator"><a href="#dom-document-createnodeiterator">createNodeIterator()</a></code> and
<code title="dom-Document-createTreeWalker"><a href="#dom-document-createtreewalker">createTreeWalker()</a></code>:</p>

<ul>
 <li><p>In the previous edition of DOM Traversal both these methods accepted
 a fourth argument named <var title="">entityReferenceExpansion</var> that has
 been dropped as the DOM never actually exposed entity references in
 practice.

 <li><p>In the previous edition of DOM Traversal both these methods threw a
 "<code><a href="#notsupportederror">NotSupportedError</a></code>" when the <var title="">root</var> was
 null. Now this will throw a language-binding specific exception.

 <li><p>In the previous edition of DOM Traversal both these methods did not
 have optional arguments. That was changed for convenience.
</ul>

<p><code title="dom-NodeFilter-acceptNode">acceptNode()</code> and its
constants have been changed to use unsigned short, rather than just short.

<p>The <code title="">expandEntityReferences</code> attribute has been removed
from the <code><a href="#nodeiterator">NodeIterator</a></code> and <code><a href="#treewalker">TreeWalker</a></code> interfaces.

<p>The <code title="dom-NodeIterator-referenceNode"><a href="#dom-nodeiterator-referencenode">referenceNode</a></code> and
<code title="dom-NodeIterator-pointerBeforeReferenceNode"><a href="#dom-nodeiterator-pointerbeforereferencenode">pointerBeforeReferenceNode</a></code>
attributes have been added to <code><a href="#nodeiterator">NodeIterator</a></code> objects to align
with user agents.

<p><code title="dom-NodeIterator-nextNode"><a href="#dom-nodeiterator-nextnode">nextNode()</a></code> and
<code title="dom-NodeIterator-previousNode"><a href="#dom-nodeiterator-previousnode">previousNode()</a></code> now throw
when invoked from a <code><a href="#nodefilter">NodeFilter</a></code> to align with user agents.


<h2 class="no-num" id="references">References</h2>
<div id="anolis-references"><dl><dt id="refsCSSOMVIEW">[CSSOMVIEW]
<dd>(Non-normative) <cite><a href="http://dev.w3.org/csswg/cssom-view/">CSSOM View Module</a></cite>, Glenn Adams and Simon Pieters. W3C.

<dt id="refsDOM2TR">[DOM2TR]
<dd>(Non-normative) <cite><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/">Document Object Model (DOM) Level 2 Traversal and Range Specification</a></cite>, Joe Kesselman, Jonathan Robie, Mike Champion et al.. W3C.

<dt id="refsDOM3CORE">[DOM3CORE]
<dd>(Non-normative) <cite><a href="http://www.w3.org/TR/DOM-Level-3-Core/">Document Object Model (DOM) Level 3 Core Specification</a></cite>, Arnaud Le Hors, Philippe Le Hégaret, Lauren Wood et al.. W3C.

<dt id="refsDOM3EVENTS">[DOM3EVENTS]
<dd>(Non-normative) <cite><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">Document Object Model (DOM) Level 3 Events Specification</a></cite>, Travis Leithead. W3C.

<dt id="refsDOMPS">[DOMPS]
<dd>(Non-normative) <cite><a href="http://domparsing.spec.whatwg.org/">DOM Parsing and Serialization</a></cite>, Ms2ger. WHATWG.

<dt id="refsELEMENTTRAVERSAL">[ELEMENTTRAVERSAL]
<dd>(Non-normative) <cite><a href="http://www.w3.org/TR/ElementTraversal/">Element Traversal Specification</a></cite>, Doug Schepers. W3C.

<dt id="refsENCODING">[ENCODING]
<dd><cite><a href="http://encoding.spec.whatwg.org/">Encoding Standard</a></cite>, Anne van Kesteren. WHATWG.

<dt id="refsHTML">[HTML]
<dd><cite><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML</a></cite>, Ian Hickson. WHATWG.

<dt id="refsRFC2119">[RFC2119]
<dd><cite><a href="http://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a></cite>, Scott Bradner. IETF.

<dt id="refsUIEVENTS">[UIEVENTS]
<dd><cite><a href="https://dvcs.w3.org/hg/d4e/raw-file/tip/source_respec.htm">UI Events</a></cite>, Gary Kacmarcik and Travis Leithead. W3C.

<dt id="refsURL">[URL]
<dd><cite><a href="http://url.spec.whatwg.org/">URL Standard</a></cite>, Anne van Kesteren. WHATWG.

<dt id="refsWEBIDL">[WEBIDL]
<dd><cite><a href="http://dev.w3.org/2006/webapi/WebIDL/">Web IDL</a></cite>, Cameron McCormack. W3C.

<dt id="refsXML">[XML]
<dd><cite><a href="http://www.w3.org/TR/xml/">Extensible Markup Language</a></cite>, Tim Bray, Jean Paoli, C. M. Sperberg-McQueen et al.. W3C.

<dt id="refsXMLNS">[XMLNS]
<dd><cite><a href="http://www.w3.org/TR/xml-names/">Namespaces in XML</a></cite>, Tim Bray, Dave Hollander, Andrew Layman et al.. W3C.

</dl></div>


<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>

<p>Thanks to

Adam Klein,
Adrian Bateman,
Alex Russell,
Arun Ranganathan,
Jake Archibald<!-- technically B.J. Archibald -->,
Boris Zbarsky,
Brandon Slade,
Brandon Wallace,
Cameron McCormack,
Christophe Dumez,
David Bruant,
David Flanagan,
David Håsäther,
Dethe Elza,
Dominic Cooney,
Domenic Denicola,
Erik Arvidsson,
Glenn Maynard,
Harald Alvestrand,
Henri Sivonen,
Igor Bukanov,
Jacob Rossi,
Jake Verbaten,
James Graham,
Jens Lindström,
João Eiras,
Jonas Sicking,
Joshua Bell,
呂康豪 (Kang-Hao Lu),
Kevin Sweeney,
Manish Tripathi,
Mark Miller,
Mats Palmgren,
Mounir Lamouri,
Michael™ Smith,
Ojan Vafai,
Olli Pettay,
Rafael Weinstein,
Rick Waldron,
Robbert Broersma,
Robin Berjon,
Rune Halvorsen,
Ryosuke Niwa,
Seo Sanghyeon,
Shiki Okasaka,
Stig Halvorsen,
Tab Atkins,
Timo Tijhof,
Travis Leithead,
Yehuda Katz, and
Zack Weinberg

for their useful comments.

<p>Special thanks to Geoffrey Sneddon and Simon Pieters for first specifying the <a href="#nodes">Nodes</a> section of this specification and their
useful comments.

<p>Special thanks also to Ian Hickson for first specifying some parts of
this specification in HTML and his useful comments.
<a href="#refsHTML">[HTML]</a>

<p>Finally, while this specification has been written from scratch, special
thanks should also be extended to the editors of the various specifications
that previously defined the features in this specification: Arnaud Le Hors,
Björn Höhrmann, Doug Schepers, Gavin Nicol, Joe Kesselman, Jonathan Robie,
Lauren Wood, Mike Champion, Peter Sharpe, Philippe Le Hégaret, Robin Berjon,
Steve Byrne, Tom Pixley, and Vidur Apparao.

<script id="head" src="http://www.whatwg.org/specs/web-apps/current-work/dfn.js"></script>
<!-- vim: set expandtab shiftwidth=1 tabstop=1 textwidth=76 -->