Overview.src.html

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

<div class=head>

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

<h1 class=allcaps>DOM</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated [DATE: 01 Jan 1901]</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>>
 <dd>Aryeh Gregor
  (<a href="http://www.mozilla.org/">Mozilla</a>)
  &lt;<a href=mailto:ayg@aryeh.name>ayg@aryeh.name</a>>
 <dd>Ms2ger
  (<a href="http://www.mozilla.org/">Mozilla</a>)
  &lt;<a href="mailto:ms2ger@gmail.com">ms2ger@gmail.com</a>>
</dl>

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

<p class=copyright><a rel="license" href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="http://i.creativecommons.org/p/zero/1.0/80x15.png" alt="CC0"></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
[DATE: 01 Jan 1901], the editors have made this specification available
under the
<a rel="license"
href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0">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">Abstract</h2>
<p>DOM defines a platform-neutral model for events and node trees.


<h2 class="no-num no-toc">Table of Contents</h2>
<!--toc-->


<h2 class=no-num>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>
  <span data-anolis-ref class=informative>DOM3CORE</span>,
  <cite>Element Traversal</cite>
  <span data-anolis-ref class=informative>ELEMENTTRAVERSAL</span>,
  <cite>Selectors API Level 2</cite>
  <span data-anolis-ref class=informative>SELECTORSAPI</span>, the
  "DOM Event Architecture" and "Basic Event Interfaces" chapters of
  <cite>DOM Level 3 Events</cite>
  <span data-anolis-ref class=informative>DOM3EVENTS</span> (specific type
  of events do not belong in the base specification), and
  <cite>DOM Level 2 Traversal and Range</cite>
  <span data-anolis-ref class=informative>DOM2TR</span>, and:

  <ul>
   <li>Aligning them with the needs of JavaScript where possible.
   <li>Aligning them with existing implementations.
   <li>Simplifying them as much as possible.
  </ul>

 <li><p>By moving features from the HTML standard that ought to be part of the DOM
 platform here. <span data-anolis-ref>HTML</span>

 <li>
  <p>By defining a replacement for the "Mutation Events" and
  "Mutation Name Event Types" chapters of <cite>DOM Level 3 Events</cite>
  <span data-anolis-ref class=informative>DOM3EVENTS</span> 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>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. <span data-anolis-ref>RFC2119</span>

<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 JavaScript.

<p>Unless otherwise stated, string comparisons are done in a <span>case-sensitive</span> manner.

<h3>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. <span data-anolis-ref>WEBIDL</span>

<p>Some of the terms used in this specification are defined in
<cite>Encoding</cite>, <cite>Selectors</cite>, <cite>Web IDL</cite>, <cite>XML</cite>, and
<cite>Namespaces in XML</cite>.
<span data-anolis-ref>ENCODING</span>
<span data-anolis-ref>SELECTORS</span>
<span data-anolis-ref>WEBIDL</span>
<span data-anolis-ref>XML</span>
<span data-anolis-ref>XMLNS</span>

<h3>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 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>Terminology</h2>

<p>The term <dfn>context object</dfn> means the object on which the algorithm,
attribute getter, attribute setter, or method being discussed was called. When the
<span>context object</span> 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>Trees</h3> <!-- Sorry reddit, this is not /r/trees -->

<p>A <dfn title=concept-tree>tree</dfn> is a finite hierarchical tree structure. In
<dfn title=concept-tree-order>tree order</dfn> is preorder, depth-first
traversal of a <span title=concept-tree>tree</span>.
<!-- http://en.wikipedia.org/wiki/Tree_traversal#Depth-first_Traversal -->

<p>An object that <dfn title=concept-tree-participate>participates</dfn> in
a <span title=concept-tree>tree</span> has a
<dfn title=concept-tree-parent>parent</dfn>, which is either another object
or null, and an ordered list of zero or more
<dfn title=concept-tree-child>child</dfn> objects. An object <var title>A</var> whose
<span title=concept-tree-parent>parent</span> is object <var title>B</var> is a
<span title=concept-tree-child>child</span> of <var title>B</var>.

<p>The <dfn title=concept-tree-root>root</dfn> of an object is itself, if its
<span title=concept-tree-parent>parent</span> is null, or else it is the
<span title=concept-tree-root>root</span> of its
<span title=concept-tree-parent>parent</span>.

<p>An object <var title>A</var> is called a
<dfn title=concept-tree-descendant>descendant</dfn> of an object
<var title>B</var>, if either <var title>A</var> is a
<span title=concept-tree-child>child</span> of <var title>B</var> or
<var title>A</var> is a <span title=concept-tree-child>child</span> of an
object <var title>C</var> that is a
<span title=concept-tree-descendant>descendant</span> of <var title>B</var>.

<p>An
<dfn title=concept-tree-inclusive-descendant>inclusive descendant</dfn> is
an object or one of its
<span title=concept-tree-descendant>descendants</span>.

<p>An object <var title>A</var> is called an
<dfn title=concept-tree-ancestor>ancestor</dfn> of an object
<var title>B</var> if and only if <var title>B</var> is a
<span title=concept-tree-descendant>descendant</span> of
<var title>A</var>.

<p>An <dfn title=concept-tree-inclusive-ancestor>inclusive ancestor</dfn> is
an object or one of its <span title=concept-tree-ancestor>ancestors</span>.

<p>An object <var title>A</var> is called a
<dfn 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 <span title=concept-tree-parent>parent</span>.

<p>An object <var title>A</var> is
<dfn 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 <span title=concept-tree>tree</span> and <var title>A</var> comes
before <var title>B</var> in
<span title=concept-tree-order>tree order</span>.

<p>An object <var title>A</var> is
<dfn 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 <span title=concept-tree>tree</span> and <var title>A</var> comes
after <var title>B</var> in
<span title=concept-tree-order>tree order</span>.

<p>The <dfn title=concept-tree-first-child>first child</dfn> of an object is
its first <span title=concept-tree-child>child</span> or null if it has no
<span title=concept-tree-child>child</span>.

<p>The <dfn title=concept-tree-last-child>last child</dfn> of an object is
its last <span title=concept-tree-child>child</span> or null if it has no
<span title=concept-tree-child>child</span>.

<p>The <dfn title=concept-tree-previous-sibling>previous sibling</dfn> of an
object is its first <span title=concept-tree-preceding>preceding</span>
<span title=concept-tree-sibling>sibling</span> or null if it has no
<span title=concept-tree-preceding>preceding</span>
<span title=concept-tree-sibling>sibling</span>.

<p>The <dfn title=concept-tree-next-sibling>next sibling</dfn> of an
object is its first <span title=concept-tree-following>following</span>
<span title=concept-tree-sibling>sibling</span> or null if it has no
<span title=concept-tree-following>following</span>
<span title=concept-tree-sibling>sibling</span>.

<p>The <dfn title=concept-tree-index>index</dfn> of an object is its number
of <span title=concept-tree-preceding>preceding</span>
<span title=concept-tree-sibling>siblings</span>.


<h3>Strings</h3>
<p>Comparing two strings in a <dfn>case-sensitive</dfn> manner means comparing them exactly, code point for code point.

<p>Comparing two strings in a <dfn>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 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 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>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>Ordered sets</h3>

<p>The <dfn title=concept-ordered-set-parser>ordered 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 an ordered set of tokens, initially empty.

 <li><p><span>Skip ASCII whitespace</span>.

 <li><p>While <var title>position</var> is not past the end of
 <var title>input</var>:

  <ol>
   <li><p><span>Collect a code point sequence</span> of code points that are
   not <span data-anolis-spec=encoding>ASCII whitespace</span>.

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

   <li><p><span>Skip ASCII whitespace</span>.
  </ol>

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

<p>To <dfn>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 <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>skip ASCII whitespace</dfn> means to
<span>collect a code point sequence</span> of
<span data-anolis-spec=encoding>ASCII whitespace</span> and discard the
return value.

<p>The <dfn title=concept-ordered-set-serializer>ordered 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>Namespaces</h3>
<p>The <dfn>HTML namespace</dfn> is
<code title>http://www.w3.org/1999/xhtml</code>.

<p>The <dfn>XML namespace</dfn> is
<code title>http://www.w3.org/XML/1998/namespace</code>.

<p>The <dfn>XMLNS namespace</dfn> is
<code title>http://www.w3.org/2000/xmlns/</code>.


<h2>Errors</h2>

<p class=XXX>This entire section will move out of DOM into IDL. <code>DOMException</code>
will be defined in terms of JavaScript and made available in both document and worker
environments. <code>DOMError</code> will go away.


<h3>Exception <code>DOMException</code></h3>
<pre class=idl>exception <dfn>DOMException</dfn> {
  const unsigned short <span title=dom-DOMException-INDEX_SIZE_ERR>INDEX_SIZE_ERR</span> = 1;
  const unsigned short <span title=dom-DOMException-DOMSTRING_SIZE_ERR>DOMSTRING_SIZE_ERR</span> = 2; // historical
  const unsigned short <span title=dom-DOMException-HIERARCHY_REQUEST_ERR>HIERARCHY_REQUEST_ERR</span> = 3;
  const unsigned short <span title=dom-DOMException-WRONG_DOCUMENT_ERR>WRONG_DOCUMENT_ERR</span> = 4;
  const unsigned short <span title=dom-DOMException-INVALID_CHARACTER_ERR>INVALID_CHARACTER_ERR</span> = 5;
  const unsigned short <span title=dom-DOMException-NO_DATA_ALLOWED_ERR>NO_DATA_ALLOWED_ERR</span> = 6; // historical
  const unsigned short <span title=dom-DOMException-NO_MODIFICATION_ALLOWED_ERR>NO_MODIFICATION_ALLOWED_ERR</span> = 7;
  const unsigned short <span title=dom-DOMException-NOT_FOUND_ERR>NOT_FOUND_ERR</span> = 8;
  const unsigned short <span title=dom-DOMException-NOT_SUPPORTED_ERR>NOT_SUPPORTED_ERR</span> = 9;
  const unsigned short <span title=dom-DOMException-INUSE_ATTRIBUTE_ERR>INUSE_ATTRIBUTE_ERR</span> = 10; // historical
  const unsigned short <span title=dom-DOMException-INVALID_STATE_ERR>INVALID_STATE_ERR</span> = 11;
  const unsigned short <span title=dom-DOMException-SYNTAX_ERR>SYNTAX_ERR</span> = 12;
  const unsigned short <span title=dom-DOMException-INVALID_MODIFICATION_ERR>INVALID_MODIFICATION_ERR</span> = 13;
  const unsigned short <span title=dom-DOMException-NAMESPACE_ERR>NAMESPACE_ERR</span> = 14;
  const unsigned short <span title=dom-DOMException-INVALID_ACCESS_ERR>INVALID_ACCESS_ERR</span> = 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 <span title=dom-DOMException-SECURITY_ERR>SECURITY_ERR</span> = 18;
  const unsigned short <span title=dom-DOMException-NETWORK_ERR>NETWORK_ERR</span> = 19;
  const unsigned short <span title=dom-DOMException-ABORT_ERR>ABORT_ERR</span> = 20;
  const unsigned short <span title=dom-DOMException-URL_MISMATCH_ERR>URL_MISMATCH_ERR</span> = 21;
  const unsigned short <span title=dom-DOMException-QUOTA_EXCEEDED_ERR>QUOTA_EXCEEDED_ERR</span> = 22;
  const unsigned short <span title=dom-DOMException-TIMEOUT_ERR>TIMEOUT_ERR</span> = 23;
  const unsigned short <span title=dom-DOMException-INVALID_NODE_TYPE_ERR>INVALID_NODE_TYPE_ERR</span> = 24;
  const unsigned short <span title=dom-DOMException-DATA_CLONE_ERR>DATA_CLONE_ERR</span> = 25;
  unsigned short <span title=dom-DOMException-code>code</span>;
};</pre>

<p>The <dfn title=dom-DOMException-code><code>code</code></dfn> exception
field must return the value it was initialized to.

<p>To <dfn 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
 <span>error names table</span> and has a corresponding legacy
 <code title=dom-DOMException-code>code</code> exception field value in the
 third column, set <var title>code</var> to that value.

 <li><p><span data-anolis-spec=webidl>Throw</span> a new
 <code>DOMException</code> exception, whose
 <span data-anolis-spec=webidl>message</span> is a user agent-defined value,
 <span data-anolis-spec=webidl>name</span> is <var title>name</var>, and
 whose <code title=dom-DOMException-code>code</code> exception field is
 <var title>code</var>.
</ol>

<p class=example>To
<i title>throw a "<code>TimeoutError</code>" exception</i>, a
user agent would construct a <code>DOMException</code> exception whose
<span data-anolis-spec=webidl>name</span> is
"<code>TimeoutError</code>" and
<code title=dom-DOMException-code>code</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>TimeoutError</code>".


<h3>Interface <code>DOMError</code></h3>

<pre class=idl>[<span title=dom-DOMError>Constructor</span>(DOMString <var title>name</var>, optional DOMString <var title>message</var> = "")]
interface <dfn>DOMError</dfn> {
  readonly attribute DOMString <span title=dom-DOMError-name>name</span>;
  readonly attribute DOMString <span title=dom-DOMError-message>message</span>;
};</pre>

<p class=XXX><code>DOMError</code> will be nuked in favor of using
<code>DOMException</code> exclusively. See <a href="https://mail.mozilla.org/pipermail/es-discuss/2013-July/thread.html#31677">Creating your own errors</a>
on es-discuss for more details.

<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 <span>error names table</span> is used.

<p>The <dfn title=dom-DOMError><code>DOMError(<var title>name</var>, <var title>message</var>)</code></dfn>
constructor must return a new <code>DOMError</code> object whose
<code title=dom-DOMError-name>name</code> attribute is initialized to
<var title>name</var> and whose <code title=dom-DOMError-message>message</code> attribute
is initialized to <var title>message</var>.

<p>The <dfn title=dom-DOMError-name><code>name</code></dfn> attribute must
return the value it was initialized to.

<p>The <dfn 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>message</code> will
typically be implementation-dependent and for informational purposes only.

<p>A
<dfn title=concept-DOMError><var title>name</var> <code>DOMError</code></dfn>
means a <code>DOMError</code> object whose
<code title=dom-DOMError-name>name</code> attribute is initialized to
<var title>name</var> and whose <code title=dom-DOMError-message>message</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
<span title=concept-DOMError>"<code>SyntaxError</code>" <code>DOMError</code></span>.


<h3>Error names</h3>

<p>The <dfn>error names table</dfn> below lists all the allowed error names,
a description, and legacy <code title=dom-DOMException-code>code</code>
exception field values (when the error name is used for
<span title=concept-throw>throwing</span> 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>code</code> exception field value (if any)
 <tbody>
 <tr>
  <td>"<dfn><code>IndexSizeError</code></dfn>"
  <td>The index is not in the allowed range.
  <td><dfn title=dom-DOMException-INDEX_SIZE_ERR><code>INDEX_SIZE_ERR</code></dfn> (1)
 <tr>
  <td>"<dfn><code>HierarchyRequestError</code></dfn>"
  <td>The operation would yield an incorrect <span title=concept-node-tree>node tree</span>.
  <td><dfn title=dom-DOMException-HIERARCHY_REQUEST_ERR><code>HIERARCHY_REQUEST_ERR</code></dfn> (3)
 <tr>
  <td>"<dfn><code>WrongDocumentError</code></dfn>"
  <td>The object is in the wrong <span title=concept-document>document</span>.
  <td><dfn title=dom-DOMException-WRONG_DOCUMENT_ERR><code>WRONG_DOCUMENT_ERR</code></dfn> (4)
 <tr>
  <td>"<dfn><code>InvalidCharacterError</code></dfn>"
  <td>The string contains invalid characters.
  <td><dfn title=dom-DOMException-INVALID_CHARACTER_ERR><code>INVALID_CHARACTER_ERR</code></dfn> (5)
 <tr>
  <td>"<dfn><code>NoModificationAllowedError</code></dfn>"
  <td>The object can not be modified.
  <td><dfn title=dom-DOMException-NO_MODIFICATION_ALLOWED_ERR><code>NO_MODIFICATION_ALLOWED_ERR</code></dfn> (7)
 <tr>
  <td>"<dfn><code>NotFoundError</code></dfn>"
  <td>The object can not be found here.
  <td><dfn title=dom-DOMException-NOT_FOUND_ERR><code>NOT_FOUND_ERR</code></dfn> (8)
 <tr>
  <td>"<dfn><code>NotSupportedError</code></dfn>"
  <td>The operation is not supported.
  <td><dfn title=dom-DOMException-NOT_SUPPORTED_ERR><code>NOT_SUPPORTED_ERR</code></dfn> (9)
 <tr>
  <td>"<dfn><code>InvalidStateError</code></dfn>"
  <td>The object is in an invalid state.
  <td><dfn title=dom-DOMException-INVALID_STATE_ERR><code>INVALID_STATE_ERR</code></dfn> (11)
 <tr>
  <td>"<dfn><code>SyntaxError</code></dfn>"
  <td>The string did not match the expected pattern.
  <td><dfn title=dom-DOMException-SYNTAX_ERR><code>SYNTAX_ERR</code></dfn> (12)
 <tr>
  <td>"<dfn><code>InvalidModificationError</code></dfn>"
  <td>The object can not be modified in this way.
  <td><dfn title=dom-DOMException-INVALID_MODIFICATION_ERR><code>INVALID_MODIFICATION_ERR</code></dfn> (13)
 <tr>
  <td>"<dfn><code>NamespaceError</code></dfn>"
  <td>The operation is not allowed by <cite>Namespaces in XML</cite>. <span data-anolis-ref>XMLNS</span>
  <td><dfn title=dom-DOMException-NAMESPACE_ERR><code>NAMESPACE_ERR</code></dfn> (14)
 <tr>
  <td>"<dfn><code>InvalidAccessError</code></dfn>"
  <td>The object does not support the operation or argument.
  <td><dfn title=dom-DOMException-INVALID_ACCESS_ERR><code>INVALID_ACCESS_ERR</code></dfn> (15)
 <tr>
  <!-- XHR -->
  <td>"<dfn><code>SecurityError</code></dfn>"
  <td>The operation is insecure.
  <td><dfn title=dom-DOMException-SECURITY_ERR><code>SECURITY_ERR</code></dfn> (18)
 <tr>
  <!-- XHR -->
  <td>"<dfn><code>NetworkError</code></dfn>"
  <td>A network error occurred.
  <td><dfn title=dom-DOMException-NETWORK_ERR><code>NETWORK_ERR</code></dfn> (19)
 <tr>
  <!-- XHR -->
  <td>"<dfn><code>AbortError</code></dfn>"
  <td>The operation was aborted.
  <td><dfn title=dom-DOMException-ABORT_ERR><code>ABORT_ERR</code></dfn> (20)
 <tr>
  <!-- Workers -->
  <td>"<dfn><code>URLMismatchError</code></dfn>"
  <td>The given URL does not match another URL.
  <td><dfn title=dom-DOMException-URL_MISMATCH_ERR><code>URL_MISMATCH_ERR</code></dfn> (21)
 <tr>
  <!-- HTML -->
  <td>"<dfn><code>QuotaExceededError</code></dfn>"
  <td>The quota has been exceeded.
  <td><dfn title=dom-DOMException-QUOTA_EXCEEDED_ERR><code>QUOTA_EXCEEDED_ERR</code></dfn> (22)
 <tr>
  <!-- XHR -->
  <td>"<dfn><code>TimeoutError</code></dfn>"
  <td>The operation timed out.
  <td><dfn title=dom-DOMException-TIMEOUT_ERR><code>TIMEOUT_ERR</code></dfn> (23)
 <tr>
  <td>"<dfn><code>InvalidNodeTypeError</code></dfn>"
  <td>The supplied node is incorrect or has an incorrect ancestor for this operation.
  <td><dfn title=dom-DOMException-INVALID_NODE_TYPE_ERR><code>INVALID_NODE_TYPE_ERR</code></dfn> (24)
 <tr>
  <!-- HTML -->
  <td>"<dfn><code>DataCloneError</code></dfn>"
  <td>The object can not be cloned.
  <td><dfn title=dom-DOMException-DATA_CLONE_ERR><code>DATA_CLONE_ERR</code></dfn> (25)
 <tr>
  <td>"<dfn><code>EncodingError</code></dfn>"
  <td>The encoding operation (either encoded or decoding) failed.
  <td>&mdash;
 <tr>
  <!-- FileAPI -->
  <td>"<dfn><code>NotReadableError</code></dfn>"
  <td>The <code>File</code> or <code>Blob</code> could not be read.
  <td>&mdash;
</table>


<h2>Events</h2>

<h3>Introduction to "DOM Events"</h3>

<p>Throughout the web platform <span title=concept-event>events</span> are
<span title=concept-event-dispatch>dispatched</span> to objects to signal an
occurrence, such as network activity or user interaction. These objects
implement the <code>EventTarget</code> interface and can therefore add
<span title=concept-event-listener>event listeners</span> to observe
<span title=concept-event>events</span>:

<pre><code>obj.addEventListener("load", imgFetched)

function imgFetched(ev) {
  // great success
  &hellip;
}</code></pre>

<p><span title=concept-event-listener>Event listeners</span> can be removed
by utilizing the
<code title=dom-EventTarget-removeEventListener>removeEventListener()</code>
method, passing the same arguments.

<p><span title=concept-event>Events</span> are objects too and implement the
<code>Event</code> interface (or a derived interface). In the example above
<var title>ev</var> is the <span title=concept-event>event</span>. It is
passed as argument to
<span title=concept-event-listener>event listener</span>'s <b>callback</b>
(typically a JavaScript Function as shown above).
<span title=concept-event-listener>Event listeners</span> key off the
<span title=concept-event>event</span>'s
<code title=dom-Event-type>type</code> attribute value
("<code title>load</code>" in the above example). The
<span title=concept-event>event</span>'s
<code title=dom-Event-target>target</code> attribute value returns the
object to which the <span title=concept-event>event</span> was
<span title=concept-event-dispatch>dispatched</span> (<var title>obj</var>
above).

<p>Now while typically <span title=concept-event>events</span> are
<span title=concept-event-dispatch>dispatched</span> by the user agent as
the result of user interaction or the completion of some task, applications
can <span title=concept-event-dispatch>dispatch</span>
<span title=concept-event>events</span> 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, <span title=concept-event>events</span> are
sometimes also used to let an application control what happens next in an
operation. For instance as part of form submission an
<span title=concept-event>event</span> whose
<code title=dom-Event-type>type</code> attribute value is
"<code title>submit</code>" is
<span title=concept-event-dispatch>dispatched</span>. If this
<span title=concept-event>event</span>'s
<code title=dom-Event-preventDefault>preventDefault()</code> method is
invoked, form submission will be terminated. Applications who wish to make
use of this functionality through <span title=concept-event>events</span>
<span title=concept-event-dispatch>dispatched</span> by the application
(synthetic events) can make use of the return value of the
<code title=dom-EventTarget-dispatchEvent>dispatchEvent()</code> method:

<pre><code>if(obj.dispatchEvent(event)) {
  // event was not canceled, time for some magic
  &hellip;
}</code></pre>

<p>When an <span title=concept-event>event</span> is
<span title=concept-event-dispatch>dispatched</span> to an object that
<span title=concept-tree-participate>participates</span> in a
<span title=concept-tree>tree</span> (e.g. an
<span title=concept-element>element</span>), it can reach
<span title=concept-event-listener>event listeners</span> on that object's
<span title=concept-tree-ancestor>ancestors</span> too. First all object's
<span title=concept-tree-ancestor>ancestor</span>
<span title=concept-event-listener>event listeners</span> whose
<b>capture</b> variable is set to true are invoked, in
<span title=concept-tree-order>tree order</span>. Second, object's own
<span title=concept-event-listener>event listeners</span> are invoked. And
finally, and only if <span title=concept-event>event</span>'s
<span title=dom-Event-bubbles>bubbles</span> attribute value is true,
object's  <span title=concept-tree-ancestor>ancestor</span>
<span title=concept-event-listener>event listeners</span> are invoked again,
but now in reverse <span title=concept-tree-order>tree order</span>.

<p>Lets look at an example on how <span title=concept-event>events</span>
work in a <span title=concept-tree>tree</span>:

<pre><code>&lt;!doctype html>
&lt;html>
 &lt;head>
  &lt;title>Boring example&lt;/title>
 &lt;/head>
 &lt;body>
  &lt;p>Hello &lt;span id=x>world&lt;/span>!&lt;/p>
  &lt;script>
   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>
 &lt;/body>
&lt;/html></code></pre>

<p>The <code title>debug</code> function will be invoked twice. Each time
the <span title=concept-event>events</span>'s
<code title=dom-Event-target>target</code> attribute value will be the
<code title>span</code> <span title=concept-element>element</span>. The
first time <code title=dom-Event-target>currentTarget</code> attribute's
value will be the <span title=concept-document>document</span>, the second
time the <code title>body</code> <span title=concept-element>element</span>.
<code title=dom-Event-eventPhase>eventPhase</code> attribute's value
switches from <code title=dom-Event-CAPTURING_PHASE>CAPTURING_PHASE</code>
to <code title=dom-Event-BUBBLING_PHASE>BUBBLING_PHASE</code>. If an
<span title=concept-event-listener>event listener</span> was registered for
the <code title>span</code> <span title=concept-element>element</span>,
<code title=dom-Event-eventPhase>eventPhase</code> attribute's value
would have been <code title=dom-Event-AT_TARGET>AT_TARGET</code>.


<h3>Interface <code>Event</code></h3>

<pre class="idl">[<span title=concept-event-constructor>Constructor</span>(DOMString <var title>type</var>, optional <span>EventInit</span> <var title>eventInitDict</var>),
 Exposed=Window,Worker]
interface <dfn>Event</dfn> {
  readonly attribute DOMString <span title=dom-Event-type>type</span>;
  readonly attribute <span>EventTarget</span>? <span title=dom-Event-target>target</span>;
  readonly attribute <span>EventTarget</span>? <span title=dom-Event-currentTarget>currentTarget</span>;

  const unsigned short <span title=dom-Event-NONE>NONE</span> = 0;
  const unsigned short <span title=dom-Event-CAPTURING_PHASE>CAPTURING_PHASE</span> = 1;
  const unsigned short <span title=dom-Event-AT_TARGET>AT_TARGET</span> = 2;
  const unsigned short <span title=dom-Event-BUBBLING_PHASE>BUBBLING_PHASE</span> = 3;
  readonly attribute unsigned short <span title=dom-Event-eventPhase>eventPhase</span>;

  void <span title=dom-Event-stopPropagation>stopPropagation</span>();
  void <span title=dom-Event-stopImmediatePropagation>stopImmediatePropagation</span>();

  readonly attribute boolean <span title=dom-Event-bubbles>bubbles</span>;
  readonly attribute boolean <span title=dom-Event-cancelable>cancelable</span>;
  void <span title=dom-Event-preventDefault>preventDefault</span>();
  readonly attribute boolean <span title=dom-Event-defaultPrevented>defaultPrevented</span>;

  [Unforgeable] readonly attribute boolean <span title=dom-Event-isTrusted>isTrusted</span>;
  readonly attribute DOMTimeStamp <span title=dom-Event-timeStamp>timeStamp</span>;

  void <span title=dom-Event-initEvent>initEvent</span>(DOMString <var title>type</var>, boolean <var title>bubbles</var>, boolean <var title>cancelable</var>);
};

dictionary <dfn>EventInit</dfn> {
  boolean <span title=dom-EventInit-bubbles>bubbles</span> = false;
  boolean <span title=dom-EventInit-cancelable>cancelable</span> = false;
};</pre>

<p>An <dfn 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>Event</code> interface or an interface that
inherits from the <code>Event</code> interface.</p>

<dl class=domintro>
 <dt><code>var <var title>event</var> = new <span title=concept-event-constructor>Event</span>(<var title>type</var> [, <var title>eventInitDict</var>])</code>
 <dd><p>Returns a new <var title>event</var> whose
 <code title=dom-Event-type>type</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>bubbles</code> and
 <code title=dom-Event-cancelable>cancelable</code> attributes via object
 members of the same name.

 <dt><code><var title>event</var> . <span title=dom-Event-type>type</span></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> . <span title=dom-Event-target>target</span></code>
 <dd><p>Returns the object <var title>event</var> is
 <span title=concept-event-dispatch>dispatched</span> to.

 <dt><code><var title>event</var> . <span title=dom-Event-currentTarget>currentTarget</span></code>
 <dd><p>Returns the object whose
 <span title=concept-event-listener>event listener</span>'s <b>callback</b>
 is invoked.

 <dt><code><var title>event</var> . <span title=dom-Event-eventPhase>eventPhase</span></code>
 <dd><p>Returns the <span title=concept-event>event</span>'s phase, which is
 one of <code title=dom-Event-NONE>NONE</code>,
 <code title=dom-Event-CAPTURING_PHASE>CAPTURING_PHASE</code>,
 <code title=dom-Event-AT_TARGET>AT_TARGET</code>, and
 <code title=dom-Event-BUBBLING_PHASE>BUBBLING_PHASE</code>.

 <dt><code><var title>event</var> . <span title=dom-Event-stopPropagation>stopPropagation</span>()</code>
 <dd><p>When <span title=concept-event-dispatch>dispatched</span> in a
 <span title=concept-tree>tree</span>, invoking this method prevents
 <var title>event</var> from reaching any other objects than the current.

 <dt><code><var title>event</var> . <span title=dom-Event-stopImmediatePropagation>stopImmediatePropagation</span>()</code>
 <dd><p>Invoking this method prevents <var title>event</var> from reaching
 any <span title=concept-event-listener>event listeners</span> registered
 after the current one and when
 <span title=concept-event-dispatch>dispatched</span> in a
 <span title=concept-tree>tree</span> also prevents
 <var title>event</var> from reaching any other objects.

 <dt><code><var title>event</var> . <span title=dom-Event-bubbles>bubbles</span></code>
 <dd><p>Returns true if <var title>event</var>'s goes through its <code title=dom-Event-target>target</code> attribute value's <span title=concept-tree-ancestor>ancestors</span> in reverse <span title=concept-tree-order>tree order</span>, and false otherwise.

 <dt><code><var title>event</var> . <span title=dom-Event-cancelable>cancelable</span></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
 <span title=concept-event-dispatch>dispatched</span>, can be canceled by
 invoking the <code title=dom-Event-preventDefault>preventDefault()</code>
 method.

 <dt><code><var title>event</var> . <span title=dom-Event-preventDefault>preventDefault</span>()</code>
 <dd><p>If invoked when the
 <code title=dom-Event-cancelable>cancelable</code> attribute value is true,
 signals to the operation that caused <var title>event</var> to be
 <span title=concept-event-dispatch>dispatched</span> that it needs to be
 canceled.

 <dt><code><var title>event</var> . <span title=dom-Event-defaultPrevented>defaultPrevented</span></code>
 <dd><p>Returns true if
 <code title=dom-Event-preventDefault>preventDefault()</code> was invoked
 while the <code title=dom-Event-cancelable>cancelable</code> attribute
 value is true, and false otherwise.

 <dt><code><var title>event</var> . <span title=dom-Event-isTrusted>isTrusted</span></code>
 <dd><p>Returns true if <var title>event</var> was
 <span title=concept-event-dispatch>dispatched</span> by the user agent, and
 false otherwise.

 <dt><code><var title>event</var> . <span title=dom-Event-timeStamp>timeStamp</span></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 title=dom-Event-type><code>type</code></dfn> attribute must
return the value it was initialized to. When an
<span title=concept-event>event</span> is created the attribute must be
initialized to the empty string.

<p>The <dfn title=dom-Event-target><code>target</code></dfn> and
<dfn title=dom-Event-currentTarget><code>currentTarget</code></dfn>
attributes must return the values they were initialized to. When an
<span title=concept-event>event</span> is created the attributes must be
initialized to null.

<p>The <dfn 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 title=dom-Event-NONE><code>NONE</code></dfn> (numeric value 0)
 <dd><p><span title=concept-event>Events</span> not currently
 <span title=concept-event-dispatch>dispatched</span> are in this phase.
 <dt><dfn title=dom-Event-CAPTURING_PHASE><code>CAPTURING_PHASE</code></dfn> (numeric value 1)</dt>
 <dd><p>When an <span title=concept-event>event</span> is
 <span title=concept-event-dispatch>dispatched</span> to an object that
 <span title=concept-tree-participate>participates</span> in a
 <span title=concept-tree>tree</span> it will be in this phase before it
 reaches its <code title=dom-Event-target>target</code> attribute value.
 <dt><dfn title=dom-Event-AT_TARGET><code>AT_TARGET</code></dfn> (numeric value 2)
 <dd><p>When an <span title=concept-event>event</span> is
 <span title=concept-event-dispatch>dispatched</span> it will be in this
 phase on its <code title=dom-Event-target>target</code> attribute value.
 <dt><dfn title=dom-Event-BUBBLING_PHASE><code>BUBBLING_PHASE</code></dfn> (numeric value 3)
 <dd><p>When an <span title=concept-event>event</span> is
 <span title=concept-event-dispatch>dispatched</span> to an object that
 <span title=concept-tree-participate>participates</span> in a
 <span title=concept-tree>tree</span> it will be in this phase after it
 reaches its <code title=dom-Event-target>target</code> attribute value.
</dl>
<p>Initially the attribute must be initialized to
<code title=dom-Event-NONE>NONE</code>.

<hr>

<p>Each <span title=concept-event>event</span> has the following associated
flags that are all initially unset:</p>
<ul>
 <li><dfn>stop propagation flag</dfn>
 <li><dfn>stop immediate propagation flag</dfn>
 <li><dfn>canceled flag</dfn>
 <li><dfn>initialized flag</dfn>
 <li><dfn>dispatch flag</dfn>
</ul>

<p>The
<dfn title=dom-Event-stopPropagation><code>stopPropagation()</code></dfn>
method must set the <span>stop propagation flag</span>.

<p>The
<dfn title=dom-Event-stopImmediatePropagation><code>stopImmediatePropagation()</code></dfn>
method must set both the <span>stop propagation flag</span> and
<span>stop immediate propagation flag</span>.

<p>The <dfn title=dom-Event-bubbles><code>bubbles</code></dfn> and
<dfn title=dom-Event-cancelable><code>cancelable</code></dfn> attributes
must return the values they were initialized to. When an
<span title=concept-event>event</span> is created, they must be initialized
to false. <span class=note>The <code>EventInit</code> dictionary is not sufficient due to
the existence of the legacy
<code title=dom-Document-createEvent>createEvent()</code>.</span>

<p>The
<dfn title=dom-Event-preventDefault><code>preventDefault()</code></dfn>
method must set the <span>canceled flag</span> if the
<code title=dom-Event-cancelable>cancelable</code> attribute value is true.

<p>The
<dfn title=dom-Event-defaultPrevented><code>defaultPrevented</code></dfn>
attribute must return true if the <span>canceled flag</span> is set and
false otherwise.

<hr>

<p>The <dfn title=dom-Event-isTrusted><code>isTrusted</code></dfn> attribute
must return the value it was initialized to. When an
<span title=concept-event>event</span> is created the attribute must be
initialized to false.

<p>The <dfn title=dom-Event-timeStamp><code>timeStamp</code></dfn> attribute
must return the value it was initialized to. When an
<span title=concept-event>event</span> is created the attribute must be
initialized to the number of milliseconds that have passed since
00:00:00 UTC on 1 January 1970, ignoring leap seconds.
<!-- leap seconds are ignored by JavaScript too -->

<hr>

<p>To <dfn 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 <span>initialized flag</span>.
 <li><p>If the <span>dispatch flag</span> is set, terminate these steps.
 <li><p>Unset the <span>stop propagation flag</span>,
 <span>stop immediate propagation flag</span>, and
 <span>canceled flag</span>.
 <li><p>Set the <code title=dom-Event-isTrusted>isTrusted</code> attribute
 to false.
 <li><p>Set the <code title=dom-Event-target>target</code> attribute to
 null.
 <li><p>Set the <code title=dom-Event-type>type</code> attribute to
 <var title>type</var>.
 <li><p>Set the <code title=dom-Event-bubbles>bubbles</code> attribute to
 <var title>bubbles</var>.
 <li><p>Set the <code title=dom-Event-cancelable>cancelable</code> attribute
 to <var title>cancelable</var>.
</ol>

<p>The
<dfn title=dom-Event-initEvent><code>initEvent(<var title>type</var>, <var title>bubbles</var>, <var title>cancelable</var>)</code></dfn>
method must <span title=concept-event-initialize>initialize</span> the
<span>context object</span> with <var title>type</var>,
<var title>bubbles</var>, and <var title>cancelable</var>.

<p class=note>As <span title=concept-event>events</span> have constructors
<code title=dom-Event-initEvent>initEvent()</code> is superfluous. However,
it has to be supported for legacy content.


<h3>Interface <code>CustomEvent</code></h3>

<pre class=idl>[<span title=concept-event-constructor>Constructor</span>(DOMString <var title>type</var>, optional <span>CustomEventInit</span> <var title>eventInitDict</var>),
 Exposed=Window,Worker]
interface <dfn>CustomEvent</dfn> : <span>Event</span> {
  readonly attribute any <span title=dom-CustomEvent-detail>detail</span>;

  void <span title=dom-CustomEvent-initCustomEvent>initCustomEvent</span>(DOMString <var title>type</var>, boolean <var title>bubbles</var>, boolean <var title>cancelable</var>, any <var title>detail</var>);
};

dictionary <dfn>CustomEventInit</dfn> : <span>EventInit</span> {
  any <span title=dom-CustomEventInit-detail>detail</span> = null;
};</pre>

<p><span title=concept-event>Events</span> using the
<code>CustomEvent</code> interface can be used to carry custom data.</p>

<dl class=domintro>
 <dt><code>var <var title>event</var> = new <span title=concept-event-constructor>CustomEvent</span>(<var title>type</var> [, <var title>eventInitDict</var>])</code>
 <dd><p>Works analogously to the constructor for <code>Event</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> . <span title=dom-CustomEvent-detail>detail</span></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 title=dom-CustomEvent-detail><code>detail</code></dfn> attribute
must return the value it was initialized to. When an
<span title=concept-event>event</span> is created the attribute must be
initialized to null. <span class=note>The <code>CustomEventInit</code> dictionary is not
sufficient due to the existence of the legacy
<code title=dom-Document-createEvent>createEvent()</code>.</span>

<p>The
<dfn 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 <span title=concept-event-initialize>initialize</span> the
<span>context object</span> with <var title>type</var>,
<var title>bubbles</var>, and <var title>cancelable</var>, and then set its
<code title=dom-CustomEvent-detail>detail</code> attribute to
<var title>detail</var>.


<h3>Constructing events</h3>

<p>When a <dfn title=concept-event-constructor>constructor</dfn> of the <code>Event</code>
interface, or of an interface that inherits from the <code>Event</code> interface, is
invoked, these steps must be run:

<ol>
 <li><p>Create an <span title=concept-event>event</span> that uses the
 interface the constructor was invoked upon.

 <li><p>Set its <span>initialized flag</span>.

 <li><p>Initialize the <code title=dom-Event-type>type</code> attribute to
 the <var title>type</var> argument.

 <li><p>If there is an <var title>eventInitDict</var> argument then for each
 <span data-anolis-spec=webidl>dictionary member</span> defined therein find
 the attribute on <span title=concept-event>event</span> whose
 <span data-anolis-spec=webidl>identifier</span> matches the key of
 the <span data-anolis-spec=webidl>dictionary member</span> and then
 set the attribute to the value of that
 <span data-anolis-spec=webidl>dictionary member</span>.

 <li><p>Return the <span title=concept-event>event</span>.
</ol>


<h3>Defining event interfaces</h3>

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

<p>The <code>CustomEvent</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>Event</code> interface that have such a method only have it
for historical reasons.


<h3>Interface <code>EventTarget</code></h3>

<pre class=idl>[Exposed=Window,Worker]
interface <dfn>EventTarget</dfn> {
  void <span title=dom-EventTarget-addEventListener>addEventListener</span>(DOMString <var title>type</var>, <span>EventListener</span>? <var title>callback</var>, optional boolean <var title>capture</var> = false);
  void <span title=dom-EventTarget-removeEventListener>removeEventListener</span>(DOMString <var title>type</var>, <span>EventListener</span>? <var title>callback</var>, optional boolean <var title>capture</var> = false);
  boolean <span title=dom-EventTarget-dispatchEvent>dispatchEvent</span>(<span>Event</span> <var title>event</var>);
};

callback interface <dfn>EventListener</dfn> {
  void <span title=dom-EventListener-handleEvent>handleEvent</span>(<span>Event</span> <var title>event</var>);
};</pre>

<p><code>EventTarget</code> is an object to which an
<span title=concept-event>event</span> is
<span title=concept-event-dispatch>dispatched</span> when something has
occurred. Each <code>EventTarget</code> has an associated list of
<span title=concept-event-listener>event listeners</span>.

<p>An <dfn title=concept-event-listener>event listener</dfn> associates a
callback with a specific <span title=concept-event>event</span>. Each
<span title=concept-event-listener>event listener</span> consists of a
<b>type</b> (of the <span title=concept-event>event</span>),
<b>callback</b>, and <b>capture</b> variable.

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

<dl class=domintro>
 <dt><code><var title>target</var> . <span title=dom-EventTarget-addEventListener>addEventListener</span>(<var title>type</var>, <var title>callback</var> [, <var title>capture</var> = false])</code>
 <dd>
  <p>Appends an <span title=concept-event-listener>event listener</span>
  for <span title=concept-event>events</span> whose
  <code title=dom-Event-type>type</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
  <span title=concept-event>event</span> is
  <span title=concept-event-dispatch>dispatched</span>. When set to true,
  the <var title>capture</var> argument prevents <b>callback</b> from being invoked when
  the <span title=concept-event>event</span>'s
  <code title=dom-Event-eventPhase>eventPhase</code> attribute value is
  <code title=dom-Event-BUBBLING_PHASE>BUBBLING_PHASE</code>. When false, <b>callback</b>
  will not be invoked when <span title=concept-event>event</span>'s
  <code title=dom-Event-eventPhase>eventPhase</code> attribute value is
  <code title=dom-Event-CAPTURING_PHASE>CAPTURING_PHASE</code>. Either way,
  <b>callback</b> will be invoked when <span title=concept-event>event</span>'s
  <code title=dom-Event-eventPhase>eventPhase</code> attribute value is
  <code title=dom-Event-AT_TARGET>AT_TARGET</code>.

  <p>The <span title=concept-event-listener>event listener</span> is
  appended to <var title>target</var>'s list of
  <span title=concept-event-listener>event listeners</span> and is not
  appended if it is a duplicate (the
  <span title=concept-event-listener>event listeners</span> in the list are
  unique).

 <dt><code><var title>target</var> . <span title=dom-EventTarget-removeEventListener>removeEventListener</span>(<var title>type</var>, <var title>callback</var> [, <var title>capture</var> = false])</code>
 <dd><p>Remove the <span title=concept-event-listener>event listener</span>
 in <var title>target</var>'s list of
 <span title=concept-event-listener>event listeners</span> with the same
 <var title>type</var>, <var title>callback</var>, and
 <var title>capture</var>.

 <dt><code><var title>target</var> . <span title=dom-EventTarget-dispatchEvent>dispatchEvent</span>(<var title>event</var>)</code>
 <dd><p><span title=concept-event-dispatch>Dispatches</span> 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>cancelable</code> attribute value is false
 or it's <code title=dom-Event-preventDefault>preventDefault()</code> method
 was not invoked, and false otherwise.
</dl>

<p>The
<dfn 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 <span title=concept-event-listener>event listener</span>
 to the associated list of
 <span title=concept-event-listener>event listeners</span> 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 <span title=concept-event-listener>event listener</span> in
 that list with the same <b>type</b>, <b>callback</b>, and <b>capture</b>.
</ol>

<p>The
<dfn 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 <span title=concept-event-listener>event listener</span>
 from the associated list of
 <span title=concept-event-listener>event listeners</span>, 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 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 <span>dispatch flag</span> is set, or if
 its <span>initialized flag</span> is not set,
 <span title=concept-throw>throw</span> an
 "<code>InvalidStateError</code>" exception.
 <li><p>Initialize <var title>event</var>'s
 <code title=dom-Event-isTrusted>isTrusted</code> attribute to false.
 <li><p><span title=concept-event-dispatch>Dispatch</span> the
 <var title>event</var> and return the value that returns.
</ol>


<h3>Dispatching events</h3>

<p>To <dfn title=concept-event-dispatch>dispatch</dfn> an
<span title=concept-event>event</span> to a given object, optionally with
a <var title>target override</var>, run these steps:

<ol>
 <li><p>Let <var title>event</var> be the
 <span title=concept-event>event</span> that is dispatched.

 <li><p>Set <var title>event</var>'s <span>dispatch flag</span>.

 <li><p>Initialize <var title>event</var>'s
 <code title=dom-Event-target>target</code> attribute to
 <var title>target override</var>, if it is given, or the object to which
 <var title>event</var> is dispatched otherwise.

 <li><p>If <var title>event</var>'s
 <code title=dom-Event-target>target</code> attribute value is
 <span title=concept-tree-participate>participating</span> in a
 <span title=concept-tree>tree</span>, let <var title>event path</var> be a
 static ordered list of all its
 <span title=concept-tree-ancestor>ancestors</span> in
 <span title=concept-tree-order>tree order</span>, 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>eventPhase</code> attribute to
 <code title=dom-Event-CAPTURING_PHASE>CAPTURING_PHASE</code>.

 <li><p>For each object in <var title>event path</var>,
 <span title=concept-event-listener-invoke>invoke</span> its
 <span title=concept-event-listener>event listeners</span> with event
 <var title>event</var>, as long as <var title>event</var>'s
 <span>stop propagation flag</span> is unset.

 <li><p>Initialize <var title>event</var>'s
 <code title=dom-Event-eventPhase>eventPhase</code> attribute to
 <code title=dom-Event-AT_TARGET>AT_TARGET</code>.

 <li><p><span title=concept-event-listener-invoke>Invoke</span> the
 <span title=concept-event-listener>event listeners</span> of
 <var title>event</var>'s <code title=dom-Event-target>target</code>
 attribute value with <var title>event</var>, if <var title>event</var>'s
 <span>stop propagation flag</span> is unset.

 <li>
  <p>If <var title>event</var>'s
  <code title=dom-Event-bubbles>bubbles</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>eventPhase</code> attribute to
   <code title=dom-Event-BUBBLING_PHASE>BUBBLING_PHASE</code>.

   <li><p>For each object in <var title>event path</var>,
   <span title=concept-event-listener-invoke>invoke</span> its
   <span title=concept-event-listener>event listeners</span>, with event
   <var title>event</var> as long as <var title>event</var>'s
   <span>stop propagation flag</span> is unset.
  </ol>

 <li><p>Unset <var title>event</var>'s <span>dispatch flag</span>.

 <li><p>Initialize <var title>event</var>'s
 <code title=dom-Event-eventPhase>eventPhase</code> attribute to
 <code title=dom-Event-NONE>NONE</code>.

 <li><p>Initialize <var title>event</var>'s
 <code title=dom-Event-currentTarget>currentTarget</code> attribute to null.

 <li><p>Return false if <var title>event</var>'s <span>canceled flag</span>
 is set, and true otherwise.
</ol>


<p>To <dfn title=concept-event-listener-invoke>invoke</dfn> the
<span title=concept-event-listener>event listeners</span> for an object with an
event run these steps:</p>
<ol>
 <li><p>Let <var title>event</var> be the
 <span title=concept-event>event</span> for which the
 <span title=concept-event-listener>event listeners</span> are invoked.
 <li><p>Let <var title>listeners</var> be a copy of the
 <span title=concept-event-listener>event listeners</span> associated with
 the object for which these steps are run.
 <li><p>Initialize <var title>event</var>'s
 <code title=dom-Event-currentTarget>currentTarget</code> attribute to the
 object for which these steps are run.
 <li>
  <p>Then run these substeps for each
  <span title=concept-event-listener>event listener</span> in
  <var title>listeners</var>:</p>
  <ol>
   <li><p>If <var title>event</var>'s
   <span>stop immediate propagation flag</span> is set, terminate the
   <span title=concept-event-listener-invoke>invoke</span> algorithm.
   <li><p>Let <var title>listener</var> be the
   <span title=concept-event-listener>event listener</span>.
   <li><p>If <var title>event</var>'s <code title=dom-Event-type>type</code>
   attribute value is not <var title>listener</var>'s <b>type</b>, terminate
   these substeps (and run them for the next
   <span title=concept-event-listener>event listener</span>).
   <li><p>If <var title>event</var>'s
   <code title=dom-Event-eventPhase>eventPhase</code> attribute value is
   <code title=dom-Event-CAPTURING_PHASE>CAPTURING_PHASE</code> and
   <var title>listener</var>'s <b>capture</b> is false, terminate these
   substeps (and run them for the next
   <span title=concept-event-listener>event listener</span>).
   <li><p>If <var title>event</var>'s
   <code title=dom-Event-eventPhase>eventPhase</code> attribute value is
   <code title=dom-Event-BUBBLING_PHASE>BUBBLING_PHASE</code> and
   <var title>listener</var>'s <b>capture</b> is true, terminate these
   substeps (and run them for the next
   <span title=concept-event-listener>event listener</span>).
   <li><p>Call <var title>listener</var>'s <b>callback</b>'s
   <code title=dom-EventListener-handleEvent>handleEvent</code>, with the event passed to
   this algorithm as the first argument and <var title>event</var>'s
   <code title=dom-Event-currentTarget>currentTarget</code> attribute value as
   <span data-anolis-spec=webidl>callback this value</span>.
  </ol>
 </li>
</ol>


<h3>Firing events</h3>

<p>To
<dfn title=concept-event-fire>fire an event named <var title>e</var></dfn>
means that a new <span title=concept-event>event</span> using the
<code>Event</code> interface, with its
<code title=dom-Event-type>type</code> attribute initialized to
<var title>e</var>, and its <code title=dom-Event-isTrusted>isTrusted</code>
attribute initialized to true, is to be
<span title=concept-event-dispatch>dispatched</span> to the given object.

<p class=note>Fire in the context of DOM is short for creating, initializing, and
<span title=concept-event-dispatch>dispatching</span> an
<span title=concept-event>event</span>.
<span title=concept-event-fire>Fire an event</span> makes that process easier to write
down. If the <span title=concept-event>event</span> needs its <code>bubbles</code> or
<code>cancelable</code> attribute initialized, one could write
"<span title=concept-event-fire>fire an event</span> named
<code title>submit</code> with its <code>cancelable</code> attribute
initialized to true".


<h2>Nodes</h2>

<h3>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
<span title=concept-node-tree>node tree</span>. Some of the
<span title=concept-node>nodes</span> in the
<span title=concept-tree>tree</span> can have
<span title=concept-tree-child>children</span>, while others are leaves.

<p>To illustrate, consider this HTML document:

<pre><code>&lt;!DOCTYPE html>
&lt;html class=e>
 &lt;head>&lt;title>Aliens?&lt;/title>&lt;/head>
 &lt;body>Why yes.&lt;/body>
&lt;/html></code></pre>

<p>It is represented as follows:

<ul class="domTree">
 <li>
  <span title=concept-document>Document</span>
  <ul>
   <li class="t10"><span title=concept-doctype>Doctype</span>: <code>html</code></li>
   <li class="t1"><span title=concept-element>Element</span>: <code>html</code> <span class="t2" title><code class="attribute name">class</code>="<code class="attribute value">e</code>"</span>
    <ul>
     <li class="t1">
      <span title=concept-element>Element</span>: <code>head</code>
      <ul>
       <li class="t1">
        <span title=concept-element>Element</span>: <code>title</code>
        <ul>
         <li class="t3"><code>Text</code>: <span title>Aliens?</span></li>
        </ul>
       </li>
      </ul>
     </li>
     <li class="t3"><code>Text</code>: <span title>⏎␣</span></li>
     <li class="t1">
      <span title=concept-element>Element</span>: <code title>body</code>
      <ul>
       <li class="t3"><code>Text</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
<span title="HTML parser" data-anolis-spec=html>HTML parsing</span>, not all
<span data-anolis-spec=encoding>ASCII whitespace</span> were turned into
<code>Text</code> <span title=concept-node>nodes</span>, but the general
concept is clear. Markup goes in, a <span title=concept-tree>tree</span> of
<span title=concept-node>nodes</span> 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.


<h3>Node tree</h3>

<p>Objects implementing the <code>Document</code>,
<code>DocumentFragment</code>, <code>DocumentType</code>,
<code>Element</code>, <code>Text</code>, <code>ProcessingInstruction</code>,
or <code>Comment</code> interface (simply called
<dfn title=concept-node>nodes</dfn>)
<span title=concept-tree-participate>participate</span> in a
<span title=concept-tree>tree</span>, simply named the
<dfn title=concept-node-tree>node tree</dfn>.

<p>A <span title=concept-node-tree>node tree</span> is constrained as
follows, expressed as a relationship between the type of
<span title=concept-node>node</span> and its allowed
<span title=concept-tree-child>children</span>:
<dl>
 <dt><code>Document</code>
 <dd>
  <p>In <span title=concept-tree-order>tree order</span>:
  <ol>
   <li><p>Zero or more nodes each of which is either
   <code>ProcessingInstruction</code> or <code>Comment</code>.
   <li><p>Optionally one <code>DocumentType</code> node.
   <li><p>Zero or more nodes each of which is either
   <code>ProcessingInstruction</code> or <code>Comment</code>.
   <li><p>Optionally one <code>Element</code> node.
   <li><p>Zero or more nodes each of which is either
   <code>ProcessingInstruction</code> or <code>Comment</code>.
  </ol>
 <dt><code>DocumentFragment</code>
 <dt><code>Element</code>
 <dd><p>Zero or more nodes each of which is one of <code>Element</code>,
 <code>ProcessingInstruction</code>, <code>Comment</code>, or
 <code>Text</code>.
 <dt><code>DocumentType</code>
 <dt><code>Text</code>
 <dt><code>ProcessingInstruction</code>
 <dt><code>Comment</code>
 <dd><p>None.
</dl>
<!--AttrExodus -->

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

 <dt><code>Text</code>
 <dt><code>ProcessingInstruction</code>
 <dt><code>Comment</code>
 <dd><p>Its <code title=dom-CharacterData-length>length</code> attribute
 value.

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

<p>A <span title=concept-node>node</span> is considered
<dfn title=concept-node-empty>empty</dfn> if its
<span title=concept-node-length>length</span> is zero.


<h4>Mutation algorithms</h4>

<p>At certain points in the algorithms below it is said that a
<dfn>node is inserted</dfn> or a <dfn>node is removed</dfn>. These are
hooks for <span>other applicable specifications</span> to process the
<span title=concept-node>nodes</span> that have been inserted or removed
further and ensures that when multiple <span title=concept-node>nodes</span>
are inserted or removed this happens atomically.

<p>To <dfn 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>Document</code>,
 <code>DocumentFragment</code>, or <code>Element</code>
 <span title=concept-node>node</span>,
 <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li><p>If <var title>node</var> is a
 <span title=concept-tree-host-including-inclusive-ancestor>host-including inclusive ancestor</span>
 of <var title>parent</var>, <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li><p>If <var title>child</var> is not null and its
 <span title=concept-tree-parent>parent</span> is not
 <var title>parent</var>, <span title=concept-throw>throw</span> a
 "<code>NotFoundError</code>" exception.

 <li><p>If <var title>node</var> is not a
 <code>DocumentFragment</code>, <code>DocumentType</code>,
 <code>Element</code>, <code>Text</code>,
 <code>ProcessingInstruction</code>, or <code>Comment</code>
 <span title=concept-node>node</span>,
 <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li><p>If either <var title>node</var> is a <code>Text</code>
 <span title=concept-node>node</span> and <var title>parent</var> is a
 <span title=concept-document>document</span>, or <var title>node</var> is a
 <span title=concept-doctype>doctype</span> and <var title>parent</var> is
 not a <span title=concept-document>document</span>,
 <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li>
  <p>If <var title>parent</var> is a
  <span title=concept-document>document</span>, and any of the statements below, switched
  on <var title>node</var>, are true, <span title=concept-throw>throw</span> a
  "<code>HierarchyRequestError</code>".

  <dl class=switch>
   <dt><code>DocumentFragment</code> <span title=concept-node>node</span>
   <dd>
    <p>If <var title>node</var> has more than one
    <span title=concept-element>element</span> <span title=concept-tree-child>child</span>
    or has a <code>Text</code> <span title=concept-node>node</span>
    <span title=concept-tree-child>child</span>.

    <p>Otherwise, if <var title>node</var> has one
    <span title=concept-element>element</span>
    <span title=concept-tree-child>child</span>, and <var title>parent</var> has an
    <span title=concept-element>element</span>
    <span title=concept-tree-child>child</span>, <var title>child</var> is a
    <span title=concept-doctype>doctype</span>, or <var title>child</var> is not null and
    a <span title=concept-doctype>doctype</span> is
    <span title=concept-tree-following>following</span> <var title>child</var>.
    <!--"inclusively following"-->

   <dt><span title=concept-element>element</span>
   <dd><p><var title>parent</var> has an <span title=concept-element>element</span>
   <span title=concept-tree-child>child</span>, <var title>child</var> is a
   <span title=concept-doctype>doctype</span>, or <var title>child</var> is not null and a
   <span title=concept-doctype>doctype</span> is
   <span title=concept-tree-following>following</span> <var title>child</var>.
   <!--"inclusively following"-->

   <dt><span title=concept-doctype>doctype</span>
   <dd><p><var title>parent</var> has a <span title=concept-doctype>doctype</span>
   <span title=concept-tree-child>child</span>, an
   <span title=concept-element>element</span> is
   <span title=concept-tree-preceding>preceding</span> <var title>child</var>, or
   <var title>child</var> is null and <var title>parent</var> has an
   <span title=concept-element>element</span> <span title=concept-tree-child>child</span>.
  </dl>

 <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
 <span title=concept-tree-next-sibling>next sibling</span>.

 <li><p><span title=concept-node-adopt>Adopt</span>
 <var title>node</var> into <var title>parent</var>'s
 <span title=concept-node-document>node document</span>.

 <li><p><span title=concept-node-insert>Insert</span> <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 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
 <span title=concept-tree-child>children</span> of <var title>node</var> if
 it is a <code>DocumentFragment</code> <span title=concept-node>node</span>,
 and one otherwise.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-start-node>start node</span> is
 <var title>parent</var> and
 <span title=concept-range-start-offset>start offset</span> is greater than
 <var title>child</var>'s <span title=concept-tree-index>index</span>,
 increase its <span title=concept-range-start-offset>start offset</span> by
 <var title>count</var>.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-end-node>end node</span> is
 <var title>parent</var> and
 <span title=concept-range-end-offset>end offset</span> is greater than
 <var title>child</var>'s <span title=concept-tree-index>index</span>,
 increase its <span title=concept-range-end-offset>end offset</span> by
 <var title>count</var>.

 <li><p>Let <var title>nodes</var> be <var title>node</var>'s
 <span title=concept-tree-child>children</span> if <var title>node</var> is
 a <code>DocumentFragment</code> <span title=concept-node>node</span>, and a
 list containing solely <var title>node</var> otherwise.

 <li>
  <p>If <var title>node</var> is a <code>DocumentFragment</code>
  <span title=concept-node>node</span>, <span>queue a mutation record</span>
  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>DocumentFragment</code>
 <span title=concept-node>node</span>,
 <span title=concept-node-remove>remove</span> its
 <span title=concept-tree-child>children</span> with the
 <i title>suppress observers flag</i> set.

 <li><p>If <i title>suppress observers flag</i> is unset,
 <span>queue a mutation record</span> 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
 <span title=concept-tree-previous-sibling>previous sibling</span>
 or <var title>parent</var>'s
 <span title=concept-tree-last-child>last child</span> if
 <var title>child</var> is null.

 <li><p>Insert all <span title=concept-node>nodes</span> 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
 <span title=concept-node>node</span> in <var title>nodes</var>, in
 <span title=concept-tree-order>tree order</span> run
 <span>node is inserted</span>.
</ol>


<p>To <dfn title=concept-node-append>append</dfn> a <var title>node</var>
to a <var title>parent</var>,
<span title=concept-node-pre-insert>pre-insert</span> <var title>node</var>
into <var title>parent</var> before null.


<p>To <dfn 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>Document</code>,
 <code>DocumentFragment</code>, or <code>Element</code>
 <span title=concept-node>node</span>,
 <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li><p>If <var title>node</var> is a
 <span title=concept-tree-host-including-inclusive-ancestor>host-including inclusive ancestor</span>
 of <var title>parent</var>, <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li><p>If <var title>child</var>'s
 <span title=concept-tree-parent>parent</span> is not
 <var title>parent</var>, <span title=concept-throw>throw</span> a
 "<code>NotFoundError</code>" exception.

 <li><p>If <var title>node</var> is not a
 <code>DocumentFragment</code>, <code>DocumentType</code>,
 <code>Element</code>, <code>Text</code>,
 <code>ProcessingInstruction</code>, or <code>Comment</code>
 <span title=concept-node>node</span>,
 <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li><p>If either <var title>node</var> is a <code>Text</code>
 <span title=concept-node>node</span> and <var title>parent</var> is a
 <span title=concept-document>document</span>, or <var title>node</var> is a
 <span title=concept-doctype>doctype</span> and <var title>parent</var> is
 not a <span title=concept-document>document</span>,
 <span title=concept-throw>throw</span> a
 "<code>HierarchyRequestError</code>".

 <li>
  <p>If <var title>parent</var> is a
  <span title=concept-document>document</span>, and any of the statements below, switched
  on <var title>node</var>, are true, <span title=concept-throw>throw</span> a
  "<code>HierarchyRequestError</code>".

  <dl class=switch>
   <dt><code>DocumentFragment</code> <span title=concept-node>node</span>
   <dd>
    <p>If <var title>node</var> has more than one
    <span title=concept-element>element</span> <span title=concept-tree-child>child</span>
    or has a <code>Text</code> <span title=concept-node>node</span>
    <span title=concept-tree-child>child</span>.

    <p>Otherwise, if <var title>node</var> has one
    <span title=concept-element>element</span> <span title=concept-tree-child>child</span>
    and either <var title>parent</var> has an <span title=concept-element>element</span>
    <span title=concept-tree-child>child</span> that is not <var title>child</var> or a
    <span title=concept-doctype>doctype</span> is
    <span title=concept-tree-following>following</span> <var title>child</var>.

   <dt><span title=concept-element>element</span>
   <dd><p><var title>parent</var> has an <span title=concept-element>element</span>
   <span title=concept-tree-child>child</span> that is not <var title>child</var> or a
   <span title=concept-doctype>doctype</span> is
   <span title=concept-tree-following>following</span> <var title>child</var>.

   <dt><span title=concept-doctype>doctype</span>
   <dd><var title>parent</var> has a <span title=concept-doctype>doctype</span>
   <span title=concept-tree-child>child</span> that is not <var title>child</var>, or an
   <span title=concept-element>element</span> is
   <span title=concept-tree-preceding>preceding</span> <var title>child</var>.
  </dl>

  <p class=note>The above statements differ from the
  <span title=concept-node-pre-insert>pre-insert</span> algorithm.

 <li><p>Let <var title>reference child</var> be <var title>child</var>'s
 <span title=concept-tree-next-sibling>next sibling</span>.

 <li><p>If <var title>reference child</var> is <var title>node</var>, set it
 to <var title>node</var>'s
 <span title=concept-tree-next-sibling>next sibling</span>.

 <li><p><span title=concept-node-adopt>Adopt</span>
 <var title>node</var> into <var title>parent</var>'s
 <span title=concept-node-document>node document</span>.

 <li><p><span title=concept-node-remove>Remove</span> <var title>child</var>
 from its <var title>parent</var> with the
 <i title>suppress observers flag</i> set.

 <li><p><span title=concept-node-insert>Insert</span> <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
 <span title=concept-tree-child>children</span> if <var title>node</var> is
 a <code>DocumentFragment</code> <span title=concept-node>node</span>, and a
 list containing solely <var title>node</var> otherwise.

 <li><p><span>Queue a mutation record</span> 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
 <span title=concept-tree-previous-sibling>previous sibling</span>.

 <li><p>Run <span>node is removed</span> for <var title>child</var>, and
 then for each <span title=concept-node>node</span> in
 <var title>nodes</var>, in
 <span title=concept-tree-order>tree order</span>, run
 <span>node is inserted</span>.

 <li><p>Return <var title>child</var>.
</ol>


<p>To <dfn 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,
 <span title=concept-node-adopt>adopt</span> <var title>node</var> into
 <var title>parent</var>'s
 <span title=concept-node-document>node document</span>.

 <li><p>Let <var title>removedNodes</var> be <var title>parent</var>'s
 <span title=concept-tree-child>children</span>.

 <li><p>Let <var title>addedNodes</var> be the empty list if <var title>node</var> is
 null, <var title>node</var>'s <span title=concept-tree-child>children</span> if
 <var title>node</var> is a <code>DocumentFragment</code>
 <span title=concept-node>node</span>, and a list containing <var title>node</var>
 otherwise.

 <li><p><span title=concept-node-remove>Remove</span> all
 <var title>parent</var>'s <span title=concept-tree-child>children</span>,
 with the <i title>suppress observers flag</i> set.

 <li><p>If <var title>node</var> is not null,
 <span title=concept-node-insert>insert</span> <var title>node</var> into
 <var title>parent</var> before null with the <i title>suppress observers flag</i> set.

 <li><p><span>Queue a mutation record</span> of "<code>childList</code>" for
 <var title>parent</var> with addedNodes <var title>addedNodes</var> and
 removedNodes <var title>removedNodes</var>.

 <li><p>Run <span>node is removed</span> for each <span title=concept-node>node</span> in
 <var title>removedNodes</var>, in <span title=concept-tree-order>tree order</span>, and
 then run <span>node is inserted</span> for each <span title=concept-node>node</span> in
 <var title>addedNodes</var>, in <span title=concept-tree-order>tree order</span>.
</ol>

<p class=note>This algorithm does not make any checks with regards to the
<span title=concept-node-tree>node tree</span> constraints. Use it wisely.


<p>To <dfn 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
 <span title=concept-tree-parent>parent</span> is not
 <var title>parent</var>, <span title=concept-throw>throw</span> a
 "<code>NotFoundError</code>" exception.

 <li><p><span title=concept-node-remove>Remove</span> <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 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
 <span title=concept-tree-index>index</span>.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-start-node>start node</span> is a
 <span title=concept-tree-descendant>descendant</span> of
 <var title>node</var>, set its
 <span title=concept-range-start>start</span> to
 (<var title>parent</var>, <var title>index</var>).

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-end-node>end node</span> is a
 <span title=concept-tree-descendant>descendant</span> of
 <var title>node</var>, set its
 <span title=concept-range-end>end</span> to
 (<var title>parent</var>, <var title>index</var>).

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-start-node>start node</span> is
 <var title>parent</var> and
 <span title=concept-range-start-offset>start offset</span> is greater than
 <var title>index</var>, decrease its
 <span title=concept-range-start-offset>start offset</span> by one.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-end-node>end node</span> is
 <var title>parent</var> and
 <span title=concept-range-end-offset>end offset</span> is greater than
 <var title>index</var>, decrease its
 <span title=concept-range-end-offset>end offset</span> by one.

 <li><p>If <i title>suppress observers flag</i> is unset,
 <span>queue a mutation record</span> 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
 <span title=concept-tree-next-sibling>next sibling</span>,
 and previousSibling <var title>node</var>'s
 <span title=concept-tree-previous-sibling>previous sibling</span>.

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

 <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
 <span>node is removed</span> for <var title>node</var>.
</ol>


<h4>Interface <code>NonElementParentNode</code></h4>

<p class="note no-backref">The
<code title=dom-NonElementParentNode-getElementById>getElementById()</code> method is not
on <span title=concept-element>elements</span> for compatibility with older versions of
jQuery. If a time comes where that version of jQuery has disappeared, we might be able to
support it.

<pre class=idl>[NoInterfaceObject]
interface <dfn>NonElementParentNode</dfn> {
  <span>Element</span>? <span title=dom-NonElementParentNode-getElementById>getElementById</span>(DOMString <var title>elementId</var>);
};
<span>Document</span> implements <span>NonElementParentNode</span>;
<span>DocumentFragment</span> implements <span>NonElementParentNode</span>;</pre>

<dl class=domintro>
 <dt><code><var title>node</var> . <span title=dom-NonElementParentNode-getElementById>getElementById</span>(<var title>elementId</var>)</code>
 <dd><p>Returns the first <span title=concept-element>element</span> within
 <var title>node</var>'s <span title=concept-tree-descendant>descendants</span> whose
 <span title=concept-id>ID</span> is <var title>elementId</var>.
</dl>

<p>The
<dfn title=dom-NonElementParentNode-getElementById><code>getElementById(<var>elementId</var>)</code></dfn>
method must return the first <span title=concept-element>element</span>, in
<span title=concept-tree-order>tree order</span>, within <span>context object</span>'s
<span title=concept-tree-descendant>descendants</span>, whose
<span title=concept-id>ID</span> is <var title>elementId</var>, and null if there is no
such <span title=concept-element>element</span> otherwise.


<h4>Interface <code>ParentNode</code></h4>

<p>The <dfn>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>Text</code> <span title=concept-node>node</span> whose
 <span title=concept-CD-data>data</span> is the string value.

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

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

<pre class=idl>[NoInterfaceObject]
interface <dfn>ParentNode</dfn> {
  readonly attribute <span>HTMLCollection</span> <span title=dom-ParentNode-children>children</span>;
  readonly attribute <span>Element</span>? <span title=dom-ParentNode-firstElementChild>firstElementChild</span>;
  readonly attribute <span>Element</span>? <span title=dom-ParentNode-lastElementChild>lastElementChild</span>;
  readonly attribute unsigned long <span title=dom-ParentNode-childElementCount>childElementCount</span>;

  void <span title=dom-ParentNode-prepend>prepend</span>((<span>Node</span> or DOMString)... <var title>nodes</var>);
  void <span title=dom-ParentNode-append>append</span>((<span>Node</span> or DOMString)... <var title>nodes</var>);

  <span>Element</span>? <span title=dom-ParentNode-query>query</span>(DOMString <var title>relativeSelectors</var>);
  [NewObject] <span>Elements</span> <span title=dom-ParentNode-queryAll>queryAll</span>(DOMString <var title>relativeSelectors</var>);
  <span>Element</span>? <span title=dom-ParentNode-querySelector>querySelector</span>(DOMString <var title>selectors</var>);
  [NewObject] <span>NodeList</span> <span title=dom-ParentNode-querySelectorAll>querySelectorAll</span>(DOMString <var title>selectors</var>);
};
<span>Document</span> implements <span>ParentNode</span>;
<span>DocumentFragment</span> implements <span>ParentNode</span>;
<span>Element</span> implements <span>ParentNode</span>;</pre>

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

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

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

 <!-- childElementCount is redundant -->

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

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

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

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

 <dt><code><var title>node</var> . <span title=dom-ParentNode-query>query</span>(<var title>relativeSelectors</var>)</code>
 <dd>
  <p>Returns the first <span title=concept-element>element</span> that is a
  <span title=concept-tree-descendant>descendant</span> of <var title>node</var> that
  matches <var title>relativeSelectors</var>.

 <dt><code><var title>node</var> . <span title=dom-ParentNode-queryAll>queryAll</span>(<var title>relativeSelectors</var>)</code>
 <dd>
  <p>Returns all <span title=concept-element>element</span>
  <span title=concept-tree-descendant>descendants</span> of <var title>node</var> that
  match <var title>relativeSelectors</var>.

 <dt><code><var title>node</var> . <span title=dom-ParentNode-querySelector>querySelector</span>(<var title>selectors</var>)</code>
 <dd>
  <p>Returns the first <span title=concept-element>element</span> that is a
  <span title=concept-tree-descendant>descendant</span> of <var title>node</var> that
  matches <var title>selectors</var>.

 <dt><code><var title>node</var> . <span title=dom-ParentNode-querySelectorAll>querySelectorAll</span>(<var title>selectors</var>)</code>
 <dd>
  <p>Returns all <span title=concept-element>element</span>
  <span title=concept-tree-descendant>descendants</span> of <var title>node</var> that
  match <var title>selectors</var>.
</dl>

<p>The <dfn title=dom-ParentNode-children><code>children</code></dfn>
attribute must return an <code>HTMLCollection</code>
<span title=concept-collection>collection</span> rooted at the
<span>context object</span> matching only
<span title=concept-element>element</span>
<span title=concept-tree-child>children</span>.

<p>The
<dfn title=dom-ParentNode-firstElementChild><code>firstElementChild</code></dfn>
attribute must return the first <span title=concept-tree-child>child</span>
that is an <span title=concept-element>element</span>, and null otherwise.

<p>The
<dfn title=dom-ParentNode-lastElementChild><code>lastElementChild</code></dfn>
attribute must return the last <span title=concept-tree-child>child</span>
that is an <span title=concept-element>element</span>, and null otherwise.

<p>The
<dfn title=dom-ParentNode-childElementCount><code>childElementCount</code></dfn>
attribute must return the number of
<span title=concept-tree-child>children</span> of the
<span>context object</span> that are
<span title=concept-element>elements</span>.

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

<ol>
 <li>Run the <span>mutation method macro</span>.

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

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

<ol>
 <li>Run the <span>mutation method macro</span>.

 <li><p><span title=concept-node-append>Append</span>
 <var title>node</var> to the <span>context object</span>.
</ol>

<p>To <dfn>match a relative selectors string</dfn> <var title>relativeSelectors</var>
against a <var title>set</var>, run these steps:

<ol>
 <li><p>Let <var title>s</var> be the result of
 <span data-anolis-spec=selectors>parse a relative selector</span> from
 <var title>relativeSelectors</var> against
 <span data-anolis-spec=selectors>reference element set</span>
 <var title>set</var>. <span data-anolis-ref>SELECTORS</span>

 <li><p>If <var title>s</var> is failure, <span data-anolis-spec=webidl>throw</span> a
 JavaScript <code title>TypeError</code>.

 <li><p>Return the result of <span data-anolis-spec=selectors>match a selector</span>
 <var title>s</var> using <span data-anolis-spec=selectors>reference element set</span>
 <var title>set</var>. <span data-anolis-ref>SELECTORS</span>
</ol>

<p>The
<dfn title=dom-ParentNode-query><code>query(<var>relativeSelectors</var>)</code></dfn>
method must return the first result of running
<span>match a relative selectors string</span> <var title>relativeSelectors</var> against
a set consisting of <span>context object</span>, and null if the result is an empty list.

<p>The
<dfn title=dom-ParentNode-queryAll><code>queryAll(<var>relativeSelectors</var>)</code></dfn>
method must return an <code>Elements</code> array initialized with the result of running
<span>match a relative selectors string</span> <var title>relativeSelectors</var> against
a set consisting of <span>context object</span>.

<p>To <dfn>scope-match a selectors string</dfn> <var title>selectors</var> against a
<var title>node</var>, run these steps:

<ol>
 <li><p>Let <var title>s</var> be the result of
 <span data-anolis-spec=selectors>parse a selector</span> <var title>selectors</var>.
 <span data-anolis-ref>SELECTORS</span>

 <li><p>If <var title>s</var> is failure, <span data-anolis-spec=webidl>throw</span> a
 JavaScript <code title>TypeError</code>.

 <li><p>Return the result of <span data-anolis-spec=selectors>match a selector</span>
 <var title>s</var> against
 <var title>node</var>'s <span title=concept-tree-root>root</span> using
 <span data-anolis-spec=selectors>scoping root</span> <var title>node</var> and
 scoping method
 <span data-anolis-spec=selectors title="scope-filtered selectors">scope-filtered</span>.
 <span data-anolis-ref>SELECTORS</span>.
</ol>

<p>The
<dfn title=dom-ParentNode-querySelector><code>querySelector(<var>selectors</var>)</code></dfn>
method must return the first result of running <span>scope-match a selectors string</span>
<var title>selectors</var> against the <span>context object</span>, and null if the result
is an empty list otherwise.

<p>The
<dfn title=dom-ParentNode-querySelectorAll><code>querySelectorAll(<var>selectors</var>)</code></dfn>
method must return the <span title=concept-collection-static>static</span> result of
running <span>scope-match a selectors string</span> <var title>selectors</var> against the
<span>context object</span>.


<h4>Interface <code>NonDocumentTypeChildNode</code></h4>

<p class="note no-backref">The
<code title=dom-NonDocumentTypeChildNode-previousElementSibling>previousElementSibling</code>
and <code title=dom-NonDocumentTypeChildNode-nextElementSibling>nextElementSibling</code>
attributes have been removed from <code>DocumentType</code> nodes for compatibility
reasons. If these additions are deemed compatible enough in the future, they could be
reinstated.

<pre class=idl>[NoInterfaceObject]
interface <dfn>NonDocumentTypeChildNode</dfn> {
  readonly attribute <span>Element</span>? <span title=dom-NonDocumentTypeChildNode-previousElementSibling>previousElementSibling</span>;
  readonly attribute <span>Element</span>? <span title=dom-NonDocumentTypeChildNode-nextElementSibling>nextElementSibling</span>;
};
<span>Element</span> implements <span>NonDocumentTypeChildNode</span>;
<span>CharacterData</span> implements <span>NonDocumentTypeChildNode</span>;</pre>

<dl class=domintro>
 <dt><code><var title>element</var> = <var title>node</var> . <span title=dom-NonDocumentTypeChildNode-previousElementSibling>previousElementSibling</span></code>
 <dd><p>Returns the first
 <span title=concept-tree-preceding>preceding</span>
 <span title=concept-tree-sibling>sibling</span> that
 is an <span title=concept-element>element</span>, and null otherwise.

 <dt><code><var title>element</var> = <var title>node</var> . <span title=dom-NonDocumentTypeChildNode-nextElementSibling>nextElementSibling</span></code>
 <dd><p>Returns the first
 <span title=concept-tree-following>following</span>
 <span title=concept-tree-sibling>sibling</span> that
 is an <span title=concept-element>element</span>, and null otherwise.
</dl>

<p>The
<dfn title=dom-NonDocumentTypeChildNode-previousElementSibling><code>previousElementSibling</code></dfn>
attribute must return the first
<span title=concept-tree-preceding>preceding</span>
<span title=concept-tree-sibling>sibling</span> that is an
<span title=concept-element>element</span>, and null otherwise.

<p>The
<dfn title=dom-NonDocumentTypeChildNode-nextElementSibling><code>nextElementSibling</code></dfn>
attribute must return the first
<span title=concept-tree-following>following</span>
<span title=concept-tree-sibling>sibling</span> that is an
<span title=concept-element>element</span>, and null otherwise.


<h4>Interface <code>ChildNode</code></h4>

<pre class=idl>[NoInterfaceObject]
interface <dfn>ChildNode</dfn> {
  void <span title=dom-ChildNode-before>before</span>((<span>Node</span> or DOMString)... <var title>nodes</var>);
  void <span title=dom-ChildNode-after>after</span>((<span>Node</span> or DOMString)... <var title>nodes</var>);
  void <span title=dom-ChildNode-replace>replace</span>((<span>Node</span> or DOMString)... <var title>nodes</var>);
  void <span title=dom-ChildNode-remove>remove</span>();
};
<span>DocumentType</span> implements <span>ChildNode</span>;
<span>Element</span> implements <span>ChildNode</span>;
<span>CharacterData</span> implements <span>ChildNode</span>;</pre>

<dl class=domintro>
 <dt><code><var title>node</var> . <span title=dom-ChildNode-before>before</span>(<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>Text</code> <span title=concept-node>nodes</span>.

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

 <dt><code><var title>node</var> . <span title=dom-ChildNode-after>after</span>(<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>Text</code> <span title=concept-node>nodes</span>.

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

 <dt><code><var title>node</var> . <span title=dom-ChildNode-after>replace</span>(<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>Text</code> <span title=concept-node>nodes</span>.

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

 <dt><code><var title>node</var> . <span title=dom-ChildNode-remove>remove</span>()</code>
 <dd><p>Removes <var title>node</var>.
</dl>

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

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

 <li>Run the <span>mutation method macro</span>.

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

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

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

 <li>Run the <span>mutation method macro</span>.

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

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

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

 <li>Run the <span>mutation method macro</span>.

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

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

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

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


<h4>Collections: <code>Elements</code></h4>

<pre class=idl>class <dfn>Elements</dfn> extends <span>Array</span> {
  <span>Element</span>? <span title=dom-Elements-query>query</span>(DOMString <var title>relativeSelectors</var>);
  <span>Elements</span> <span title=dom-Elements-queryAll>queryAll</span>(DOMString <var title>relativeSelectors</var>);
};</pre>

<div class=XXX>
<p>IDL bugs: <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=20020"><code>Array</code> subclassing</a> and <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23225">class, not interface</a>.

<p><code>Elements</code> is an ES6-style subclass of <code>Array</code> with two
additional methods. It's the new <code>NodeList</code> / <code>HTMLCollection</code>.
</div>

<dl class=domintro>
 <dt><code><var title>elements</var> . <span title=dom-Elements-query>query</span>(<var title>relativeSelectors</var>)</code>
 <dd>
  <p>Returns the first <span title=concept-element>element</span> that is a
  <span title=concept-tree-descendant>descendant</span> of <var title>elements</var> that
  matches <var title>relativeSelectors</var>.

 <dt><code><var title>elements</var> . <span title=dom-Elements-queryAll>queryAll</span>(<var title>relativeSelectors</var>)</code>
 <dd>
  <p>Returns all <span title=concept-element>element</span>
  <span title=concept-tree-descendant>descendants</span> of <var title>elements</var> that
  match <var title>relativeSelectors</var>.
</dl>

<p>The
<dfn title=dom-Elements-query><code>query(<var>relativeSelectors</var>)</code></dfn>
method must return the first result of running
<span>match a relative selectors string</span> <var title>relativeSelectors</var>
against the <span>context object</span>, and null if the result is an empty list.

<p>The
<dfn title=dom-Elements-queryAll><code>queryAll(<var>relativeSelectors</var>)</code></dfn>
method must return the result of running <code title>this.constructor</code> with the
result of running <span>match a relative selectors string</span>
<var title>relativeSelectors</var> against the <span>context object</span>.


<h4>Old-style collections: <code>NodeList</code> and <code>HTMLCollection</code></h4>

<p>A <dfn title=concept-collection>collection</dfn> is an object that
represents a lists of DOM nodes. A
<span title=concept-collection>collection</span> can be either
<dfn title=concept-collection-live>live</dfn> or
<dfn title=concept-collection-static>static</dfn>. Unless otherwise stated,
a <span title=concept-collection>collection</span> must be
<span title=concept-collection-live>live</span>.

<p>If a <span title=concept-collection>collection</span> is <span
title=concept-collection-live>live</span>, then the attributes and methods
on that object must operate on the actual underlying data, not a snapshot of
the data.

<p>When a <span title=concept-collection>collection</span> is created, a
filter and a root are associated with it.

<p>The <span title=concept-collection>collection</span> then
<dfn title="represented by the collection">represents</dfn> a view of the
subtree rooted at the <span title=concept-collection>collection's</span>
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 <span title=concept-collection>collection</span> must be sorted in
<span title=concept-tree-order>tree order</span>.


<h5>Interface <code>NodeList</code></h5>

<p>A <code>NodeList</code> object is a
<span title=concept-collection>collection</span> of
<span title=concept-node>nodes</span>.

<pre class=idl>[ArrayClass]
interface <dfn>NodeList</dfn> {
  getter <span>Node</span>? <span title=dom-NodeList-item>item</span>(unsigned long <var title>index</var>);
  readonly attribute unsigned long <span title=dom-NodeList-length>length</span>;
};</pre>

<div class=impl>
<p class=warning>It is unclear if it will be possible to turn
<code>NodeList</code> into an <code title>ArrayClass</code> interface.
<a href="http://code.google.com/p/chromium/issues/detail?id=229398">Experimentation</a>
is planned by the Chromium project.
</div>

<dl class=domintro>
 <dt><var title>collection</var> . <code title=dom-NodeList-length>length</code>
 <dd>
  <p>Returns the number of <span title=concept-node>nodes</span> in the
  <span title=concept-collection>collection</span>.

 <dt><var title>element</var> = <var title>collection</var> . <code title=dom-NodeList-item>item</code>(<var title>index</var>)
 <dt><var title>element</var> = <var title>collection</var>[<var title>index</var>]
 <dd>
  <p>Returns the <span title=concept-node>node</span> with index
  <var title>index</var> from the
  <span title=concept-collection>collection</span>. The
  <span title=concept-node>nodes</span> are sorted in
  <span title=concept-tree-order>tree order</span>.
</dl>

<div class=impl>

<p>The object's <span data-anolis-spec=webidl>supported property indices</span>
are the numbers in the range zero to one less than the number of nodes
<span>represented by the collection</span>. If there are no such elements, then
there are no <span data-anolis-spec=webidl>supported property indices</span>.

<p>The <dfn title=dom-NodeList-length><code>length</code></dfn> attribute must
return the number of nodes <span>represented by the collection</span>.

<p>The
<dfn title=dom-NodeList-item><code>item(<var title>index</var>)</code></dfn>
method must return the <var title>index</var>th
node in the <span title=concept-collection>collection</span>. If there is no
<var title>index</var>th node in the <span
title=concept-collection>collection</span>, then the method must return null.

</div>


<h5>Interface <code>HTMLCollection</code></h5>

<pre class=idl>interface <dfn>HTMLCollection</dfn> {
  readonly attribute unsigned long <span title=dom-HTMLCollection-length>length</span>;
  getter <span>Element</span>? <span title=dom-HTMLCollection-item>item</span>(unsigned long <var title>index</var>);
  getter <span>Element</span>? <span title=dom-HTMLCollection-namedItem>namedItem</span>(DOMString <var title>name</var>);
};</pre>

<p>An <code>HTMLCollection</code> object is a
<span title=concept-collection>collection</span> of
<span title=concept-element>elements</span>.

<p class=note><code>Elements</code> is the better solution for representing a
<span title=concept-collection>collection</span> of
<span title=concept-element>elements</span>. <code>HTMLCollection</code> is an historical
artifact we cannot rid the web of.

<dl class=domintro>
 <dt><var title>collection</var> . <code title=dom-HTMLCollection-length>length</code>
 <dd>
  <p>Returns the number of <span title=concept-element>elements</span> in
  the <span title=concept-collection>collection</span>.

 <dt><var title>element</var> = <var title>collection</var> . <code title=dom-HTMLCollection-item>item</code>(<var title>index</var>)
 <dt><var title>element</var> = <var title>collection</var>[<var title>index</var>]
 <dd>
  <p>Returns the <span title=concept-element>element</span> with index
  <var title>index</var> from the <span title=concept-collection>collection</span>.
  The <span title=concept-element>elements</span> are sorted in <span title=concept-tree-order>tree order</span>.

 <dt><var title>element</var> = <var title>collection</var> . <code title=dom-HTMLCollection-namedItem>namedItem</code>(<var title>name</var>)
 <dt><var title>element</var> = <var title>collection</var>[<var title>name</var>]
 <dd>
  <p>Returns the first <span title=concept-element>element</span> with <span title="concept-id">ID</span> or name <var title>name</var>
  from the collection.
</dl>

<div class=impl>

<p>The object's <span data-anolis-spec=webidl>supported property indices</span>
are the numbers in the range zero to one less than the number of nodes
<span>represented by the collection</span>. If there are no such elements, then
there are no <span data-anolis-spec=webidl>supported property indices</span>.

<p>The <dfn title=dom-HTMLCollection-length><code>length</code></dfn> attribute
must return the number of nodes <span>represented by the collection</span>.

<p>The
<dfn title=dom-HTMLCollection-item><code>item(<var title>index</var>)</code></dfn>
method must return the <var title>index</var>th
<span title=concept-element>element</span> in the <span title=concept-collection>collection</span>. If there is no
<var title>index</var>th <span title=concept-element>element</span> in the <span title=concept-collection>collection</span>, then the method must return null.

<p>The <span data-anolis-spec=webidl>supported property names</span>, all
<span data-anolis-spec=webidl>unenumerable</span>, 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>
  <span>represented by the collection</span>, in
  <span title=concept-tree-order>tree order</span>, run these substeps:
  <ol>
   <li><p>If <var title>element</var> has an
   <span title=concept-id>ID</span> which is neither the empty string nor is
   in <var title>result</var>, append <var title>element</var>'s
   <span title=concept-id>ID</span> to <var title>result</var>.

   <li><p>If <var title>element</var> is in the <span>HTML namespace</span>
   and <span title=concept-element-attribute-has>has</span> a
   <span title=concept-named-attribute><code title>name</code> attribute</span>
   whose <span title=concept-attribute-value>value</span> is neither the
   empty string nor is in <var title>result</var>, append
   <var title>element</var>'s
   <span title=concept-named-attribute><code title>name</code> attribute</span>
   <span title=concept-attribute-value>value</span> to <var title>result</var>.
  </ol>
 <li><p>Return <var title>result</var>.
</ol>

<p>The
<dfn title=dom-HTMLCollection-namedItem><code>namedItem(<var title>key</var>)</code></dfn>
method must run these steps:
<ol>
 <li>If <var title>key</var> is the empty string, return null.</li>
 <li>
  <p>Return the first <span title=concept-element>element</span> in the
  <span title=concept-collection>collection</span> for which at least one of
  the following is true:
  <ul>
   <li>it has an <span title=concept-id>ID</span> which is <var title>key</var>.
   <li>it <span title=concept-element-attribute-has>has</span> a
   <span title=concept-named-attribute><code title>name</code> attribute</span>
   whose <span title=concept-attribute-value>value</span> is
   <var title>key</var>;
  </ul>
  <p>or null if there is no such <span title=concept-element>element</span>.
</ol>

</div>


<h3>Mutation observers</h3>

<p>Each
<span data-anolis-spec=html>unit of related similar-origin browsing contexts</span> has a
<dfn>mutation observer compound microtask queued flag</dfn> and an associated list of
<code>MutationObserver</code> objects which is initially empty.
<span data-anolis-ref>HTML</span>

<p>To <dfn>queue a mutation observer compound microtask</dfn>, run these steps:

<ol>
 <li><p>If <span>mutation observer compound microtask queued flag</span> is set, terminate
 these steps.

 <li><p>Set <span>mutation observer compound microtask queued flag</span>.

 <li><p><span data-anolis-spec=html title="queue a microtask">Queue</span> a
 <span data-anolis-spec=html>compound microtask</span> to
 <span>notify mutation observers</span>.
</ol>

<p>To <dfn>notify mutation observers</dfn>, run these steps:

<ol>
 <li><p>Unset <span>mutation observer compound microtask queued flag</span>.

 <li><p>Let <var title>notify list</var> be a copy of
 <span data-anolis-spec=html>unit of related similar-origin browsing contexts</span>'s
 list of <code>MutationObserver</code> objects.

 <li>
  <p>For each <code>MutationObserver</code> object <var title>mo</var>
  in <var title>notify list</var>,
  <span data-anolis-spec=html>execute a compound microtask subtask</span> to run these
  steps:
  <span data-anolis-ref>HTML</span>

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

   <li><p>Empty <var title>mo</var>'s
   <span title=concept-MO-queue>record queue</span>.

   <li><p>Remove all
   <span title="transient registered observer">transient registered observers</span>
   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 <span title=concept-MO-callback>callback</span>
   with <var title>queue</var> as first argument, and
   <var title>mo</var> (itself) as second argument and
   <span data-anolis-spec=webidl>callback this value</span>.
  </ol>
</ol>

<hr>

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

<p>A <dfn>registered observer</dfn> consists of an <b>observer</b> (a
<code>MutationObserver</code> object) and <b>options</b> (a
<code>MutationObserverInit</code> dictionary). A
<dfn>transient registered observer</dfn> is a specific type of
<span>registered observer</span> that has a <b>source</b> which is a
<span>registered observer</span>.


<h4>Interface <code>MutationObserver</code></h4>

<pre class="idl">[<span title=dom-MutationObserver>Constructor</span>(<span>MutationCallback</span> <var>callback</var>)]
interface <dfn>MutationObserver</dfn> {
  void <span title=dom-MutationObserver-observe>observe</span>(<span>Node</span> <var>target</var>, <span>MutationObserverInit</span> <var>options</var>);
  void <span title=dom-MutationObserver-disconnect>disconnect</span>();
  sequence&lt;<span>MutationRecord</span>> <span title=dom-MutationObserver-takeRecords>takeRecords</span>();
};

callback <dfn>MutationCallback</dfn> = void (sequence&lt;<span>MutationRecord</span>> <var>mutations</var>, <span>MutationObserver</span> <var>observer</var>);

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

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

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

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

 <dt><code><var title>observer</var> . <span title=dom-MutationObserver-observe>observe</span>(<var title>target</var>, <var title>options</var>)</code>
 <dd>
  <p>Instructs the user agent to observe a given <var title>target</var>
  (a <span title=concept-node>node</span>) 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
   <span title=concept-tree-child>children</span> 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
   <span title=concept-attribute>attributes</span> are to be observed. Can be omitted if
   <code title=dom-MutationObserverInit-attributeOldValue>attributeOldValue</code> and/or
   <code title=dom-MutationObserverInit-attributeFilter>attributeFilter</code> is
   specified.

   <dt><code title=dom-MutationObserverInit-characterData>characterData</code>
   <dd><p>Set to true if mutations to <var title>target</var>'s
   <span title=concept-CD-data>data</span> are to be observed. Can be omitted if
   <code title=dom-MutationObserverInit-characterDataOldValue>characterDataOldValue</code>
   is specified.

   <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
   <span title=concept-tree-descendant>descendants</span> 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 true or omitted
   and <var title>target</var>'s
   <span title=concept-attribute>attribute</span>
   <span title=concept-attribute-value>value</span> 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 or omitted and <var title>target</var>'s
   <span title=concept-CD-data>data</span> before the mutation
   needs to be recorded.

   <dt><code title=dom-MutationObserverInit-attributeFilter>attributeFilter</code>
   <dd><p>Set to a list of <span title=concept-attribute>attribute</span>
   <span title=concept-attribute-local-name>local names</span> (without
   <span title=concept-attribute-namespace>namespace</span>) if not all
   <span title=concept-attribute>attribute</span> mutations need to be
   observed and <code title=dom-MutationObserverInit-attributes>attributes</code> is true
   or omitted.
  </dl>

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

 <dt><code><var title>observer</var> . <span title=dom-MutationObserver-takeRecords>takeRecords</span>()</code>
 <dd><p>Empties the <span title=concept-MO-queue>record queue</span> and
 returns what was in there.
</dl>

<p>The
<dfn title=dom-MutationObserver><code>MutationObserver(<var>callback</var>)</code></dfn>
constructor must create a new <code>MutationObserver</code> object with
<span title=concept-MO-callback>callback</span> set to <var>callback</var>,
append it to the
<span data-anolis-spec=html>unit of related similar-origin browsing contexts</span>'s list
of <code>MutationObserver</code> objects, and then return it.

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

<ol>
 <li><p>If either <var title>options</var>'
 <code title=dom-MutationObserverInit-attributeOldValue>attributeOldValue</code> or
 <code title=dom-MutationObserverInit-attributeFilter>attributeFilter</code> is present
 and <var title>options</var>'
 <code title=dom-MutationObserverInit-attributes>attributes</code> is omitted, set
 <var title>options</var>'
 <code title=dom-MutationObserverInit-attributes>attributes</code> to true.

 <li><p>If <var title>options</var>'
 <code title=dom-MutationObserverInit-characterDataOldValue>characterDataOldValue</code>
 is present and <var title>options</var>'
 <code title=dom-MutationObserverInit-characterData>characterData</code> is omitted, set
 <var title>options</var>'
 <code title=dom-MutationObserverInit-characterData>characterData</code> to true.

 <li><p>If <var title>options</var>'
 <code title=dom-MutationObserverInit-attributeOldValue>attributeOldValue</code> is true
 and <var title>options</var>'
 <code title=dom-MutationObserverInit-attributes>attributes</code> is false,
 <span data-anolis-spec=webidl>throw</span> a JavaScript <code title>TypeError</code>.

 <li><p>If <var title>options</var>'
 <code title=dom-MutationObserverInit-attributeFilter>attributeFilter</code> is present
 and <var title>options</var>'
 <code title=dom-MutationObserverInit-attributes>attributes</code> is false,
 <span data-anolis-spec=webidl>throw</span> a JavaScript <code title>TypeError</code>.

 <li><p>If <var title>options</var>'
 <code title=dom-MutationObserverInit-characterDataOldValue>characterDataOldValue</code>
 is true and <var title>options</var>'
 <code title=dom-MutationObserverInit-characterData>characterData</code> is false,
 <span data-anolis-spec=webidl>throw</span> a JavaScript <code title>TypeError</code>.

 <li>
  <p>For each <span>registered observer</span> <var title>registered</var> in
  <var title>target</var>'s list of
  <span title="registered observer">registered observers</span> whose <b>observer</b> is
  the <span>context object</span>:

  <ol>
   <li><p>Remove all
   <span title="transient registered observer">transient registered observers</span> whose
   <b>source</b> is <var title>registered</var>.

   <li><p>Replace <var title>registered</var>'s <b>options</b> with
   <var title>options</var>.
  </ol>

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

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

<p>The
<dfn title=dom-MutationObserver-takeRecords><code>takeRecords()</code></dfn>
method must return a copy of the
<span title=concept-MO-queue>record queue</span> and then empty the
<span title=concept-MO-queue>record queue</span>.


<h4>Queuing a mutation record</h4>

<p>To <dfn>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>MutationObserver</code> objects optionally paired with a string.

 <li><p>Let <var title>nodes</var> be the
 <span title=concept-tree-inclusive-ancestor>inclusive ancestors</span> 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
  <span title="registered observer">registered observers</span>:

  <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 not true, continue.
   <!--not true==false||omitted-->

   <li><p>If <var title>type</var> is "<code title>attributes</code>",
   <var title>options</var>'s <code title>attributeFilter</code> is present, 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 not true, continue.
   <!--not true==false||omitted-->

   <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>MutationRecord</code>
   object with its <code title=dom-MutationRecord-type>type</code> set to
   <var title>type</var> and
   <code title=dom-MutationRecord-target>target</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>attributeName</code> to
   <var title>name</var>, and <var title>record</var>'s
   <code title=dom-MutationRecord-attributeNamespace>attributeNamespace</code>
   to <var title>namespace</var>.

   <li><p>If <var title>addedNodes</var> is given, set <var title>record</var>'s
   <code title=dom-MutationRecord-addedNodes>addedNodes</code> to
   <var title>addedNodes</var>.

   <li><p>If <var title>removedNodes</var> is given, set <var title>record</var>'s
   <code title=dom-MutationRecord-removedNodes>removedNodes</code> to
   <var title>removedNodes</var>,

   <li><p>If <var title>previousSibling</var> is given, set <var title>record</var>'s
   <code title=dom-MutationRecord-previousSibling>previousSibling</code> to
   <var title>previousSibling</var>.

   <li><p>If <var title>nextSibling</var> is given, set <var title>record</var>'s
   <code title=dom-MutationRecord-nextSibling>nextSibling</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
   <span title=concept-MO-queue>record queue</span>.
  </ol>

 <li><p><span>Queue a mutation observer compound microtask</span>.
</ol>


<h4>Interface <code>MutationRecord</code></h4>

<pre class=idl>interface <dfn>MutationRecord</dfn> {
  readonly attribute DOMString <span title=dom-MutationRecord-type>type</span>;
  readonly attribute <span>Node</span> <span title=dom-MutationRecord-target>target</span>;
  [SameObject] readonly attribute <span>NodeList</span> <span title=dom-MutationRecord-addedNodes>addedNodes</span>;
  [SameObject] readonly attribute <span>NodeList</span> <span title=dom-MutationRecord-removedNodes>removedNodes</span>;
  readonly attribute <span>Node</span>? <span title=dom-MutationRecord-previousSibling>previousSibling</span>;
  readonly attribute <span>Node</span>? <span title=dom-MutationRecord-nextSibling>nextSibling</span>;
  readonly attribute DOMString? <span title=dom-MutationRecord-attributeName>attributeName</span>;
  readonly attribute DOMString? <span title=dom-MutationRecord-attributeNamespace>attributeNamespace</span>;
  readonly attribute DOMString? <span title=dom-MutationRecord-oldValue>oldValue</span>;
};</pre>

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

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

 <dt><code><var title>record</var> . <span title=dom-MutationRecord-addedNodes>addedNodes</span></code>
 <dt><code><var title>record</var> . <span title=dom-MutationRecord-removedNodes>removedNodes</span></code>
 <dd><p>Return the <span title=concept-node>nodes</span> added and removed
 respectively.

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

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

 <dt><code><var title>record</var> . <span title=dom-MutationRecord-attributeNamespace>attributeNamespace</span></code>
 <dd><p>Returns the <span title=concept-attribute-namespace>namespace</span> of the
 changed <span title=concept-attribute>attribute</span>, and null otherwise.

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

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

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

<p>The
<dfn title=dom-MutationRecord-previousSibling><code>previousSibling</code></dfn>,
<dfn title=dom-MutationRecord-nextSibling><code>nextSibling</code></dfn>,
<dfn title=dom-MutationRecord-attributeName><code>attributeName</code></dfn>,
<dfn title=dom-MutationRecord-attributeNamespace><code>attributeNamespace</code></dfn>, and
<dfn title=dom-MutationRecord-oldValue><code>oldValue</code></dfn>
attributes must return the values they were initialized to. Unless stated
otherwise, when a <code>MutationRecord</code> object is created, they must
be initialized to null.

<h4>Garbage collection</h4>

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

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


<h3>Interface <code>Node</code></h3>
<pre class=idl>interface <dfn>Node</dfn> : <span>EventTarget</span> {
  const unsigned short <span title=dom-Node-ELEMENT_NODE>ELEMENT_NODE</span> = 1;
  const unsigned short <span title=dom-Node-ATTRIBUTE_NODE>ATTRIBUTE_NODE</span> = 2; // historical
  const unsigned short <span title=dom-Node-TEXT_NODE>TEXT_NODE</span> = 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 <span title=dom-Node-PROCESSING_INSTRUCTION_NODE>PROCESSING_INSTRUCTION_NODE</span> = 7;
  const unsigned short <span title=dom-Node-COMMENT_NODE>COMMENT_NODE</span> = 8;
  const unsigned short <span title=dom-Node-DOCUMENT_NODE>DOCUMENT_NODE</span> = 9;
  const unsigned short <span title=dom-Node-DOCUMENT_TYPE_NODE>DOCUMENT_TYPE_NODE</span> = 10;
  const unsigned short <span title=dom-Node-DOCUMENT_FRAGMENT_NODE>DOCUMENT_FRAGMENT_NODE</span> = 11;
  const unsigned short <span title=dom-Node-NOTATION_NODE>NOTATION_NODE</span> = 12; // historical
  readonly attribute unsigned short <span title=dom-Node-nodeType>nodeType</span>;<!-- 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 <span title=dom-Node-nodeName>nodeName</span>;

  readonly attribute DOMString? <span title=dom-Node-baseURI>baseURI</span>;

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

  -->readonly attribute <span>Document</span>? <span title=dom-Node-ownerDocument>ownerDocument</span>;
  readonly attribute <span>Node</span>? <span title=dom-Node-parentNode>parentNode</span>;
  readonly attribute <span>Element</span>? <span title=dom-Node-parentElement>parentElement</span>;
  boolean <span title=dom-Node-hasChildNodes>hasChildNodes</span>();
  [SameObject] readonly attribute <span>NodeList</span> <span title=dom-Node-childNodes>childNodes</span>;
  readonly attribute <span>Node</span>? <span title=dom-Node-firstChild>firstChild</span>;
  readonly attribute <span>Node</span>? <span title=dom-Node-lastChild>lastChild</span>;
  readonly attribute <span>Node</span>? <span title=dom-Node-previousSibling>previousSibling</span>;
  readonly attribute <span>Node</span>? <span title=dom-Node-nextSibling>nextSibling</span>;

           attribute DOMString? <span title=dom-Node-nodeValue>nodeValue</span>;
           attribute DOMString? <span title=dom-Node-textContent>textContent</span>;
  void <span title=dom-Node-normalize>normalize</span>();

  <span>Node</span> <span title=dom-Node-cloneNode>cloneNode</span>(optional boolean <var title>deep</var> = false);
  boolean <span title=dom-Node-isEqualNode>isEqualNode</span>(<span>Node</span>? <var title>node</var>);

  const unsigned short <span title=dom-Node-DOCUMENT_POSITION_DISCONNECTED>DOCUMENT_POSITION_DISCONNECTED</span> = 0x01;
  const unsigned short <span title=dom-Node-DOCUMENT_POSITION_PRECEDING>DOCUMENT_POSITION_PRECEDING</span> = 0x02;
  const unsigned short <span title=dom-Node-DOCUMENT_POSITION_FOLLOWING>DOCUMENT_POSITION_FOLLOWING</span> = 0x04;
  const unsigned short <span title=dom-Node-DOCUMENT_POSITION_CONTAINS>DOCUMENT_POSITION_CONTAINS</span> = 0x08;
  const unsigned short <span title=dom-Node-DOCUMENT_POSITION_CONTAINED_BY>DOCUMENT_POSITION_CONTAINED_BY</span> = 0x10;
  const unsigned short <span title=dom-Node-DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</span> = 0x20;
  unsigned short <span title=dom-Node-compareDocumentPosition>compareDocumentPosition</span>(<span>Node</span> <var title>other</var>);
  boolean <span title=dom-Node-contains>contains</span>(<span>Node</span>? <var title>other</var>);

  DOMString? <span title=dom-Node-lookupPrefix>lookupPrefix</span>(DOMString? <var title>namespace</var>);
  DOMString? <span title=dom-Node-lookupNamespaceURI>lookupNamespaceURI</span>(DOMString? <var title>prefix</var>);
  boolean <span title=dom-Node-isDefaultNamespace>isDefaultNamespace</span>(DOMString? <var title>namespace</var>);

  <span>Node</span> <span title=dom-Node-insertBefore>insertBefore</span>(<span>Node</span> <var title>node</var>, <span>Node</span>? <var title>child</var>);
  <span>Node</span> <span title=dom-Node-appendChild>appendChild</span>(<span>Node</span> <var title>node</var>);
  <span>Node</span> <span title=dom-Node-replaceChild>replaceChild</span>(<span>Node</span> <var title>node</var>, <span>Node</span> <var title>child</var>);
  <span>Node</span> <span title=dom-Node-removeChild>removeChild</span>(<span>Node</span> <var title>child</var>);
};</pre>

<p class=note><code>Node</code> is an abstract interface and does not exist
as <span title=concept-node>node</span>. It is used by all
<span title=concept-node>nodes</span> (<code>Document</code>,
<code>DocumentFragment</code>, <code>DocumentType</code>,
<code>Element</code>, <code>Text</code>, <code>ProcessingInstruction</code>,
and <code>Comment</code>).

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

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

<p>Each <span title=concept-node>node</span> also has an associated
<dfn title=concept-node-base-url>base URL</dfn>.

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

<hr>

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

  <dl>
   <dt><code><span>Node</span> . <span title=dom-Node-ELEMENT_NODE>ELEMENT_NODE</span></code> (1)
   <dd><var title>node</var> is an
   <span title=concept-element>element</span>.

   <dt><code><span>Node</span> . <span title=dom-Node-TEXT_NODE>TEXT_NODE</span></code> (3)
   <dd><var title>node</var> is a <code>Text</code>
   <span title=concept-node>node</span>.

   <dt><code><span>Node</span> . <span title=dom-Node-PROCESSING_INSTRUCTION_NODE>PROCESSING_INSTRUCTION_NODE</span></code> (7)
   <dd><var title>node</var> is a <code>ProcessingInstruction</code>
   <span title=concept-node>node</span>.

   <dt><code><span>Node</span> . <span title=dom-Node-COMMENT_NODE>COMMENT_NODE</span></code> (8)
   <dd><var title>node</var> is a <code>Comment</code>
   <span title=concept-node>node</span>.

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

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

   <dt><code><span>Node</span> . <span title=dom-Node-DOCUMENT_FRAGMENT_NODE>DOCUMENT_FRAGMENT_NODE</span></code> (11)
   <dd><var title>node</var> is a <code>DocumentFragment</code>
   <span title=concept-node>node</span>.
  </dl>

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

  <dl>
   <dt><code>Element</code>
   <dd>Its <code title=dom-Element-tagName>tagName</code> attribute value.

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

   <dt><code>ProcessingInstruction</code>
   <dd>Its <span title=concept-PI-target>target</span>.

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

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

   <dt><code>DocumentType</code>
   <dd>Its <span title=concept-doctype-name>name</span>.

   <dt><code>DocumentFragment</code>
   <dd>"<code title>#document-fragment</code>".
  </dl>
</dl>

<p>The <dfn 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 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 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 title=dom-Node-PROCESSING_INSTRUCTION_NODE><code>PROCESSING_INSTRUCTION_NODE</code></dfn> (7);

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

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

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

 <li><dfn 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.
   <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.
  </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 title=dom-Node-nodeName><code>nodeName</code></dfn> attribute
must return the following, depending on the <span>context object</span>:

<dl class=switch>
 <dt><code>Element</code>
 <dd><p>Its <code title=dom-Element-tagName>tagName</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>Text</code>
 <dd><p>"<code title>#text</code>".

 <dt><code>ProcessingInstruction</code>
 <dd><p>Its <span title=concept-PI-target>target</span>.

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

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

 <dt><code>DocumentType</code>
 <dd><p>Its <span title=concept-doctype-name>name</span>.

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

<hr>

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

<p>The <dfn title=dom-Node-baseURI><code>baseURI</code></dfn> attribute must return the associated <span title=concept-node-base-url>base URL</span>.

<!--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> . <span title=dom-Node-ownerDocument>ownerDocument</span></code>
 <dd>
  <p>Returns the <span title=concept-node-document>node document</span>.
  <p>Returns null for <span title=concept-document>documents</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-parentNode>parentNode</span></code>
 <dd><p>Returns the <span title=concept-tree-parent>parent</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-parentElement>parentElement</span></code>
 <dd><p>Returns the <span>parent element</span>.

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

 <dt><code><var title>node</var> . <span title=dom-Node-childNodes>childNodes</span></code>
 <dd><p>Returns the <span title=concept-tree-child>children</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-firstChild>firstChild</span></code>
 <dd><p>Returns the <span title=concept-tree-first-child>first child</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-lastChild>lastChild</span></code>
 <dd><p>Returns the <span title=concept-tree-last-child>last child</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-previousSibling>previousSibling</span></code>
 <dd><p>Returns the
 <span title=concept-tree-previous-sibling>previous sibling</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-nextSibling>nextSibling</span></code>
 <dd><p>Returns the
 <span title=concept-tree-next-sibling>next sibling</span>.
</dl>

<div class=impl>

<p>The <dfn title=dom-Node-ownerDocument><code>ownerDocument</code></dfn>
attribute must run these steps:
<ol>
 <li>If the <span>context object</span> is a
 <span title=concept-document>document</span>, return null.

 <li>Return the <span title=concept-node-document>node document</span>.
</ol>

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

<p>The <dfn title=dom-Node-parentNode><code>parentNode</code></dfn>
attribute must return the <span title=concept-tree-parent>parent</span>.
<!-- AttrExodus
<li><p>If the <span>context object</span> is an <code>Attr</code> node,
return null.
-->

<p>The <dfn title=dom-Node-parentElement><code>parentElement</code></dfn>
attribute must return the <span>parent element</span>.

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

<p>The <dfn title=dom-Node-childNodes><code>childNodes</code></dfn>
attribute must return a <code>NodeList</code> rooted at the
<span>context object</span> matching only
<span title=concept-tree-child>children</span>.

<p>The <dfn title=dom-Node-firstChild><code>firstChild</code></dfn>
attribute must return the
<span title=concept-tree-first-child>first child</span>.

<p>The <dfn title=dom-Node-lastChild><code>lastChild</code></dfn> attribute must return the <span title=concept-tree-last-child>last child</span>.

<p>The
<dfn title=dom-Node-previousSibling><code>previousSibling</code></dfn>
attribute must return the
<span title=concept-tree-previous-sibling>previous sibling</span>.
<!-- AttrExodus
 <li><p>If the <span>context object</span> is an <code>Attr</code> node,
 return null.
-->

<p>The <dfn title=dom-Node-nextSibling><code>nextSibling</code></dfn>
attribute must return the
<span title=concept-tree-next-sibling>next sibling</span>.
<!-- AttrExodus
 <li><p>If the <span>context object</span> is an <code>Attr</code> node,
 return null.
-->

</div>

<hr>

<!-- TODO: domintro -->

<p>The <dfn title=dom-Node-nodeValue><code>nodeValue</code></dfn> attribute
must return the following, depending on the <span>context object</span>:

<dl class=switch>
 <!--AttrExodus <dt><code>Attr</code> -->
 <dt><code>Text</code>
 <dt><code>Comment</code>
 <dt><code>ProcessingInstruction</code>
 <dd><p>The <span>context object</span>'s
 <span title=concept-CD-data>data</span>.

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

<p>The <code title=dom-Node-nodeValue>nodeValue</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 <span>context object</span>:

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

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

<p>The <dfn title=dom-Node-textContent><code>textContent</code></dfn>
attribute must return the following, depending on the
<span>context object</span>:

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

 <dt><code>Text</code>
 <dt><code>ProcessingInstruction</code>
 <dt><code>Comment</code>
 <dd><p>The <span>context object</span>'s
 <span title=concept-CD-data>data</span>.

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

<p>The <code title=dom-Node-textContent>textContent</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 <span>context object</span>:

<dl class=switch>
 <dt><code>DocumentFragment</code>
 <dt><code>Element</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>Text</code> <span title=concept-node>node</span> whose
   <span title=concept-CD-data>data</span> is new value.

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

 <dt><code>Text</code>
 <dt><code>ProcessingInstruction</code>
 <dt><code>Comment</code>
 <dd><p><span title=concept-CD-replace>Replace data</span> with node
 <span>context object</span>, offset 0, count
 <code title=dom-CharacterData-length>length</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> . <span title=dom-Node-normalize>normalize</span>()</code>
 <dd><p>Removes <span title=concept-node-empty>empty</span>
 <code>Text</code> <span title=concept-node>nodes</span> and concatenates
 the <span title=concept-CD-data>data</span> of remaining
 <span>contiguous <code>Text</code> nodes</span> into the first of their
 <span title=concept-node>nodes</span>.
</dl>

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

<p>For each <code>Text</code> <span title=concept-node>node</span>
<span title=concept-tree-descendant>descendant</span> of the
<span>context object</span>:

<ol>
 <li><p>Let <var title>node</var> be the <code>Text</code>
 <span title=concept-node>node</span>
 <span title=concept-tree-descendant>descendant</span>.

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

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

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

 <li><p><span title=concept-CD-replace>Replace data</span> 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
 <span title=concept-tree-next-sibling>next sibling</span>.

 <li><p>While <var title>current node</var> is a <code>Text</code> node:

 <ol>
  <li><p>For each <span title=concept-range>range</span> whose
  <span title=concept-range-start-node>start node</span> is
  <var title>current node</var>, add <var title>length</var> to its
  <span title=concept-range-start-offset>start offset</span> and set its
  <span title=concept-range-start-node>start node</span> to
  <var title>node</var>.

  <li><p>For each <span title=concept-range>range</span> whose
  <span title=concept-range-end-node>end node</span> is
  <var title>current node</var>, add <var title>length</var> to its
  <span title=concept-range-end-offset>end offset</span> and set its
  <span title=concept-range-end-node>end node</span> to
  <var title>node</var>.

  <li><p>For each <span title=concept-range>range</span> whose
  <span title=concept-range-start-node>start node</span> is
  <var title>current node</var>'s
  <span title=concept-tree-parent>parent</span> and
  <span title=concept-range-start-offset>start offset</span> is
  <var title>current node</var>'s
  <span title=concept-tree-index>index</span>, set its
  <span title=concept-range-start-node>start node</span> to
  <var title>node</var> and its
  <span title=concept-range-start-offset>start offset</span> to
  <var title>length</var>.

  <li><p>For each <span title=concept-range>range</span> whose
  <span title=concept-range-end-node>end node</span> is
  <var title>current node</var>'s
  <span title=concept-tree-parent>parent</span> and
  <span title=concept-range-end-offset>end offset</span> is
  <var title>current node</var>'s
  <span title=concept-tree-index>index</span>, set its
  <span title=concept-range-end-node>end node</span> to
  <var title>node</var> and its
  <span title=concept-range-end-offset>end offset</span> to
  <var title>length</var>.

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

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

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

<hr>

<dl class=domintro>
 <dt><code><var title>node</var> . <span title=dom-Node-cloneNode>cloneNode</span>([<var title>deep</var> = false])</code>
 <dd><p>Returns a copy of <var title>node</var>. If
 <var title>deep</var> is true, the copy also includes the
 <var title>node</var>'s <span title=concept-tree-descendant>descendants</span>.

 <dt><code><var title>node</var> . <span title=dom-Node-isEqualNode>isEqualNode</span>(<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><span title="Other applicable specifications">Specifications</span> may define
<dfn title=concept-node-clone-ext>cloning steps</dfn> for all or some
<span title=concept-node>nodes</span>. The algorithm is passed <var title>copy</var>,
<var title>node</var>, <var title>document</var>, and optionally a
<i title>clone children flag</i>, as indicated in the
<span title=concept-node-clone>clone</span> algorithm.

<p class="note no-backref">HTML defines
<span title=concept-node-clone-ext>cloning steps</span> for
<code data-anolis-spec=html>script</code> and
<code data-anolis-spec=html>input</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 title=concept-node-clone>clone</dfn> a <var title>node</var>,
optionally with a <var title>document</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 <var title>document</var> is not given, let <var title>document</var> be
 <var title>node</var>'s <span title=concept-node-document>node document</span>.

 <li><p>Let <var title>copy</var> be a <span title=concept-node>node</span>
 that implements the same interfaces as <var title>node</var>.

 <li>
  <p>If <var title>copy</var> is a
  <span title=concept-document>document</span>, set its
  <span title=concept-node-document>node document</span> and
  <var title>document</var> to <var title>copy</var>.
  <p>Otherwise, set <var title>copy</var>'s
  <span title=concept-node-document>node document</span> to
  <var title>document</var>.

 <li>
  <p>Copy the following from <var title>node</var> to <var title>copy</var>, depending on
  the type of <var title>node</var>:
  <dl class=switch>
   <dt><code>Document</code>
   <dd><p>Its <span title=concept-document-encoding>encoding</span>,
   <span title=concept-document-content-type>content type</span>,
   <span title=concept-document-url>URL</span>, its mode
   (<span title=concept-document-quirks>quirks mode</span>,
   <span  title=concept-document-limited-quirks>limited quirks mode</span>, or
   <span title=concept-document-no-quirks>no-quirks mode</span>), and its type
   (<span>XML document</span> or <span>HTML document</span>).

   <dt><code>DocumentType</code>
   <dd><p>Its <span title=concept-doctype-name>name</span>,
   <span title=concept-doctype-publicid>public ID</span>, and
   <span title=concept-doctype-systemid>system ID</span>.

   <dt><code>Element</code>
   <dd><p>Its <span title=concept-element-namespace>namespace</span>,
   <span title=concept-element-namespace-prefix>namespace prefix</span>,
   <span title=concept-element-local-name>local name</span>, and its
   <span title=concept-element-attribute>attribute list</span>.

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

   <dt><code>Text</code>
   <dt><code>Comment</code>
   <dd><p>Its <span title=concept-CD-data>data</span>.

   <dt><code>ProcessingInstruction</code>
   <dd><p>Its <span title=concept-PI-target>target</span> and
   <span title=concept-CD-data>data</span>.

   <dt>Any other node
   <dd><p>&mdash;
  </dl>

 <li><p>Run any <span title=concept-node-clone-ext>cloning steps</span>
 defined for <var title>node</var> in <span>other applicable specifications</span> and
 pass <var title>copy</var>, <var title>node</var>, <var title>document</var> and the
 <i title>clone children flag</i> if set, as parameters.

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

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

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

<p>A <span title=concept-node>node</span> <var title>A</var>
<dfn title=concept-node-equals>equals</dfn> a <span title=concept-node>node</span>
<var title>B</var> if all of the following conditions are true:

<ul>
 <li><p><var title>A</var> and <var title>B</var>'s
 <code title=dom-Node-nodeType>nodeType</code> attribute value is identical.
 <li>
  <p>The following are also equal, depending on <var title>A</var>:
  <dl class=switch>
   <dt><code>DocumentType</code>
   <dd><p>Its <span title=concept-doctype-name>name</span>,
   <span title=concept-doctype-publicid>public ID</span>, and
   <span title=concept-doctype-systemid>system ID</span>.

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

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

   <dt><code>ProcessingInstruction</code>
   <dd><p>Its <span title=concept-PI-target>target</span> and
   <span title=concept-CD-data>data</span>.

   <dt><code>Text</code>
   <dt><code>Comment</code>
   <dd><p>Its <span title=concept-CD-data>data</span>.

   <dt>Any other node
   <dd><p>&mdash;
  </dl>
 <li><p>If <var title>A</var> is an <span title=concept-element>element</span>, each
 <span title=concept-attribute>attribute</span> in its
 <span title=concept-element-attribute>attribute list</span> has an
 <span title=concept-attribute>attribute</span> with the same
 <span title=concept-attribute-namespace>namespace</span>,
 <span title=concept-attribute-local-name>local name</span>, and
 <span title=concept-attribute-value>value</span> in <var title>B</var>'s
 <span title=concept-element-attribute>attribute list</span>.
 <li><p><var title>A</var> and <var title>B</var> have the same number of
 <span title=concept-tree-child>children</span>.
 <li><p>Each <span title=concept-tree-child>child</span> of <var title>A</var>
 <span title=concept-node-equals>equals</span> the
 <span title=concept-tree-child>child</span> of <var title>B</var> at the identical
 <span title=concept-tree-index>index</span>.
</ul>

<p>The
<dfn title=dom-Node-isEqualNode><code>isEqualNode(<var title>node</var>)</code></dfn>
method must return true if <var title>node</var> is not null and
<span>context object</span> <span title=concept-node-equals>equals</span>
<var title>node</var>, and false otherwise.

</div>

<hr>

<dl class=domintro>
 <dt><code><var title>node</var> . <span title=dom-Node-compareDocumentPosition>compareDocumentPosition</span>(<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><span>Node</span> . <span title=dom-Node-DOCUMENT_POSITION_DISCONNECTED>DOCUMENT_POSITION_DISCONNECTED</span></code> (1)
   <dd>Set when <var title>node</var> and <var>other</var> are not in the
   same <span title=concept-tree>tree</span>.

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

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

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

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

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

<p>These are the constants
<code title=dom-Node-compareDocumentPosition>compareDocumentPosition()</code>
returns as mask:

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

<p>The <dfn
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 <span>context object</span>.
 <li><p>If <var title>other</var> and <var title>reference</var> are the
 same object, return zero.

 <li>
  <p>If <var title>other</var> and <var title>reference</var> are not
  in the same <span title=concept-tree>tree</span>, return the result of
  adding
  <code title=dom-Node-DOCUMENT_POSITION_DISCONNECTED>DOCUMENT_POSITION_DISCONNECTED</code>,
  <code title=dom-Node-DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code>,
  and either
  <code title=dom-Node-DOCUMENT_POSITION_PRECEDING>DOCUMENT_POSITION_PRECEDING</code> or
  <code title=dom-Node-DOCUMENT_POSITION_FOLLOWING>DOCUMENT_POSITION_FOLLOWING</code>,
  with the constraint that this is to be consistent, together.

  <p class=note>Whether to return
  <code title=dom-Node-DOCUMENT_POSITION_PRECEDING>DOCUMENT_POSITION_PRECEDING</code> or
  <code title=dom-Node-DOCUMENT_POSITION_FOLLOWING>DOCUMENT_POSITION_FOLLOWING</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
 <span title=concept-tree-ancestor>ancestor</span> of
 <var title>reference</var>, return the result of adding
 <code title=dom-Node-DOCUMENT_POSITION_CONTAINS>DOCUMENT_POSITION_CONTAINS</code>
 to
 <code title=dom-Node-DOCUMENT_POSITION_PRECEDING>DOCUMENT_POSITION_PRECEDING</code>.

 <li><p>If <var title>other</var> is a
 <span title=concept-tree-descendant>descendant</span> of
 <var title>reference</var>, return the result of adding
 <code title=dom-Node-DOCUMENT_POSITION_CONTAINED_BY>DOCUMENT_POSITION_CONTAINED_BY</code>
 to
 <code title=dom-Node-DOCUMENT_POSITION_FOLLOWING>DOCUMENT_POSITION_FOLLOWING</code>.

 <li><p>If <var title>other</var> is
 <span title=concept-tree-preceding>preceding</span>
 <var title>reference</var> return
 <code title=dom-Node-DOCUMENT_POSITION_PRECEDING>DOCUMENT_POSITION_PRECEDING</code>.

 <li><p>Return
 <code title=dom-Node-DOCUMENT_POSITION_FOLLOWING>DOCUMENT_POSITION_FOLLOWING</code>.
</ol>

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

<p>The
<dfn title=dom-Node-contains><code>contains(<var title>other</var>)</code></dfn>
method must return true if <var title>other</var> is an
<span title=concept-tree-inclusive-descendant>inclusive descendant</span> of
the <span>context object</span>, 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>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
 <span title=concept-element-namespace>namespace</span> is
 <var title>namespace</var> and its
 <span title=concept-element-namespace-prefix>namespace prefix</span> is not
 null, return its
 <span title=concept-element-namespace-prefix>namespace prefix</span>.

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

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

<p>To <dfn>locate a namespace</dfn> for a <var title>node</var> using
<var title>prefix</var> depends on <var title>node</var>:

<dl class=switch>
 <dt><code>Element</code>
 <dd>
  <ol>
   <li><p>If its <span title=concept-element-namespace>namespace</span> is
   not null and its
   <span title=concept-element-namespace-prefix>namespace prefix</span> is
   <var title>prefix</var>, return
   <span title=concept-element-namespace>namespace</span>.

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

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

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

   <li><p>If its <span>parent element</span> is null, return null.

   <li><p>Return the result of running <span>locate a namespace</span> on
   its <span>parent element</span> using <var title>prefix</var>.
  </ol>

 <!--AttrExodus <code>Attr</code> -->
 <dt><code>Document</code>
 <dd>
  <ol>
   <li><p>If its <span>document element</span> is null, return null.

   <li><p>Return the result of running <span>locate a namespace</span> on
   its <span>document element</span> using <var title>prefix</var>.
  </ol>

 <dt><code>DocumentType</code>
 <dt><code>DocumentFragment</code>
 <dd><p>Return null.

 <dt>Any other node
 <dd>
  <ol>
   <li><p>If its <span>parent element</span> is null, return null.

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

<p>The
<dfn 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 <span>context object</span>:

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

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

   <dt><code>DocumentType</code>
   <dt><code>DocumentFragment</code>
   <dd><p>Return null.

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

<p>The
<dfn 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 <span>locate a namespace</span> for the
 <span>context object</span> using <var title>prefix</var>.
</ol>

<p>The
<dfn 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
 <span>locate a namespace</span> for the <span>context object</span> 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 title=dom-Node-insertBefore><code>insertBefore(<var>node</var>, <var>child</var>)</code></dfn>
method must return the result of
<span title=concept-node-pre-insert>pre-inserting</span>
<var title>node</var> into the <span>context object</span> before
<var title>child</var>.

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

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

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

<hr><!-- Collections -->

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

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

  <ul>
   <li>Whose <span title=concept-element-namespace>namespace</span> is the
   <span>HTML namespace</span> and whose
   <span title=concept-element-local-name>local name</span> is
   <var title>localName</var> <span>converted to ASCII lowercase</span>.

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

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

<p>When invoked with the same argument, the same <code>HTMLCollection</code>
object may be returned as returned by an earlier call.


<p>The
<dfn title=concept-getElementsByTagNameNS>list of elements with namespace <var title>namespace</var> and local name <var title>localName</var></dfn>
for a <span title=concept-node>node</span> <var title>root</var> is the
<code>HTMLCollection</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>HTMLCollection</code> rooted at
 <var title>root</var>, whose filter matches only
 <span title=concept-element>elements</span>.

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

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

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

<p>When invoked with the same arguments, the same <code>HTMLCollection</code>
object may be returned as returned by an earlier call.


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

 <li>
  <p>If <var title>classes</var> is the empty set, return an empty
  <code>HTMLCollection</code>.

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

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


<h3>Interface <code>Document</code></h3>
<pre class=idl>[<span title=dom-Document>Constructor</span>]
interface <dfn>Document</dfn> : <span>Node</span> {
  [SameObject] readonly attribute <span>DOMImplementation</span> <span title=dom-Document-implementation>implementation</span>;
  readonly attribute DOMString <span title=dom-Document-URL>URL</span>;
  readonly attribute DOMString <span title=dom-Document-documentURI>documentURI</span>;
  readonly attribute DOMString <span title=dom-Document-origin>origin</span>;
  readonly attribute DOMString <span title=dom-Document-compatMode>compatMode</span>;
  readonly attribute DOMString <span title=dom-Document-characterSet>characterSet</span>;
  readonly attribute DOMString <span title=dom-Document-contentType>contentType</span>;

  readonly attribute <span>DocumentType</span>? <span title=dom-Document-doctype>doctype</span>;
  readonly attribute <span>Element</span>? <span title=dom-Document-documentElement>documentElement</span>;
  <span>HTMLCollection</span> <span title=dom-Document-getElementsByTagName>getElementsByTagName</span>(DOMString <var title>localName</var>);
  <span>HTMLCollection</span> <span title=dom-Document-getElementsByTagNameNS>getElementsByTagNameNS</span>(DOMString? <var title>namespace</var>, DOMString <var title>localName</var>);
  <span>HTMLCollection</span> <span title=dom-Document-getElementsByClassName>getElementsByClassName</span>(DOMString <var title>classNames</var>);

  [NewObject] <span>Element</span> <span title=dom-Document-createElement>createElement</span>(DOMString <var title>localName</var>);
  [NewObject] <span>Element</span> <span title=dom-Document-createElementNS>createElementNS</span>(DOMString? <var title>namespace</var>, DOMString <var title>qualifiedName</var>);
  [NewObject] <span>DocumentFragment</span> <span title=dom-Document-createDocumentFragment>createDocumentFragment</span>();
  [NewObject] <span>Text</span> <span title=dom-Document-createTextNode>createTextNode</span>(DOMString <var title>data</var>);
  [NewObject] <span>Comment</span> <span title=dom-Document-createComment>createComment</span>(DOMString <var title>data</var>);
  [NewObject] <span>ProcessingInstruction</span> <span title=dom-Document-createProcessingInstruction>createProcessingInstruction</span>(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]-->

  <span>Node</span> <span title=dom-Document-importNode>importNode</span>(<span>Node</span> <var title>node</var>, optional boolean <var title>deep</var> = false);
  <span>Node</span> <span title=dom-Document-adoptNode>adoptNode</span>(<span>Node</span> <var title>node</var>);

  [NewObject] <span>Event</span> <span title=dom-Document-createEvent>createEvent</span>(DOMString <var title>interface</var>);

  [NewObject] <span>Range</span> <span title=dom-Document-createRange>createRange</span>();

  // <span>NodeFilter</span>.<span title=dom-NodeFilter-SHOW_ALL>SHOW_ALL</span> = 0xFFFFFFFF
  [NewObject] <span>NodeIterator</span> <span title=dom-Document-createNodeIterator>createNodeIterator</span>(<!--
  --><span>Node</span> <var title>root</var>, <!--
  -->optional unsigned long <var title>whatToShow</var> = 0xFFFFFFFF, <!--
  -->optional <span>NodeFilter</span>? <var title>filter</var> = null);
  [NewObject] <span>TreeWalker</span> <span title=dom-Document-createTreeWalker>createTreeWalker</span>(<!--
  --><span>Node</span> <var title>root</var>, <!--
  -->optional unsigned long <var title>whatToShow</var> = 0xFFFFFFFF, <!--
  -->optional <span>NodeFilter</span>? <var title>filter</var> = null);
};

interface <dfn>XMLDocument</dfn> : <span>Document</span> {};</pre>

<p><code>Document</code> <span title=concept-node>nodes</span> are simply
known as <dfn title=concept-document>documents</dfn>.

<p>Each <span title=concept-document>document</span> has an associated
<dfn title=concept-document-encoding>encoding</dfn>,
<dfn title=concept-document-content-type>content type</dfn>, and
<dfn title=concept-document-url>URL</dfn>.
<span data-anolis-ref>ENCODING</span>
<span data-anolis-ref>URL</span>

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

<p>Unless stated otherwise, a <span title=concept-document>document</span>'s
<span data-anolis-spec=html>origin</span> is a globally unique identifier
and its <span data-anolis-spec=html>effective script origin</span> is an
<span data-anolis-spec=html title=concept-origin-alias>alias</span> of that
<span data-anolis-spec=html>origin</span>.
<span data-anolis-ref>HTML</span>

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

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

<p class=note>The mode is only ever changed from the default if the
<span title=concept-document>document</span> is created by the
<span data-anolis-spec=html>HTML parser</span>, based on the presence,
absence, or value of the DOCTYPE string.
<span data-anolis-ref>HTML</span>

<p class=note><span title=concept-document-no-quirks>No-quirks mode</span>
was originally known as "standards mode" and
<span title=concept-document-limited-quirks>limited-quirks mode</span> 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 <span title=dom-Document>Document</span>()</code>
 <dd><p>Returns a new <span title=concept-document>document</span>.

 <dt><code><var title>document</var> . <span title=dom-Document-implementation>implementation</span></code>
 <dd><p>Returns <var title>document</var>'s <code>DOMImplementation</code> object.

 <dt><code><var title>document</var> . <span title=dom-Document-URL>URL</span></code>
 <dt><code><var title>document</var> . <span title=dom-Document-documentURI>documentURI</span></code>
 <dd><p>Returns <var title>document</var>'s <span title=concept-document-url>URL</span>.

 <dt><code><var title>document</var> . <span title=dom-Document-origin>origin</span></code>
 <dd><p>Returns <var title>document</var>'s <span data-anolis-spec=html>origin</span>.

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

 <dt><code><var title>document</var> . <span title=dom-Document-characterSet>characterSet</span></code>
 <dd><p>Returns <var title>document</var>'s
 <span title=concept-document-encoding>encoding</span>.

 <dt><code><var title>document</var> . <span title=dom-Document-contentType>contentType</span></code>
 <dd><p>Returns <var title>document</var>'s
 <span title=concept-document-content-type>content type</span>.
</dl>

<p>The <dfn title=dom-Document><code>Document()</code></dfn> constructor
must return a new <span title=concept-document>document</span> whose
<span data-anolis-spec=html>origin</span> is an
<span data-anolis-spec=html title=concept-origin-alias>alias</span> to the
<span data-anolis-spec=html>origin</span> of the global object's associated
<span title=concept-document>document</span>, and
<span data-anolis-spec=html>effective script origin</span> is an
<span data-anolis-spec=html title=concept-origin-alias>alias</span> to the
<span data-anolis-spec=html>effective script origin</span> of the
global object's associated <span title=concept-document>document</span>.
<span data-anolis-ref>HTML</span>

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

<p>The
<dfn title=dom-Document-implementation><code>implementation</code></dfn>
attribute must return the <code>DOMImplementation</code> object that is
associated with the <span title=concept-document>document</span>.

<p>The <dfn title=dom-Document-URL><code>URL</code></dfn> and
<dfn title=dom-Document-documentURI><code>documentURI</code></dfn>
attributes must return the <span title=concept-document-url>URL</span>.

<p>The <dfn title=dom-Document-origin><code>origin</code></dfn>
attribute must return the <span data-anolis-spec=origin>Unicode serialization</span> of
<span>context object</span>'s <span data-anolis-spec=html>origin</span>.
<span data-anolis-ref>ORIGIN</span>

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

<p>The <dfn title=dom-Document-characterSet><code>characterSet</code></dfn>
attribute must return the <span data-anolis-spec=encoding>name</span> of the
<span title=concept-document-encoding>encoding</span>.

<p>The <dfn title=dom-Document-contentType><code>contentType</code></dfn>
attribute must return the
<span title=concept-document-content-type>content type</span>.

<hr>

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

 <dt><var title>document</var> . <code title=dom-Document-documentElement>documentElement</code>
 <dd><p>Returns the <span>document element</span>.

 <dt><var title>collection</var> = <var title>document</var> . <code title=dom-Document-getElementsByTagName>getElementsByTagName(<var>localName</var>)</code>

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

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

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

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

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

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

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

 <dt><var title>collection</var> = <var title>document</var> . <code title=dom-Document-getElementsByClassName>getElementsByClassName(<var>classes</var>)</code>
 <dt><var title>collection</var> = <var title>element</var> . <code title=dom-Element-getElementsByClassName>getElementsByClassName(<var>classes</var>)</code>
 <dd>
  <p>Returns a <code>HTMLCollection</code> of the
  <span title=concept-element>elements</span> in the object on which
  the method was invoked (a <span title=concept-document>document</span> or
  an <span title=concept-element>element</span>) 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.
</dl>

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

<p>The
<dfn title=dom-Document-documentElement><code>documentElement</code></dfn>
attribute must return the <span>document element</span>.

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

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


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


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

<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>HTMLCollection</code> with the two paragraphs
 <code title>p1</code> and <code title>p2</code> in it.

 <p>A call to
 <code title>getElementsByClassName('ccc&nbsp;bbb')</code>
 would only return one node, however, namely <code title>p3</code>. A call to
 <code title>document.getElementById('example').getElementsByClassName('bbb&nbsp;&nbsp;ccc&nbsp;')</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>

<hr>

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

  <p>If <var title>localName</var> does not match the
  <code data-anolis-spec=xml>Name</code> production an
  "<code>InvalidCharacterError</code>"
  exception will be thrown.

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

 <dd>
  <p>Returns an <span title=concept-element>element</span> with
  <span title=concept-element-namespace>namespace</span>
  <var title>namespace</var>. Its
  <span title=concept-element-namespace-prefix>namespace prefix</span> will
  be everything before "<code title>:</code>" (U+003E) in
  <var title>qualifiedName</var> or null. Its
  <span title=concept-element-local-name>local name</span> 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 data-anolis-spec=xml>Name</code> production an
  "<code>InvalidCharacterError</code>"
  exception will be thrown.

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

  <ul>
   <li><var title>localName</var> does not match the
   <code data-anolis-spec=xmlns>QName</code> production.
   <li><span title=concept-element-namespace-prefix>Namespace prefix</span>
   is not null and <var title>namespace</var> is the empty string.
   <li><span title=concept-element-namespace-prefix>Namespace prefix</span>
   is "<code title>xml</code>" and <var title>namespace</var> is not the
   <span>XML namespace</span>.
   <li><var title>qualifiedName</var> or
   <span title=concept-element-namespace-prefix>namespace prefix</span>
   is "<code title>xmlns</code>" and <var title>namespace</var> is not the
   <span>XMLNS namespace</span>.
   <li><var title>namespace</var> is the <span>XMLNS namespace</span> and
   neither <var title>qualifiedName</var> nor
   <span title=concept-element-namespace-prefix>namespace prefix</span>
   is "<code title>xmlns</code>".
  </ul>

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

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

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

 <dt><var title>processingInstruction</var> = <var title>document</var> . <code title=dom-Document-createProcessingInstruction>createProcessingInstruction(<var>target</var>, <var>data</var>)</code>
 <dd>
  <p>Returns a <code>ProcessingInstruction</code>
  <span title=concept-node>node</span> whose
  <span title=concept-PI-target>target</span> is <var title>target</var> and
  <span title=concept-CD-data>data</span> is <var title>data</var>.
  <p>If <var title>target</var> does not match the
  <code data-anolis-spec=xml>Name</code> production an
  "<code>InvalidCharacterError</code>"
  exception will be thrown.
  <p>If <var title>data</var> contains "<code title>?></code>" an
  "<code>InvalidCharacterError</code>"
  exception will be thrown.
</dl>

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

<p class=note>The HTML Standard will e.g. define that for <code title>html</code> and the
<span>HTML namespace</span>, the <code title>HTMLHtmlElement</code> interface is used.
<span data-anolis-ref>HTML</span>

<p>The <dfn 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 data-anolis-spec=xml>Name</code> production,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.

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

 <li><p>Let <var title>interface</var> be the
 <span title=concept-element-interface>element interface</span> for
 <var title>localName</var> and the <span>HTML namespace</span>.

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

<p>The
<dfn 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 data-anolis-spec=xml>Name</code> production,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.
 <li><p>If <var title>qualifiedName</var> does not match the
 <code data-anolis-spec=xmlns>QName</code> production,
 <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.
 <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, <span title=concept-throw>throw</span>
 a "<code>NamespaceError</code>" exception.
 <li><p>If <var title>prefix</var> is "<code title>xml</code>" and
 <var title>namespace</var> is not the <span>XML namespace</span>,
 <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.
 <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
 <span>XMLNS namespace</span>, <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.
 <li><p>If <var title>namespace</var> is the <span>XMLNS namespace</span>
 and neither <var title>qualifiedName</var> nor <var title>prefix</var> is
 "<code title>xmlns</code>", <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.

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

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

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

<p>The
<dfn title=dom-Document-createTextNode><code>createTextNode(<var title>data</var>)</code></dfn>
method must return a new <code>Text</code>
<span title=concept-node>node</span> with its
<span title=concept-CD-data>data</span> set to <var title>data</var> and
<span title=concept-node-document>node document</span> set to the
<span>context object</span>.
<p class=note>No check is performed that <var title>data</var> consists of
characters that match the <code data-anolis-spec=xml>Char</code> production.

<p>The
<dfn title=dom-Document-createComment><code>createComment(<var title>data</var>)</code></dfn>
method must return a new <code>Comment</code>
<span title=concept-node>node</span> with its
<span title=concept-CD-data>data</span> set to <var title>data</var> and
<span title=concept-node-document>node document</span> set to the
<span>context object</span>.
<p class=note>No check is performed that <var title>data</var> consists of
characters that match the <code data-anolis-spec=xml>Char</code> production
or that it contains two adjacent hyphens or ends with a hyphen.

<p>The <dfn 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 data-anolis-spec=xml>Name</code> production,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception. <!-- DOM3 does not check for "xml" -->

 <li><p>If <var title>data</var> contains the string
 "<code title>?></code>", <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception. <!-- 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.-->
 <!-- DOM3 didn't check this -->

 <li><p>Return a new <code>ProcessingInstruction</code>
 <span title=concept-node>node</span>, with
 <span title=concept-PI-target>target</span> set to <var title>target</var>,
 <span title=concept-CD-data>data</span> set to <var title>data</var>, and
 <span title=concept-node-document>node document</span> set to the
 <span>context object</span>.
</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 data-anolis-spec=xml>Char</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.
 <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>importNode(<var>node</var> [, <var>deep</var> = false])</code>
 <dd>
 <dd>
  <p>Returns a copy of <var title>node</var>. If
  <var title>deep</var> is true, the copy also includes the
  <var title>node</var>'s <span title=concept-tree-descendant>descendants</span>.

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

 <dt><var title>node</var> = <var title>document</var> . <code title=dom-Document-adoptNode>adoptNode(<var>node</var>)</code>

 <dd>
  <p>Moves <var title>node</var> from another
  <span title=concept-document>document</span> and returns it.

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

<p>The
<dfn 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
 <span title=concept-document>document</span>,
 <span title=concept-throw>throw</span> a
 "<code>NotSupportedError</code>" exception.

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

<p><span title="Other applicable specifications">Specifications</span> may define
<dfn title=concept-node-adopt-ext>adopting steps</dfn> for all or some
<span title=concept-node>nodes</span>. The algorithm is passed <var title>node</var> and
<var title>oldDocument</var>, as indicated in the
<span class=no-backref title=concept-node-adopt>adopt</span> algorithm.

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

<ol>
 <li><p>Let <var title>oldDocument</var> be <var title>node</var>'s
 <span title=concept-node-document>node document</span>.

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

 <li><p>Set <var title>node</var>'s
 <span title=concept-tree-inclusive-descendant>inclusive descendants</span>'s
 <span title=concept-node-document>node document</span> to <var title>document</var>.
 <!--AttrExodus as well as any associated <code>Attr</code> nodes-->

 <li><p>Run any <span title=concept-node-adopt-ext>adopting steps</span> defined for
 <var title>node</var> in <span>other applicable specifications</span> and pass
 <var title>node</var> and <var title>oldDocument</var> as parameters.
</ol>

<p>The
<dfn 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
 <span title=concept-document>document</span>,
 <span title=concept-throw>throw</span> a
 "<code>NotSupportedError</code>" exception.

 <li><p><span title=concept-node-adopt>Adopt</span> <var title>node</var>
 into the <span>context object</span>.

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

<hr>

<p>The
<dfn 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
  <span>ASCII case-insensitive</span> 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>CustomEvent</code><td rowspan=4>
    <tr><td>"<code title>event</code>"<td rowspan=3><code>Event</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><span data-anolis-ref>UIEVENTS</span>
    <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, <span title=concept-throw>throw</span> a
 "<code>NotSupportedError</code>".

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

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

<hr>

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

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

<hr>

<p>The
<dfn 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>NodeIterator</code> object.
 <li><p>Set <span title=concept-traversal-root>root</span> and initialize
 the <code title=dom-NodeIterator-referenceNode>referenceNode</code>
 attribute to the <var title>root</var> argument.
 <li><p>Initialize the
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</code>
 attribute to true.
 <li><p>Set <span title=concept-traversal-whatToShow>whatToShow</span> to
 the <var title>whatToShow</var> argument.
 <li><p>Set <span title=concept-traversal-filter>filter</span> to
 <var title>filter</var>.
 <li><p>Return the newly created <code>NodeIterator</code> object.
</ol>

<p>The
<dfn 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>TreeWalker</code> object.
 <li><p>Set <span title=concept-traversal-root>root</span> and initialize
 the <code title=dom-TreeWalker-currentNode>currentNode</code> attribute to
 the <var title>root</var> argument.
 <li><p>Set <span title=concept-traversal-whatToShow>whatToShow</span> to
 the <var title>whatToShow</var> argument.
 <li><p>Set <span title=concept-traversal-filter>filter</span> to
 <var title>filter</var>.
 <li><p>Return the newly created <code>TreeWalker</code> object.
</ol>


<h4>Interface <code>DOMImplementation</code></h4>
<p>User agents must create a <code>DOMImplementation</code> object whenever
a <span title=concept-document>document</span> is created and associate it
with that <span title=concept-document>document</span>.

<pre class=idl>interface <dfn>DOMImplementation</dfn> {
  [NewObject] <span>DocumentType</span> <span title=dom-DOMImplementation-createDocumentType>createDocumentType</span>(DOMString qualifiedName, DOMString publicId, DOMString systemId);
  [NewObject] <span>XMLDocument</span> <span title=dom-DOMImplementation-createDocument>createDocument</span>(DOMString? <var title>namespace</var>, [TreatNullAs=EmptyString] DOMString <var title>qualifiedName</var>, optional <span>DocumentType</span>? <var title>doctype</var> = null);
  [NewObject] <span>Document</span> <span title=dom-DOMImplementation-createHTMLDocument>createHTMLDocument</span>(optional DOMString <var title>title</var>);

  boolean <span title=dom-DOMImplementation-hasFeature>hasFeature</span>(); // useless; always returns true
};</pre>

<dl class=domintro>
 <dt><code><var title>doctype</var> = <var title>document</var> . <span title=dom-Document-implementation>implementation</span> . <span title=dom-DOMImplementation-createDocumentType>createDocumentType</span>(<var title>qualifiedName</var>, <var title>publicId</var>, <var title>systemId</var>)</code>

 <dd>
  <p>Returns a <span title=concept-doctype>doctype</span>, 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 data-anolis-spec=xml>Name</code> production, an
  "<code>InvalidCharacterError</code>"
  exception is thrown, and if it does not match the
  <code data-anolis-spec=xmlns>QName</code> production, a
  "<code>NamespaceError</code>" exception
  is thrown.

 <dt><code><var title>doc</var> = <var title>document</var> . <span title=dom-Document-implementation>implementation</span> . <span title=dom-DOMImplementation-createDocument>createDocument</span>(<var title>namespace</var>, <var title>qualifiedName</var> [, <var title>doctype</var> = null])</code>

 <dd>
  <p>Returns an <code>XMLDocument</code>, with a
  <span>document element</span> whose
  <span title=concept-element-local-name>local name</span> is
  <var title>qualifiedName</var> and whose
  <span title=concept-element-namespace>namespace</span> 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
  <span title=concept-doctype>doctype</span>.

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

 <dt><code><var title>doc</var> = <var title>document</var> . <span title=dom-Document-implementation>implementation</span> . <span title=dom-DOMImplementation-createHTMLDocument>createHTMLDocument</span>([<var title>title</var>])</code>

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

<div class=impl>

<p>The
<dfn 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 data-anolis-spec=xml>Name</code> production,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.
 <li><p>If <var title>qualifiedName</var> does not match the <code
 data-anolis-spec=xmlns>QName</code> production,
 <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.
 <!-- <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. --> <!-- 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.--> <!-- DOM3 didn't check this -->
 <li><p>Return a new <span title=concept-doctype>doctype</span>, with
 <var title>qualifiedName</var> as its
 <span title=concept-doctype-name>name</span>, <var title>publicId</var> as
 its <span title=concept-doctype-publicid>public ID</span>, and
 <var title>systemId</var> as its
 <span title=concept-doctype-systemid>system ID</span>, and with its
 <span title=concept-node-document>node document</span> set to the
 associated <span title=concept-document>document</span> of the
 <span>context object</span>.
</ol>
<p class=note>No check is performed that <var title>publicId</var>
matches the <code title>PublicChar</code> production or that
<var title>systemId</var> does not contain both a '<code title>"</code>' and
"<code title>'</code>".

<p>The
<dfn 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>XMLDocument</code>.

  <p class=note>This method creates an <code>XMLDocument</code> rather than
  a normal <span title=concept-document>document</span>. They are identical
  except for the addition of the
  <code data-anolis-spec=html title=dom-XMLDocument-load>load()</code>
  method deployed content relies upon.
  <span data-anolis-ref>HTML</span>

 <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>createElementNS()</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.

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

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

 <li><p><var title>document</var>'s
 <span data-anolis-spec=html>origin</span> is an
 <span data-anolis-spec=html title=concept-origin-alias>alias</span> to the
 <span data-anolis-spec=html>origin</span> of the
 <span>context object</span>'s associated
 <span title=concept-document>document</span>, and
 <var title>document</var>'s
 <span data-anolis-spec=html>effective script origin</span> is an
 <span data-anolis-spec=html title=concept-origin-alias>alias</span> to the
 <span data-anolis-spec=html>effective script origin</span> of the
 <span>context object</span>'s associated
 <span title=concept-document>document</span>.
 <span data-anolis-ref>HTML</span>

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

<p>The
<dfn 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
 <span title=concept-document>document</span> that is an
 <span>HTML document</span>.

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

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

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

 <li><p>Create a <code title>head</code> element in the <span>HTML
 namespace</span>, and  <span title=concept-node-append>append</span>
 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
   <span>HTML namespace</span>, and
   <span title=concept-node-append>append</span> it to the
   <code title>head</code> element created in the previous step.

   <li><p>Create a <code>Text</code> <span title=concept-node>node</span>,
   set its <span title=concept-CD-data>data</span> to <var title>title</var>
   (which could be the empty string), and
   <span title=concept-node-append>append</span> 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
 <span>HTML namespace</span>, and
 <span title=concept-node-append>append</span> it to the
 <code title>html</code> element created in the earlier step.

 <li><p><var title>doc</var>'s
 <span data-anolis-spec=html>origin</span> is an
 <span data-anolis-spec=html title=concept-origin-alias>alias</span> to the
 <span data-anolis-spec=html>origin</span> of the
 <span>context object</span>'s associated
 <span title=concept-document>document</span>, and
 <var title>doc</var>'s
 <span data-anolis-spec=html>effective script origin</span> is an
 <span data-anolis-spec=html title=concept-origin-alias>alias</span> to the
 <span data-anolis-spec=html>effective script origin</span> of the
 <span>context object</span>'s associated
 <span title=concept-document>document</span>.
 <span data-anolis-ref>HTML</span>

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

<p>The <dfn title=dom-DOMImplementation-hasFeature><code>hasFeature()</code></dfn> method
must return true.

<p class=note><code title=dom-DOMImplementation-hasFeature>hasFeature()</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 objects, 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.

</div>


<h3>Interface <code>DocumentFragment</code></h3>
<pre class=idl>[<span title=dom-DocumentFragment>Constructor</span>]
interface <dfn>DocumentFragment</dfn> : <span>Node</span> {
};</pre>

<p>A <code>DocumentFragment</code> <span title=concept-node>node</span> can have an
associated <span title=concept-element>element</span> named
<dfn title=concept-DocumentFragment-host>host</dfn>.

<p>An object <var title>A</var> is a
<dfn title=concept-tree-host-including-inclusive-ancestor>host-including inclusive ancestor</dfn>
of an object <var title>B</var>, if either <var title>A</var> is an
<span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
<var title>B</var>, or if <var title>B</var>'s <span title=concept-tree-root>root</span>
has an associated <span title=concept-DocumentFragment-host>host</span> and
<var title>A</var> is a
<span title=concept-tree-host-including-inclusive-ancestor>host-including inclusive ancestor</span>
of <var title>B</var>'s <span title=concept-tree-root>root</span>'s
<span title=concept-DocumentFragment-host>host</span>.

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

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

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

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


<h3>Interface <code>DocumentType</code></h3>
<pre class=idl>interface <dfn>DocumentType</dfn> : <span>Node</span> {
  readonly attribute DOMString <span title=dom-DocumentType-name>name</span>;
  readonly attribute DOMString <span title=dom-DocumentType-publicId>publicId</span>;
  readonly attribute DOMString <span title=dom-DocumentType-systemId>systemId</span>;<!--
  readonly attribute DOMString internalSubset;-->
};</pre>

<p><code>DocumentType</code> <span title=concept-node>nodes</span> are
simply known as <dfn title=concept-doctype>doctypes</dfn>.

<p><span title=concept-doctype>Doctypes</span> have an associated
<dfn title=concept-doctype-name>name</dfn>,
<dfn title=concept-doctype-publicid>public ID</dfn>, and
<dfn title=concept-doctype-systemid>system ID</dfn>.

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

<p>The <dfn title=dom-DocumentType-name><code>name</code></dfn> attribute
must return the <span title=concept-doctype-name>name</span>.

<p>The <dfn title=dom-DocumentType-publicId><code>publicId</code></dfn>
attribute must return the
<span title=concept-doctype-publicid>public ID</span>.

<p>The <dfn title=dom-DocumentType-systemId><code>systemId</code></dfn>
attribute must return the
<span title=concept-doctype-systemid>system ID</span>.


<!-- 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>Interface <code>Element</code></h3>
<pre class=idl>interface <dfn>Element</dfn> : <span>Node</span> {
  readonly attribute DOMString? <span title=dom-Element-namespaceURI>namespaceURI</span>;
  readonly attribute DOMString? <span title=dom-Element-prefix>prefix</span>;
  readonly attribute DOMString <span title=dom-Element-localName>localName</span>;
  readonly attribute DOMString <span title=dom-Element-tagName>tagName</span>;

           attribute DOMString <span title=dom-Element-id>id</span>;
           attribute DOMString <span title=dom-Element-className>className</span>;
  [SameObject] readonly attribute <span>DOMTokenList</span> <span title=dom-Element-classList>classList</span>;

  [SameObject] readonly attribute <span>Attr</span>[] <span title=dom-Element-attributes>attributes</span>;
  DOMString? <span title=dom-Element-getAttribute>getAttribute</span>(DOMString <var title>name</var>);
  DOMString? <span title=dom-Element-getAttributeNS>getAttributeNS</span>(DOMString? <var title>namespace</var>, DOMString <var title>localName</var>);
  void <span title=dom-Element-setAttribute>setAttribute</span>(DOMString <var title>name</var>, DOMString <var title>value</var>);
  void <span title=dom-Element-setAttributeNS>setAttributeNS</span>(DOMString? <var title>namespace</var>, DOMString <var title>name</var>, DOMString <var title>value</var>);
  void <span title=dom-Element-removeAttribute>removeAttribute</span>(DOMString <var title>name</var>);
  void <span title=dom-Element-removeAttributeNS>removeAttributeNS</span>(DOMString? <var title>namespace</var>, DOMString <var title>localName</var>);
  boolean <span title=dom-Element-hasAttribute>hasAttribute</span>(DOMString <var title>name</var>);
  boolean <span title=dom-Element-hasAttributeNS>hasAttributeNS</span>(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);
-->
  boolean <span title=dom-Element-matches>matches</span>(DOMString <var title>selectors</var>);

  <span>HTMLCollection</span> <span title=dom-Element-getElementsByTagName>getElementsByTagName</span>(DOMString <var title>localName</var>);
  <span>HTMLCollection</span> <span title=dom-Element-getElementsByTagNameNS>getElementsByTagNameNS</span>(DOMString? <var title>namespace</var>, DOMString <var title>localName</var>);
  <span>HTMLCollection</span> <span title=dom-Element-getElementsByClassName>getElementsByClassName</span>(DOMString <var title>classNames</var>);
};</pre>

<p><code>Element</code> <span title=concept-node>nodes</span> are simply
known as <dfn title=concept-element>elements</dfn>.</p>

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

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

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

<p>To <dfn title=concept-element-attributes-get>get an attribute</dfn> for
an <span title=concept-element>element</span> <var title>element</var>
using a <var title>localName</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 <span title=concept-attribute-value>value</span> of the
 <span title=concept-attribute>attribute</span> in <var title>element</var>'s
 <span title=concept-element-attribute>attribute list</span> whose
 <span title=concept-attribute-namespace>namespace</span> is
 <var title>namespace</var> and
 <span title=concept-attribute-local-name>local name</span> is
 <var title>localName</var>, if it has one, and null otherwise.
</ol>

<p>To <dfn title=concept-element-attributes-set>set an attribute</dfn> for
an <span title=concept-element>element</span> <var title>element</var>
using a <var title>localName</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>localName</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
 <span title=concept-attribute>attribute</span> in
 <var title>element</var>'s
 <span title=concept-element-attribute>attribute list</span>
 whose <span title=concept-attribute-namespace>namespace</span> is
 <var title>namespace</var> and whose
 <span title=concept-attribute-local-name>local name</span>
 is <var title>localName</var>, or null if there is no such
 <span title=concept-attribute>attribute</span>.

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

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

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

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

 <li><p>Set <var title>attribute</var>'s
 <span title=concept-attribute-value>value</span> to <var title>value</var>.

 <li><p>An <span>attribute is set</span> and an
 <span>attribute is changed</span>.
</ol>

<p>To <dfn title=concept-element-attributes-append>append</dfn> an
<span title=concept-attribute>attribute</span> <var title>attribute</var> to
an <span title=concept-element>element</span> <var title>element</var>,
run these steps:

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

 <li><p>Append the <var title>attribute</var> to the <var title>element</var>'s
 <span title=concept-element-attribute>attribute list</span>.

 <li><p>An <span>attribute is set</span> and an
 <span>attribute is added</span>.
</ol>

<p>To <dfn title=concept-element-attributes-remove>remove</dfn> an
<span title=concept-attribute>attribute</span> <var title>attribute</var>
from an <span title=concept-element>element</span> <var title>element</var>,
run these steps:

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

 <li><p>Remove <var title>attribute</var> from the
 <var title>element</var>'s
 <span title=concept-element-attribute>attribute list</span>.

 <li><p>An <span>attribute is removed</span>.
</ol>

<hr>

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

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

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

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

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

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

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

<hr>

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

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

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

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

<hr>

<dl class=domintro>
 <dt><var title>namespace</var> = <var title>element</var> . <code title=dom-Element-namespaceURI>namespaceURI</code>
 <dd><p>Returns the <span title=concept-element-namespace>namespace</span>.

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

 <dt><var title>localName</var> = <var title>element</var> . <code title=dom-Element-localName>localName</code>
 <dd><p>Returns the
 <span title=concept-element-local-name>local name</span>.

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

<p>The <dfn title=dom-Element-namespaceURI><code>namespaceURI</code></dfn>
attribute must return the <span>context object</span>'s
<span title=concept-element-namespace>namespace</span>.

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

<p>The <dfn title=dom-Element-localName><code>localName</code></dfn>
attribute must return the <span>context object</span>'s
<span title=concept-element-local-name>local name</span>.

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

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

 <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 title=concept-reflect>reflect</dfn> a
particular content attribute. This means that on getting, these
steps must be run:

<ol>
 <li><p><span title=concept-element-attributes-get>Get an attribute</span>
 for the <span>context object</span> 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,
<span title=concept-element-attributes-set>set an attribute</span> for the
<span>context object</span> using the name of the attribute and the given
value.

<p>The <dfn title=dom-Element-id><code>id</code></dfn> attribute must
<span title=concept-reflect>reflect</span> the "<code title>id</code>"
content attribute.

<p>The <dfn title=dom-Element-className><code>className</code></dfn>
attribute must <span title=concept-reflect>reflect</span> the
"<code title>class</code>" content attribute.

<p>The <dfn title=dom-Element-classList><code>classList</code></dfn>
attribute must return the associated <code>DOMTokenList</code> object
representing the <span>context object</span>'s
<span title=concept-class>classes</span>.

<hr>

<!-- all members in this subsection are affected by AttrExodus -->

<p>The <dfn title=dom-Element-attributes><code>attributes</code></dfn>
attribute must return a <span data-anolis-spec=webidl>read only array</span>
of the <span>context object</span>'s
<span title=concept-element-attribute>attribute list</span>.
The returned <span data-anolis-spec=webidl>read only array</span> must be
live. I.e. changes to the associated
<span title=concept-attribute>attributes</span> are reflected.
<!-- XXXlive define live centrally somewhere for both collections and this? -->

<p>The <dfn title=dom-Element-getAttribute><code>getAttribute(<var title>name</var>)</code></dfn> method must run these steps:
<ol>
 <li><p>If the <span>context object</span> is in the
 <span>HTML namespace</span> and its
 <span title=concept-node-document>node document</span> is an
 <span>HTML document</span>, let <var title>name</var> be
 <span>converted to ASCII lowercase</span>.

 <li><p>Return the <span title=concept-attribute-value>value</span> of the
 first <span title=concept-attribute>attribute</span> in the
 <span>context object</span>'s
 <span title=concept-element-attribute>attribute list</span> whose
 <span title=concept-attribute-name>name</span> is
 <var title>name</var>, and null otherwise.
</ol>

<p>The
<dfn 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
  <span title=concept-element-attributes-get>getting an attribute</span> for
  the <span>context object</span> using <var title>localName</var> and
  <var title>namespace</var>.
</ol>

<p>The
<dfn 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 data-anolis-spec=xml>Name</code> production in XML,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.

 <li><p>If the <span>context object</span> is in the <span>HTML namespace</span>
 and its <span title=concept-node-document>node document</span> is an
 <span>HTML document</span>, let <var title>name</var> be
 <span>converted to ASCII lowercase</span>.

 <li><p>Let <var title>attribute</var> be the
 first <span title=concept-attribute>attribute</span> in the
 <span>context object</span>'s <span title=concept-element-attribute>attribute list</span>
 whose <span title=concept-attribute-name>name</span> is
 <var title>name</var>, or null if there is no such
 <span title=concept-attribute>attribute</span>.

 <li><p>If <var title>attribute</var> is null, create an
 <span title=concept-attribute>attribute</span> whose
 <span title=concept-attribute-local-name>local name</span> is
 <var title>name</var> and
 <span title=concept-attribute-value>value</span> is <var title>value</var>,
 and then <span title=concept-element-attributes-append>append</span> this
 <span title=concept-attribute>attribute</span> to the
 <span>context object</span> and terminate these steps.

 <li><p><span title=concept-element-attributes-change>Change</span>
 <var title>attribute</var> from <span>context object</span> to
 <var title>value</var>.
</ol>

<p>The
<dfn 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 data-anolis-spec=xml>Name</code> production in XML,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.

 <li><p>If <var title>name</var> does not match the
 <code data-anolis-spec=xmlns>QName</code> production in Namespaces in XML,
 <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.

 <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, <span title=concept-throw>throw</span>
 a "<code>NamespaceError</code>" exception.

 <li><p>If <var title>prefix</var> is "<code title>xml</code>" and
 <var title>namespace</var> is not the <span>XML namespace</span>,
 <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.

 <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
 <span>XMLNS namespace</span>, <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.

 <li><p>If <var title>namespace</var> is the <span>XMLNS namespace</span>
 and neither <var title>name</var> nor <var title>prefix</var> is
 "<code title>xmlns</code>", <span title=concept-throw>throw</span> a
 "<code>NamespaceError</code>" exception.

 <li><p><span title=concept-element-attributes-set>Set an attribute</span>
 for the <span>context object</span> 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 title=dom-Element-removeAttribute><code>removeAttribute(<var>name</var>)</code></dfn>
method must run these steps:
<ol>
 <li><p>If the <span>context object</span> is in the
 <span>HTML namespace</span> and its
 <span title=concept-node-document>node document</span> is an
 <span>HTML document</span>, let <var title>name</var> be
 <span>converted to ASCII lowercase</span>.

 <li><p><span title=concept-element-attributes-remove>Remove</span> the
 first <span title=concept-attribute>attribute</span> from the
 <span>context object</span> whose
 <span title=concept-attribute-name>name</span> is <var title>name</var>,
 if any.
</ol>

<p>The
<dfn 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><span title=concept-element-attributes-remove>Remove</span> the
  <span title=concept-attribute>attribute</span> from the
  <span>context object</span> whose
  <span title=concept-attribute-namespace>namespace</span> is
  <var title>namespace</var> and
  <span title=concept-attribute-local-name>local name</span> is
  <var title>localName</var>, if any.
</ol>

<p>The
<dfn title=dom-Element-hasAttribute><code>hasAttribute(<var>name</var>)</code></dfn>
method must run these steps:
<ol>
 <li><p>If the <span>context object</span> is in the
 <span>HTML namespace</span> and its
 <span title=concept-node-document>node document</span> is an
 <span>HTML document</span>, let <var title>name</var> be
 <span>converted to ASCII lowercase</span>.

 <li><p>Return true if the <span>context object</span>
 <span title=concept-element-attribute-has>has</span> an
 <span title=concept-attribute>attribute</span> whose
 <span title=concept-attribute-name>name</span> is
 <var title>name</var>, and false otherwise.
</ol>

<p>The
<dfn title=dom-Element-hasAttributeNS><code>hasAttributeNS(<var>namespace</var>, <var>localName</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>Return true if the <span>context object</span>
 <span title=concept-element-attribute-has>has</span> an
 <span title=concept-attribute>attribute</span> whose
 <span title=concept-attribute-namespace>namespace</span> is <var title>namespace</var>
 and <span title=concept-attribute-local-name>local name</span> 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>

<dl class=domintro>
 <dt><code><var title>element</var> . <span title=dom-Element-matches>matches</span>(<var title>selectors</var>)</code>
 <dd><p>Returns true if matching <var title>selectors</var> against
 <var title>element</var>'s <span title=concept-tree-root>root</span> yields
 <var title>element</var>, and false otherwise.
</dl>

<p>To <dfn>match a selectors string</dfn> <var title>selectors</var> against a
<var title>set</var>, run these steps:

<ol>
 <li><p>Let <var title>s</var> be the result of
 <span data-anolis-spec=selectors>parse a selector</span> from <var title>selectors</var>
 against <span data-anolis-spec=selectors>reference element set</span>
 <var title>set</var>.
 <span data-anolis-ref>SELECTORS</span>

 <li><p>If <var title>s</var> is failure, <span data-anolis-spec=webidl>throw</span> a
 JavaScript <code title>TypeError</code>.

 <li><p>Return the result of <span data-anolis-spec=selectors>match a selector</span>
 <var title>s</var> using <span data-anolis-spec=selectors>reference element set</span>
 <var title>set</var>. <span data-anolis-ref>SELECTORS</span>
</ol>

<p>The <dfn title=dom-Element-matches><code>matches(<var>selectors</var>)</code></dfn>
method must return true if the <span>context object</span> is in the result of running
<span>match a selectors string</span> <var title>selectors</var> against a set consisting
of <span>context object</span>, and false otherwise.

<hr>

<p>The
<dfn title=dom-Element-getElementsByTagName><code>getElementsByTagName(<var>localName</var>)</code></dfn>
method must return the
<span title=concept-getElementsByTagName>list of elements with local name <var title>localName</var></span>
for the <span>context object</span>.

<p>The
<dfn title=dom-Element-getElementsByTagNameNS><code>getElementsByTagNameNS(<var>namespace</var>, <var>localName</var>)</code></dfn>
method must return the
<span title=concept-getElementsByTagNameNS>list of elements with namespace <var title>namespace</var> and local name <var title>localName</var></span>
for the <span>context object</span>.

<p>The
<dfn
title=dom-Element-getElementsByClassName><code>getElementsByClassName(<var
title>classNames</var>)</code></dfn>
method must return the
<span title=concept-getElementsByClassName>list of elements with class names <var title>classNames</var></span>
for the <span>context object</span>.


<h4>Interface <code>Attr</code></h4>
<pre class=idl>interface <dfn>Attr</dfn> {
  readonly attribute DOMString <span title=dom-Attr-localName>localName</span>;
           attribute DOMString <span title=dom-Attr-value>value</span>;

  readonly attribute DOMString <span title=dom-Attr-name>name</span>;
  readonly attribute DOMString? <span title=dom-Attr-namespaceURI>namespaceURI</span>;
  readonly attribute DOMString? <span title=dom-Attr-prefix>prefix</span>;

  readonly attribute <span>Element</span>? <span title=dom-Attr-ownerElement>ownerElement</span>;

  readonly attribute boolean <span title=dom-Attr-specified>specified</span>; // useless; always returns true
};</pre>

<p><code>Attr</code> objects are simply known as
<dfn title=concept-attribute>attributes</dfn>. They are sometimes referred
to as <em>content attributes</em> to avoid confusion with IDL attributes.

<p><span title=concept-attribute>Attributes</span> have a
<dfn title=concept-attribute-local-name>local name</dfn> and
<dfn title=concept-attribute-value>value</dfn>.

<p>For legacy reasons, <span title=concept-attribute>attributes</span> also
have an associated <dfn title=concept-attribute-name>name</dfn>,
<dfn title=concept-attribute-namespace>namespace</dfn>, and
<dfn title=concept-attribute-namespace-prefix>namespace prefix</dfn>.

<p>When an <span title=concept-attribute>attribute</span> is created, its
<span title=concept-attribute-local-name>local name</span> and
<span title=concept-attribute-value>value</span> are always given. Unless
explicitly given when an <span title=concept-attribute>attribute</span> is
created, its <span title=concept-attribute-name>name</span> is
identical to its <span title=concept-attribute-local-name>local name</span>,
and its <span title=concept-attribute-namespace>namespace</span> and
<span title=concept-attribute-namespace-prefix>namespace prefix</span> are
null.

<p>An
<dfn title=concept-named-attribute><code><var title>A</var></code> attribute</dfn>
is an <span title=concept-attribute>attribute</span> whose
<span title=concept-attribute-local-name>local name</span> is
<code><var title>A</var></code> and whose
<span title=concept-attribute-namespace>namespace</span> and
<span title=concept-attribute-namespace-prefix>namespace prefix</span> are
null.

<hr>

<p>The <dfn title=dom-Attr-localName><code>localName</code></dfn> attribute
must return the <span title=concept-attribute-local-name>local name</span>.

<p>The <dfn title=dom-Attr-value><code>value</code></dfn> attribute must
return the <span title=concept-attribute-value>value</span>.

<p>Setting the <code title=dom-Attr-value>value</code> attribute must
<span title=concept-element-attributes-change>change</span>
<span title=concept-attribute-value>value</span> to the new value.

<hr>

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

<p>The <dfn title=dom-Attr-namespaceURI><code>namespaceURI</code></dfn>
attribute must return the
<span title=concept-attribute-namespace>namespace</span>.

<p>The <dfn title=dom-Attr-prefix><code>prefix</code></dfn> attribute must
return the
<span title=concept-attribute-namespace-prefix>namespace prefix</span>.

<hr>

<p>The <dfn title=dom-Attr-ownerElement><code>ownerElement</code></dfn> attribute must
return the <span title=concept-element>element</span> whose
<span title=concept-element-attribute>attribute list</span> contains the
<span>context object</span>, and null if there is no such
<span title=concept-element>element</span> otherwise.

<hr>

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


<h3>Interface <code>CharacterData</code></h3>
<pre class=idl>interface <dfn>CharacterData</dfn> : <span>Node</span> {
  [TreatNullAs=EmptyString] attribute DOMString <span title=dom-CharacterData-data>data</span>;
  readonly attribute unsigned long <span title=dom-CharacterData-length>length</span>;
  DOMString <span title=dom-CharacterData-substringData>substringData</span>(unsigned long <var title>offset</var>, unsigned long <var title>count</var>);
  void <span title=dom-CharacterData-appendData>appendData</span>(DOMString <var title>data</var>);
  void <span title=dom-CharacterData-insertData>insertData</span>(unsigned long <var title>offset</var>, DOMString <var title>data</var>);
  void <span title=dom-CharacterData-deleteData>deleteData</span>(unsigned long <var title>offset</var>, unsigned long <var title>count</var>);
  void <span title=dom-CharacterData-replaceData>replaceData</span>(unsigned long <var title>offset</var>, unsigned long <var title>count</var>, DOMString <var title>data</var>);
};</pre>

<p class="note"><code>CharacterData</code> is an abstract interface and does
not exist as <span title=concept-node>node</span>. It is used by
<code>Text</code>, <code>Comment</code>, and
<code>ProcessingInstruction</code> <span title=concept-node>nodes</span>.

<p>Each <span title=concept-node>node</span> inheriting from the
<code>CharacterData</code> interface has an associated mutable string
called <dfn title=concept-CD-data>data</dfn>.

<p>To <dfn 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 <var title>node</var>'s
 <code title=dom-CharacterData-length>length</code> attribute value.

 <li><p>If <var title>offset</var> is greater than <var title>length</var>,
 <span title=concept-throw>throw</span> an
 "<code>IndexSizeError</code>" exception.

 <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><span>Queue a mutation record</span> of "<code>characterData</code>"
 for <var title>node</var> with oldValue <var title>node</var>'s
 <span title=concept-CD-data>data</span>.

 <li><p>Insert <var title>data</var> into <var title>node</var>'s
 <span title=concept-CD-data>data</span> after <var title>offset</var>
 <span data-anolis-spec=webidl title="code unit">code units</span>.

 <li><p>Let <var title>delete offset</var> be <var title>offset</var> plus
 the number of
 <span data-anolis-spec=webidl title="code unit">code units</span> in
 <var title>data</var>.

 <li><p>Starting from <var title>delete offset</var>
 <span data-anolis-spec=webidl title="code unit">code units</span>, remove
 <var title>count</var>
 <span data-anolis-spec=webidl title="code unit">code units</span> from
 <var title>node</var>'s <span title=concept-CD-data>data</span>.

 <!-- ranges -->
 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-start-node>start node</span> is
 <var title>node</var> and
 <span title=concept-range-start-offset>start offset</span> is greater than
 <var title>offset</var> but less than or equal to <var title>offset</var>
 plus <var title>count</var>, set its
 <span title=concept-range-start-offset>start offset</span> to
 <var title>offset</var>.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-end-node>end node</span> is
 <var title>node</var> and
 <span title=concept-range-end-offset>end offset</span> is greater than
 <var title>offset</var> but less than or equal to <var title>offset</var>
 plus <var title>count</var>, set its
 <span title=concept-range-end-offset>end offset</span> to
 <var title>offset</var>.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-start-node>start node</span> is
 <var title>node</var> and
 <span title=concept-range-start-offset>start offset</span> is greater than
 <var title>offset</var> plus <var title>count</var>, increase its
 <span title=concept-range-start-offset>start offset</span> by the number of
 <span data-anolis-spec=webidl title="code unit">code units</span> in
 <var title>data</var>, then decrease it by <var title>count</var>.

 <li><p>For each <span title=concept-range>range</span> whose
 <span title=concept-range-end-node>end node</span> is
 <var title>node</var> and
 <span title=concept-range-end-offset>end offset</span> is greater than
 <var title>offset</var> plus <var title>count</var>, increase its
 <span title=concept-range-end-offset>end offset</span> by the number of
 <span data-anolis-spec=webidl title="code unit">code units</span> 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 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>length</code> attribute value.

 <li><p>If <var title>offset</var> is greater than <var title>length</var>,
 <span title=concept-throw>throw</span> an
 "<code>IndexSizeError</code>" exception.

 <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
 <span data-anolis-spec=webidl title="code unit">code units</span> from the
 <var title>offset</var><sup>th</sup>
 <span data-anolis-spec=webidl>code unit</span> to the end of
 <var title>node</var>'s <span title=concept-CD-data>data</span>, and then
 terminate these steps.

 <li><p>Return a string whose value is the
 <span data-anolis-spec=webidl title="code unit">code units</span> from the
 <var title>offset</var><sup>th</sup>
 <span data-anolis-spec=webidl>code unit</span> to the
 <var title>offset</var>+<var title>count</var><sup>th</sup>
 <span data-anolis-spec=webidl>code unit</span> in <var title>node</var>'s
 <span title=concept-CD-data>data</span>.
</ol>

<p>The <dfn title=dom-CharacterData-data><code>data</code></dfn> attribute
must return <span title=concept-CD-data>data</span>, and on setting, must
<span title=concept-CD-replace>replace data</span> with node
<span>context object</span> offset 0, count
<code title=dom-CharacterData-length>length</code> attribute value, and data
new value.

<p>The <dfn title=dom-CharacterData-length><code>length</code></dfn>
attribute must return the number of
<span data-anolis-spec=webidl title="code unit">code units</span> in
<span title=concept-CD-data>data</span>.

<p>The
<dfn title=dom-CharacterData-substringData><code>substringData(<var title>offset</var>, <var title>count</var>)</code></dfn>
method must <span title=concept-CD-substring>substring data</span> with node
<span>context object</span>, offset <var title>offset</var>, and count
<var title>count</var>.

<p>The
<dfn title=dom-CharacterData-appendData><code>appendData(<var title>data</var>)</code></dfn>
method must <span title=concept-CD-replace>replace data</span> with node
<span>context object</span>, offset
<code title=dom-CharacterData-length>length</code> attribute value, count 0,
and data <var title>data</var>.

<p>The
<dfn title=dom-CharacterData-insertData><code>insertData(<var title>offset</var>, <var title>data</var>)</code></dfn>
method must <span title=concept-CD-replace>replace data</span> with node
<span>context object</span>, offset <var title>offset</var>, count 0, and
data <var title>data</var>.

<p>The
<dfn title=dom-CharacterData-deleteData><code>deleteData(<var title>offset</var>, <var title>count</var>)</code></dfn>
method must <span title=concept-CD-replace>replace data</span> with node
<span>context object</span>, offset <var title>offset</var>, count
<var title>count</var>, and data the empty string.

<p>The
<dfn title=dom-CharacterData-replaceData><code>replaceData(<var title>offset</var>, <var title>count</var>, <var title>data</var>)</code></dfn>
method must <span title=concept-CD-replace>replace data</span> with node
<span>context object</span>, offset <var title>offset</var>, count
<var title>count</var>, and data <var title>data</var>.


<h3>Interface <code>Text</code></h3>
<pre class=idl>[<span title=dom-Text>Constructor</span>(optional DOMString <var title>data</var> = "")]
interface <dfn>Text</dfn> : <span>CharacterData</span> {
  [NewObject] <span>Text</span> <span title=dom-Text-splitText>splitText</span>(unsigned long <var title>offset</var>);
  readonly attribute DOMString <span title=dom-Text-wholeText>wholeText</span>;
};</pre>

<dl class=domintro>
 <dt><code><var title>text</var> = new <span title=dom-DocumentFragment>Text</span>([<var title>data</var> = ""])</code>
 <dd><p>Returns a new <code>Text</code> <span title=concept-node>node</span> whose
 <span title=concept-CD-data>data</span> is <var title>data</var>.

 <dt><code><var title>text</var> . <span title=dom-Text-splitText>splitText</span>(<var title>offset</var>)</code>
 <dd><p>Splits <span title=concept-CD-data>data</span> at the given
 <var title>offset</var> and returns the remainder as <code>Text</code>
 <span title=concept-node>node</span>.

 <dt><code><var title>text</var> . <span title=dom-Text-wholeText>wholeText</span></code>
 <dd><p>Returns the combined <span title=concept-CD-data>data</span> of all direct
 <code>Text</code> <span title=concept-node>node</span>
 <span title=concept-tree-sibling>siblings</span>.
</dl>

<p>The <dfn title=dom-Text><code>Text(<var title>data</var>)</code></dfn> constructor
must return a new <code>Text</code> <span title=concept-node>node</span> whose
<span title=concept-CD-data>data</span> is <var title>data</var> and
<span title=concept-node-document>node document</span> is the global object's associated
<span title=concept-document>document</span>.

<p>To <dfn title=concept-Text-split>split</dfn> a <code>Text</code>
<span title=concept-node>node</span> <var title>node</var> with offset
<var title>offset</var>, run these steps:

<ol>
 <li><p>Let <var title>length</var> be <var title>node</var>'s
 <code title=dom-CharacterData-length>length</code> attribute value.

 <li><p>If <var title>offset</var> is greater than <var title>length</var>,
 <span title=concept-throw>throw</span> an
 "<code>IndexSizeError</code>" exception.

 <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
 <span title=concept-CD-substring>substringing data</span> 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>Text</code>
 <span title=concept-node>node</span>, with the same
 <span title=concept-node-document>node document</span> as
 <var title>node</var>. Set <var title>new node</var>'s
 <span title=concept-CD-data>data</span> to <var title>new data</var>.

 <li><p>Let <var title>parent</var> be <var title>node</var>'s
 <span title=concept-tree-parent>parent</span>.

 <li>
  <p>If <var title>parent</var> is not null, run these substeps:

  <ol>
   <li><p><span title=concept-node-insert>Insert</span>
   <var title>new node</var> into <var title>parent</var> before
   <var title>node</var>'s
   <span title=concept-tree-next-sibling>next sibling</span>.
   <!-- 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 <span title=concept-range>range</span> whose
   <span title=concept-range-start-node>start node</span> is
   <var title>node</var> and
   <span title=concept-range-start-offset>start offset</span> is greater than
   <var title>offset</var>, set its
   <span title=concept-range-start-node>start node</span> to
   <var title>new node</var> and decrease its
   <span title=concept-range-start-offset>start offset</span> by
   <var title>offset</var>.

   <li><p>For each <span title=concept-range>range</span> whose
   <span title=concept-range-end-node>end node</span> is
   <var title>node</var> and
   <span title=concept-range-end-offset>end offset</span> is greater than
   <var title>offset</var>, set its
   <span title=concept-range-end-node>end node</span> to
   <var title>new node</var> and decrease its
   <span title=concept-range-end-offset>end offset</span> by
   <var title>offset</var>.

   <!-- This shit is complicated:
        https://www.w3.org/Bugs/Public/show_bug.cgi?id=19968 -->
   <li><p>For each <span title=concept-range>range</span> whose
   <span title=concept-range-start-node>start node</span> is
   <var title>parent</var> and
   <span title=concept-range-start-offset>start offset</span> is equal to
   the <span title=concept-tree-index>index</span> of
   <var title>node</var> + 1, increase its
   <span title=concept-range-start-offset>start offset</span> by one.

   <li><p>For each <span title=concept-range>range</span> whose
   <span title=concept-range-end-node>end node</span> is
   <var title>parent</var> and
   <span title=concept-range-end-offset>end offset</span> is equal to
   the <span title=concept-tree-index>index</span> of
   <var title>node</var> + 1, increase its
   <span title=concept-range-end-offset>end offset</span> by one.
  </ol>

 <li><p><span title=concept-CD-replace>Replace data</span> 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 <span title=concept-range>range</span> whose
   <span title=concept-range-start-node>start node</span> is
   <var title>node</var> and
   <span title=concept-range-start-offset>start offset</span> is greater
   than <var title>offset</var>, set its
   <span title=concept-range-start-offset>start offset</span> to
   <var title>offset</var>.

   <li><p>For each <span title=concept-range>range</span> whose
   <span title=concept-range-end-node>end node</span> is
   <var title>node</var> and
   <span title=concept-range-end-offset>end offset</span> is greater than
   <var title>offset</var>, set its
   <span title=concept-range-end-offset>end offset</span> to
   <var title>offset</var>.
  </ol>

 <li><p>Return <var title>new node</var>.
</ol>

<p>The
<dfn title=dom-Text-splitText><code>splitText(<var>offset</var>)</code></dfn>
method must <span title=concept-Text-split>split</span> the
<span>context object</span> with offset <var title>offset</var>.


<p>The <dfn>contiguous <code>Text</code> nodes</dfn> of a node are the node
itself, the
<span title=concept-tree-previous-sibling>previous sibling</span>
<code>Text</code> node (if any) and its
<span>contiguous <code>Text</code> nodes</span>, and the
<span title=concept-tree-next-sibling>next sibling</span> <code>Text</code>
node (if any) and its <span>contiguous <code>Text</code> nodes</span>,
avoiding any duplicates.

<p>The <dfn title=dom-Text-wholeText><code>wholeText</code></dfn>
attribute must return a concatenation of the
<span title=concept-CD-data>data</span> of the
<span>contiguous <code>Text</code> nodes</span> of the
<span>context object</span>, in
<span title=concept-tree-order>tree order</span>.


<h3>Interface <code>ProcessingInstruction</code></h3>
<pre class=idl>interface <dfn>ProcessingInstruction</dfn> : <span>CharacterData</span> {
  readonly attribute DOMString <span title=dom-ProcessingInstruction-target>target</span>;
};</pre>

<p><code>ProcessingInstruction</code> <span title=concept-node>nodes</span>
have an associated <dfn title=concept-PI-target>target</dfn>.

<p>The <dfn title=dom-ProcessingInstruction-target><code>target</code></dfn>
attribute must return the <span title=concept-PI-target>target</span>.


<h3>Interface <code>Comment</code></h3>
<pre class=idl>[<span title=dom-Comment>Constructor</span>(optional DOMString <var title>data</var> = "")]
interface <dfn>Comment</dfn> : <span>CharacterData</span> {
};</pre>

<dl class=domintro>
 <dt><code><var title>comment</var> = new <span title=dom-Comment>Comment</span>([<var title>data</var> = ""])</code>
 <dd><p>Returns a new <code>Comment</code> <span title=concept-node>node</span> whose
 <span title=concept-CD-data>data</span> is <var title>data</var>.
</dl>

<p>The <dfn title=dom-Comment><code>Comment(<var title>data</var>)</code></dfn>
constructor must return a new <code>Comment</code> <span title=concept-node>node</span>
whose <span title=concept-CD-data>data</span> is <var title>data</var> and
<span title=concept-node-document>node document</span> is the global object's associated
<span title=concept-document>document</span>.


<h2>Ranges</h2>

<h3>Introduction to "DOM Ranges"</h3>

<p>A <code>Range</code> object (<span title=concept-range>range</span>)
represents a sequence of content within a
<span title=concept-node-tree>node tree</span>. Each
<span title=concept-range>range</span> has a
<span title=concept-range-start>start</span> and an
<span title=concept-range-end>end</span> which are
<span title=concept-range-bp>boundary points</span>. A
<span title=concept-range-bp>boundary point</span> is a tuple consisting of
a <span title=concept-node>node</span> and a non-negative numeric
<span title=concept-range-bp-offset>offset</span>. So in other words, a
<span title=concept-range>range</span> represents a piece of content within
a <span title=concept-node-tree>node tree</span> between two
<span title=concept-range-bp>boundary points</span>.

<p><span title=concept-range>Ranges</span> are frequently used in editing
for selecting and copying content.

<ul class="domTree">
 <li class="t1"><span title=concept-element>Element</span>: <code>p</code>
  <ul>
   <li class="t1"><span title=concept-element>Element</span>: <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>Text</code>: <span title>&nbsp;CSS 2.1 syndata is&nbsp;</span>
   <li class="t1"><span title=concept-element>Element</span>: <code>em</code>
    <ul>
     <li class="t3"><code>Text</code>: <span title>awesome</span>
    </ul>
   <li class="t3"><code>Text</code>: <span title>!</span>
  </ul>
</ul>
<!-- http://w3cmemes.tumblr.com/post/35332222321/css-2-1-syndata-is-awesome -->

<p>In the <span title=concept-node-tree>node tree</span> above, a
<span title=concept-range>range</span> can be used to represent the sequence
“syndata is awes”. Assuming <var title>p</var> is assigned to the
<code>p</code> <span title=concept-element>element</span>, and
<var title>em</var> to the <code>em</code>
<span title=concept-element>element</span>, 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><span title=concept-attribute>Attributes</span> such as
<code>src</code> and <code>alt</code> in the
<span title=concept-node-tree>node tree</span> above cannot be represented
by a <span title=concept-range>range</span>. The
<span title=concept-range>ranges</span> concept is only useful for
<span title=concept-node>nodes</span>.

<p><span title=concept-range>Ranges</span> are affected by mutations to the
<span title=concept-node-tree>node tree</span>. Such mutations will not
invalidate a <span title=concept-range>range</span> and will try to ensure
that the <span title=concept-range>range</span> still represents the same
piece of content. Necessarily, a <span title=concept-range>range</span>
might itself be modified as part of the mutation to the
<span title=concept-node-tree>node tree</span> when e.g. part of the content
it represents is mutated.

<p class=note>See the <span title=concept-node-insert>insert</span> and
<span title=concept-node-remove>remove</span> algorithms, the
<code title=dom-Node-normalize>normalize()</code> method, and the
<span title=concept-CD-replace>replace data</span> and
<span title=concept-Text-split>split</span> algorithms for the hairy
details.


<h3>Interface <code>Range</code></h3>
<pre class=idl>[<span title=dom-Range>Constructor</span>]
interface <dfn>Range</dfn> {
  readonly attribute <span>Node</span> <span title=dom-Range-startContainer>startContainer</span>;
  readonly attribute unsigned long <span title=dom-Range-startOffset>startOffset</span>;
  readonly attribute <span>Node</span> <span title=dom-Range-endContainer>endContainer</span>;
  readonly attribute unsigned long <span title=dom-Range-endOffset>endOffset</span>;
  readonly attribute boolean <span title=dom-Range-collapsed>collapsed</span>;
  readonly attribute <span>Node</span> <span title=dom-Range-commonAncestorContainer>commonAncestorContainer</span>;

  void <span title=dom-Range-setStart>setStart</span>(<span>Node</span> <var title>node</var>, unsigned long <var title>offset</var>);
  void <span title=dom-Range-setEnd>setEnd</span>(<span>Node</span> <var title>node</var>, unsigned long <var title>offset</var>);
  void <span title=dom-Range-setStartBefore>setStartBefore</span>(<span>Node</span> <var title>node</var>);
  void <span title=dom-Range-setStartAfter>setStartAfter</span>(<span>Node</span> <var title>node</var>);
  void <span title=dom-Range-setEndBefore>setEndBefore</span>(<span>Node</span> <var title>node</var>);
  void <span title=dom-Range-setEndAfter>setEndAfter</span>(<span>Node</span> <var title>node</var>);
  void <span title=dom-Range-collapse>collapse</span>(optional boolean <var title>toStart</var> = false);
  void <span title=dom-Range-selectNode>selectNode</span>(<span>Node</span> <var title>node</var>);
  void <span title=dom-Range-selectNodeContents>selectNodeContents</span>(<span>Node</span> <var title>node</var>);

  const unsigned short <dfn title=dom-CompareHow-START_TO_START>START_TO_START</dfn> = 0;
  const unsigned short <dfn title=dom-CompareHow-START_TO_END>START_TO_END</dfn> = 1;
  const unsigned short <dfn title=dom-CompareHow-END_TO_END>END_TO_END</dfn> = 2;
  const unsigned short <dfn title=dom-CompareHow-END_TO_START>END_TO_START</dfn> = 3;
  short <span title=dom-Range-compareBoundaryPoints>compareBoundaryPoints</span>(unsigned short <var title>how</var>, <span>Range</span> <var title>sourceRange</var>);

  void <span title=dom-Range-deleteContents>deleteContents</span>();
  [NewObject] <span>DocumentFragment</span> <span title=dom-Range-extractContents>extractContents</span>();
  [NewObject] <span>DocumentFragment</span> <span title=dom-Range-cloneContents>cloneContents</span>();
  void <span title=dom-Range-insertNode>insertNode</span>(<span>Node</span> <var title>node</var>);
  void <span title=dom-Range-surroundContents>surroundContents</span>(<span>Node</span> <var title>newParent</var>);

  [NewObject] <span>Range</span> <span title=dom-Range-cloneRange>cloneRange</span>();
  void <span title=dom-Range-detach>detach</span>();

  boolean <span title=dom-Range-isPointInRange>isPointInRange</span>(<span>Node</span> <var title>node</var>, unsigned long <var title>offset</var>);
  short <span title=dom-Range-comparePoint>comparePoint</span>(<span>Node</span> <var title>node</var>, unsigned long <var title>offset</var>);

  boolean <span title=dom-Range-intersectsNode>intersectsNode</span>(<span>Node</span> <var title>node</var>);

  <span title=dom-Range-stringifier>stringifier</span>;
};</pre>

<p><code>Range</code> objects are simply known as
<dfn title=concept-range>ranges</dfn>.

<p>A <dfn title=concept-range-bp>boundary point</dfn> is a
(<span title=concept-node>node</span>,
<dfn title=concept-range-bp-offset>offset</dfn>) tuple, where
<span title=concept-range-bp-offset>offset</span> is a non-negative
integer.

<p class=note>Generally speaking, a
<span title=concept-range-bp>boundary point</span>'s
<span title=concept-range-bp-offset>offset</span> will be between zero and
the <span title=concept-range-bp>boundary point</span>'s
<span title=concept-node>node</span>
<span title=concept-node-length>length</span>, inclusive. Algorithms that
modify a <span title=concept-tree>tree</span> (in particular the
<span title=concept-node-insert>insert</span>,
<span title=concept-node-remove>remove</span>,
<span title=concept-CD-replace>replace data</span>, and
<span title=concept-Text-split>split</span> algorithms) also modify
<span title=concept-range>ranges</span> associated with that
<span title=concept-tree>tree</span>.

<p>If the two <span title=concept-node>nodes</span> of
<span title=concept-range-bp>boundary points</span>
(<var title>node A</var>, <var title>offset A</var>) and
(<var title>node B</var>, <var title>offset B</var>) have the same
<span title=concept-tree-root>root</span>, the
<dfn title=concept-range-bp-position>position</dfn> of the first relative to
the second is either <dfn title=concept-range-bp-before>before</dfn>,
<dfn title=concept-range-bp-equal>equal</dfn>, or
<dfn 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 <span title=concept-range-bp-equal>equal</span> if
 <var title>offset A</var> is the same as <var title>offset B</var>,
 <span title=concept-range-bp-before>before</span> if
 <var title>offset A</var> is less than <var title>offset B</var>, and
 <span title=concept-range-bp-after>after</span> if
 <var title>offset A</var> is greater than <var title>offset B</var>.

 <li><p>If <var title>node A</var> is
 <span title=concept-tree-following>following</span>
 <var title>node B</var>, compute the
 <span title=concept-range-bp-position>position</span> 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
 <span title=concept-range-bp-before>before</span>, return
 <span title=concept-range-bp-after>after</span>. If it is
 <span title=concept-range-bp-after>after</span>, return
 <span title=concept-range-bp-before>before</span>.

 <li>
  <p>If <var title>node A</var> is an
  <span title=concept-tree-ancestor>ancestor</span> 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
   <span title=concept-tree-child>child</span> of <var title>node A</var>,
   set <var title>child</var> to its
   <span title=concept-tree-parent>parent</span>.

   <li><p>If the <span title=concept-tree-index>index</span> of
   <var title>child</var> is less than <var title>offset A</var>, return
   <span title=concept-range-bp-after>after</span>.
  </ol>

 <li><p>Return <span title=concept-range-bp-before>before</span>.
</ol>

<p>Each <span title=concept-range>range</span> has two associated
<span title=concept-range-bp>boundary points</span> — a
<dfn title=concept-range-start>start</dfn> and
<dfn title=concept-range-end>end</dfn>.

<p>For convenience, <dfn title=concept-range-start-node>start node</dfn> is
<span title=concept-range-start>start</span>'s
<span title=concept-node>node</span>,
<dfn title=concept-range-start-offset>start offset</dfn> is
<span title=concept-range-start>start</span>'s
<span title=concept-range-bp-offset>offset</span>,
<dfn title=concept-range-end-node>end node</dfn> is
<span title=concept-range-end>end</span>'s
<span title=concept-node>node</span>,  and
<dfn title=concept-range-end-offset>end offset</dfn> is
<span title=concept-range-end>end</span>'s
<span title=concept-range-bp-offset>offset</span>.

<p>The <dfn title=concept-range-root>root</dfn> of a
<span title=concept-range>range</span> is the
<span title=concept-tree-root>root</span> of its
<span title=concept-range-start-node>start node</span>.
<!-- start and end have an identical root -->

<p>A <span title=concept-node>node</span> <var title>node</var> is
<dfn>contained</dfn> in a <span title=concept-range>range</span>
<var title>range</var> if <var title>node</var>'s
<span title=concept-tree-root>root</span> is
the same as <var title>range</var>'s
<span title=concept-range-root>root</span>, and (<var title>node</var>, 0)
is <span title=concept-range-bp-after>after</span> <var title>range</var>'s
<span title=concept-range-start>start</span>, and (<var title>node</var>,
<span title=concept-node-length>length</span> of <var title>node</var>) is
<span title=concept-range-bp-before>before</span> <var title>range</var>'s
<span title=concept-range-end>end</span>.

<p>A <span title=concept-node>node</span> is <dfn>partially contained</dfn>
in a <span title=concept-range>range</span> if it is an
<span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of the
<span title=concept-range>range</span>'s
<span title=concept-range-start-node>start node</span> but not its
<span title=concept-range-end-node>end node</span>, 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
  <span title=concept-range>range</span> consists of all
  <span>contained</span> <span title=concept-node>nodes</span>, plus
  possibly some of the contents of the
  <span title=concept-range-start-node>start node</span> and
  <span title=concept-range-end-node>end node</span> if those are
  <code>Text</code>, <code>ProcessingInstruction</code>, or
  <code>Comment</code> <span title=concept-node>nodes</span>.

  <li><p>The <span title=concept-node>nodes</span> that are contained in a
  <span title=concept-range>range</span> will generally not be contiguous,
  because the <span title=concept-tree-parent>parent</span> of a
  <span>contained</span> <span title=concept-node>node</span> will not
  always be <span>contained</span>.

  <li><p>However, the <span title=concept-tree-descendant>descendants</span>
  of a <span>contained</span> <span title=concept-node>node</span> are
  <span>contained</span>, and if two
  <span title=concept-tree-sibling>siblings</span> are
  <span>contained</span>, so are any
  <span title=concept-tree-sibling>siblings</span> that lie between them.

  <li><p>The first <span>contained</span>
  <span title=concept-node>node</span> (if there are any) will always be
  after the <span title=concept-range-start-node>start node</span>, and the
  last <span>contained</span> <span title=concept-node>node</span> will
  always be equal to or before the
  <span title=concept-range-end-node>end node</span>'s last
  <span title=concept-tree-descendant>descendant</span>.

  <li><p>The <span title=concept-range-start-node>start node</span> and
  <span title=concept-range-end-node>end node</span> of a
  <span title=concept-range>range</span> are never <span>contained</span>
  within it.

  <li><p>There exists some partially contained
  <span title=concept-node>node</span> if and only if the
  <span title=concept-range-start-node>start node</span> and
  <span title=concept-range-end-node>end node</span> are different.

  <li><p>The
  <code title=dom-Range-commonAncestorContainer>commonAncestorContainer</code>
  attribute value is never <span>contained</span> or
  <span>partially contained</span>.

  <li>If the <span title=concept-range-start-node>start node</span> is an
  <span title=concept-tree-ancestor>ancestor</span> of the
  <span title=concept-range-end-node>end node</span>, the common
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> will
  be the <span title=concept-range-start-node>start node</span>. Exactly one
  of its <span title=concept-tree-child>children</span> will be
  <span>partially contained</span>, and a
  <span title=concept-tree-child>child</span> will be <span>contained</span>
  if and only if it <span title=concept-tree-preceding>precedes</span> the
  <span>partially contained</span>
  <span title=concept-tree-child>child</span>. If the
  <span title=concept-range-end-node>end node</span> is an
  <span title=concept-tree-ancestor>ancestor</span> of the
  <span title=concept-range-start-node>start node</span>, the opposite
  holds.

  <li><p>If the <span title=concept-range-start-node>start node</span> is
  not an
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  the <span title=concept-range-end-node>end node</span>, nor vice versa,
  the common
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> will
  be distinct from both of them. Exactly two of its
  <span title=concept-tree-child>children</span> will be
  <span>partially contained</span>, and a
  <span title=concept-tree-child>child</span> 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 <span title=dom-Range>Range</span>()</code>
 <dd><p>Returns a new <span title=concept-range>range</span>.
</dl>

<p>The <dfn title=dom-Range><code>Range()</code></dfn> constructor must return a new
<span title=concept-range>range</span> with
(global object's associated <span title=concept-document>document</span>, 0) as its
<span title=concept-range-start>start</span> and
<span title=concept-range-end>end</span>.

<hr>

<dl class=domintro>
 <dt><var title>node</var> = <var title>range</var> . <code title=dom-Range-startContainer>startContainer</code>
 <dd><p>Returns <var title>range</var>'s
 <span title=concept-range-start-node>start node</span>.

 <dt><var title>offset</var> = <var title>range</var> . <code title=dom-Range-startOffset>startOffset</code>
 <dd><p>Returns <var title>range</var>'s
 <span title=concept-range-start-offset>start offset</span>.

 <dt><var title>node</var> = <var title>range</var> . <code title=dom-Range-endContainer>endContainer</code>
 <dd><p>Returns <var title>range</var>'s
 <span title=concept-range-end-node>end node</span>.

 <dt><var title>offset</var> = <var title>range</var> . <code title=dom-Range-endOffset>endOffset</code>
 <dd><p>Returns <var title>range</var>'s
 <span title=concept-range-end-offset>end offset</span>.

 <dt><var title>collapsed</var> = <var title>range</var> . <code title=dom-Range-collapsed>collapsed</code>
 <dd><p>Returns true if <var title>range</var>'s
 <span title=concept-range-start>start</span> and
 <span title=concept-range-end>end</span> are the same, and false otherwise.

 <dt><var title>container</var> = <var title>range</var> . <code title=dom-Range-commonAncestorContainer>commonAncestorContainer</code>
 <dd><p>Returns the <span title=concept-node>node</span>, furthest away from
 the <span title=concept-document>document</span>, that is an
 <span title=concept-tree-ancestor>ancestor</span> of both
 <var title>range</var>'s
 <span title=concept-range-start-node>start node</span> and
 <span title=concept-range-end-node>end node</span>.
</dl>

<p>The <dfn title=dom-Range-startContainer><code>startContainer</code></dfn>
attribute must return the
<span title=concept-range-start-node>start node</span>.

<p>The <dfn title=dom-Range-startOffset><code>startOffset</code></dfn>
attribute must return the
<span title=concept-range-start-offset>start offset</span>.

<p>The <dfn title=dom-Range-endContainer><code>endContainer</code></dfn>
attribute must return the
<span title=concept-range-end-node>end node</span>.

<p>The <dfn title=dom-Range-endOffset><code>endOffset</code></dfn>
attribute must return the
<span title=concept-range-end-offset>end offset</span>.

<p>The <dfn title=dom-Range-collapsed><code>collapsed</code></dfn> attribute
must return true if <span title=concept-range-start>start</span> is the same
as <span title=concept-range-end>end</span>, and false otherwise.

<p>The
<dfn title=dom-Range-commonAncestorContainer><code>commonAncestorContainer</code></dfn>
attribute must run these steps:

<ol>
 <li><p>Let <var title>container</var> be
 <span title=concept-range-start-node>start node</span>.

 <li><p>While <var title>container</var> is not an
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
 <span title=concept-range-end-node>end node</span>, let
 <var title>container</var> be <var title>container</var>'s
 <span title=concept-tree-parent>parent</span>.

 <li><p>Return <var title>container</var>.
</ol>

<hr>

<p>To <dfn title=concept-range-bp-set>set the start or end</dfn> of a
<var title>range</var> to a
<span title=concept-range-bp>boundary point</span>
(<var title>node</var>, <var title>offset</var>), run these steps:

<ol>
 <li><p>If <var title>node</var> is a
 <span title=concept-doctype>doctype</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.

 <li><p>If <var title>offset</var> is greater than
 <var title>node</var>'s <span title=concept-node-length>length</span>,
 <span title=concept-throw>throw</span> an
 "<code>IndexSizeError</code>" exception.

 <li><p>Let <var title>bp</var> be the
 <span title=concept-range-bp>boundary point</span>
 (<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
     <span title=concept-range-bp-after>after</span> the
     <var title>range</var>'s <span title=concept-range-end>end</span>, or
     if <var title>range</var>'s
     <span title=concept-range-root>root</span> is not equal to
     <var title>node</var>'s <span title=concept-tree-root>root</span>, set
     <var title>range</var>'s <span title=concept-range-end>end</span> to
     <var title>bp</var>.

     <li><p>Set <var title>range</var>'s
     <span title=concept-range-start>start</span> 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
     <span title=concept-range-bp-before>before</span> the
     <var title>range</var>'s <span title=concept-range-start>start</span>,
     or if <var title>range</var>'s
     <span title=concept-range-root>root</span> is not equal to
     <var title>node</var>'s <span title=concept-tree-root>root</span>, set
     <var title>range</var>'s <span title=concept-range-start>start</span>
     to <var title>bp</var>.

     <li><p>Set <var title>range</var>'s
     <span title=concept-range-end>end</span> to <var title>bp</var>.
    </ol>
  </dl>
</ol>

<p>The
<dfn title=dom-Range-setStart><code>setStart(<var>node</var>, <var>offset</var>)</code></dfn>
method must <span title=concept-range-bp-set>set the start</span> of the
<span>context object</span> to
<span title=concept-range-bp>boundary point</span>
(<var title>node</var>, <var title>offset</var>).

<p>The
<dfn title=dom-Range-setEnd><code>setEnd(<var>node</var>, <var>offset</var>)</code></dfn>
method must <span title=concept-range-bp-set>set the end</span> of the
<span>context object</span> to
<span title=concept-range-bp>boundary point</span>
(<var title>node</var>, <var title>offset</var>).

<p>The
<dfn 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
 <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>parent</var> is null,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.

 <li><p><span title=concept-range-bp-set>Set the start</span> of the
 <span>context object</span> to
 <span title=concept-range-bp>boundary point</span>
 (<var title>parent</var>, <var title>node</var>'s
 <span title=concept-tree-index>index</span>).
</ol>

<p>The
<dfn 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
 <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>parent</var> is null,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.

 <li><p><span title=concept-range-bp-set>Set the start</span> of the
 <span>context object</span> to
 <span title=concept-range-bp>boundary point</span>
 (<var title>parent</var>, <var title>node</var>'s
 <span title=concept-tree-index>index</span> plus one).
</ol>

<p>The
<dfn 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
 <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>parent</var> is null,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.

 <li><p><span title=concept-range-bp-set>Set the end</span> of the
 <span>context object</span> to
 <span title=concept-range-bp>boundary point</span>
 (<var title>parent</var>, <var title>node</var>'s
 <span title=concept-tree-index>index</span>).
</ol>

<p>The
<dfn 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
 <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>parent</var> is null,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.

 <li><p><span title=concept-range-bp-set>Set the end</span> of the
 <span>context object</span> to
 <span title=concept-range-bp>boundary point</span>
 (<var title>parent</var>, <var title>node</var>'s
 <span title=concept-tree-index>index</span> plus one).
</ol>


<p>The
<dfn title=dom-Range-collapse><code>collapse(<var>toStart</var>)</code></dfn>
method must if <var title>toStart</var> is true, set
<span title=concept-range-end>end</span> to
<span title=concept-range-start>start</span>, and set
<span title=concept-range-start>start</span> to
<span title=concept-range-end>end</span> otherwise.

<p>To <dfn title=concept-range-select>select</dfn> a <span title=concept-node>node</span>
<var title>node</var> within a <span title=concept-range>range</span>
<var title>range</var>, run these steps:

<ol>
 <li><p>Let <var title>parent</var> be <var title>node</var>'s
 <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>parent</var> is null, <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>".

 <li><p>Let <var title>index</var> be <var title>node</var>'s
 <span title=concept-tree-index>index</span>.

 <li><p>Set <var title>range</var>'s <span title=concept-range-start>start</span> to
 <span title=concept-range-bp>boundary point</span>
 (<var title>parent</var>, <var title>index</var>).

 <li><p>Set <var title>range</var>'s <span title=concept-range-end>end</span> to
 <span title=concept-range-bp>boundary point</span>
 (<var title>parent</var>, <var title>index</var> plus one).
</ol>

<p>The
<dfn title=dom-Range-selectNode><code>selectNode(<var>node</var>)</code></dfn>
method must <span title=concept-range-select>select</span> <var title>node</var> within
<span>context object</span>.

<p>The
<dfn title=dom-Range-selectNodeContents><code>selectNodeContents(<var>node</var>)</code></dfn>
method must run these steps:

<ol>
 <li><p>If <var title>node</var> is a
 <span title=concept-doctype>doctype</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>".

 <li><p>Let <var title>length</var> be the
 <span title=concept-node-length>length</span> of <var title>node</var>.

 <li><p>Set <span title=concept-range-start>start</span> to the
 <span title=concept-range-bp>boundary point</span>
 (<var title>node</var>, 0).

 <li><p>Set <span title=concept-range-end>end</span> to the
 <span title=concept-range-bp>boundary point</span>
 (<var title>node</var>, <var title>length</var>).
</ol>

<hr>

<p>The
<dfn 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>START_TO_START</code>,
   <li><code title=dom-CompareHow-START_TO_END>START_TO_END</code>,
   <li><code title=dom-CompareHow-END_TO_END>END_TO_END</code>, and
   <li><code title=dom-CompareHow-END_TO_START>END_TO_START</code>,
  </ul>
  <p><span title=concept-throw>throw</span> a
  "<code>NotSupportedError</code>" exception.
 <!--
 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 <span>context object</span>'s
 <span title=concept-range-root>root</span> is not the same as
 <var title>sourceRange</var>'s <span title=concept-range-root>root</span>,
 <span title=concept-throw>throw</span> a
 "<code>WrongDocumentError</code>" exception.

 <li>
  <p>If <var title>how</var> is:
  <dl class=switch>
   <dt><code title=dom-CompareHow-START_TO_START>START_TO_START</code>:
   <dd>
    <p>Let <var title>this point</var> be the <span>context object</span>'s
    <span title=concept-range-start>start</span>.
    <p>Let <var title>other point</var> be <var title>sourceRange</var>'s
    <span title=concept-range-start>start</span>.

   <dt><code title=dom-CompareHow-START_TO_END>START_TO_END</code>:
   <dd>
    <p>Let <var title>this point</var> be the <span>context object</span>'s
    <span title=concept-range-end>end</span>.
    <p>Let <var title>other point</var> be <var title>sourceRange</var>'s
    <span title=concept-range-start>start</span>.

    <dt><code title=dom-CompareHow-END_TO_END>END_TO_END</code>:
    <dd>
     <p>Let <var title>this point</var> be the <span>context object</span>'s
     <span title=concept-range-end>end</span>.
     <p>Let <var title>other point</var> be <var title>sourceRange</var>'s
     <span title=concept-range-end>end</span>.

    <dt><code title=dom-CompareHow-END_TO_START>END_TO_START</code>:
    <dd>
     <p>Let <var title>this point</var> be the <span>context object</span>'s
     <span title=concept-range-start>start</span>.
     <p>Let <var title>other point</var> be <var title>sourceRange</var>'s
     <span title=concept-range-end>end</span>.
   </dl>

  <li>
   <p>If the <span title=concept-range-bp-position>position</span> of
   <var title>this point</var> relative to <var title>other point</var> is

   <dl class=switch>
    <dt><span title=concept-range-bp-before>before</span>
    <dd>Return &minus;1.

    <dt><span title=concept-range-bp-equal>equal</span>
    <dd>Return 0.

    <dt><span title=concept-range-bp-after>after</span>
    <dd>Return 1.
   </dl>
</ol>

<p>The <dfn title=dom-Range-deleteContents><code>deleteContents()</code></dfn>
method must run these steps:

<ol>
 <li><p>If <span title=concept-range-start>start</span> equals
 <span title=concept-range-end>end</span>, 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
 <span>context object</span>'s
 <span title=concept-range-start-node>start node</span>,
 <span title=concept-range-start-offset>start offset</span>,
 <span title=concept-range-end-node>end node</span>, and
 <span title=concept-range-end-offset>end offset</span>, 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>Text</code>, <code>ProcessingInstruction</code>, or
 <code>Comment</code> <span title=concept-node>node</span>,
 <span title=concept-CD-replace>replace data</span> 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
 <span title=concept-node>nodes</span> that are <span>contained</span> in
 the <span>context object</span>, in
 <span title=concept-tree-order>tree order</span>, omitting any
 <span title=concept-node>node</span> whose
 <span title=concept-tree-parent>parent</span> is also
 <span>contained</span> in the <span>context object</span>.

 <li><p>If <var title>original start node</var> is an
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> 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
   <span title=concept-tree-parent>parent</span> is not null and is not an
   <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
   <var title>original end node</var>, set <var title>reference node</var>
   to its <span title=concept-tree-parent>parent</span>.

   <li>
    <p>Set <var title>new node</var> to the
    <span title=concept-tree-parent>parent</span> of
    <var title>reference node</var>, and <var title>new offset</var> to one
    plus the <span title=concept-tree-index>index</span> of
    <var title>reference node</var>.

    <p class=note>If <var title>reference node</var>'s
    <span title=concept-tree-parent>parent</span> were null, it would be the
    <span title=concept-range-root>root</span> of the
    <span>context object</span>, so would be an
    <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> 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>Text</code>,
 <code>ProcessingInstruction</code>, or <code>Comment</code>
 <span title=concept-node>node</span>,
 <span title=concept-CD-replace>replace data</span> with node
 <var title>original start node</var>, offset
 <var title>original start offset</var>, count
 <var title>original start node</var>'s
 <span title=concept-node-length>length</span> 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 <span title=concept-tree-order>tree order</span>,
 <span title=concept-node-remove>remove</span> <var title>node</var> from
 its <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>original end node</var> is a <code>Text</code>,
 <code>ProcessingInstruction</code>, or <code>Comment</code>
 <span title=concept-node>node</span>,
 <span title=concept-CD-replace>replace data</span> 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 <span title=concept-range-start>start</span> and
 <span title=concept-range-end>end</span> to
 (<var title>new node</var>, <var title>new offset</var>).
</ol>

<p>To <dfn title=concept-range-extract>extract</dfn> a
<span title=concept-range>range</span> <var title>range</var>, run these steps:

<ol>
 <li><p>Let <var title>fragment</var> be a new <code>DocumentFragment</code>
 <span title=concept-node>node</span> whose
 <span title=concept-node-document>node document</span> is <var title>range</var>'s
 <span title=concept-range-start-node>start node</span>'s
 <span title=concept-node-document>node document</span>.

 <li><p>If <var title>range</var>'s <span title=concept-range-start>start</span> equals
 its <span title=concept-range-end>end</span>, return <var title>fragment</var>.
 <!-- 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
 <var title>range</var>'s <span title=concept-range-start-node>start node</span>,
 <span title=concept-range-start-offset>start offset</span>,
 <span title=concept-range-end-node>end node</span>, and
 <span title=concept-range-end-offset>end offset</span>, respectively.

 <li>
  <p>If <var title>original start node</var> equals
  <var title>original end node</var>, and they are a <code>Text</code>,
  <code>ProcessingInstruction</code>, or <code>Comment</code>
  <span title=concept-node>node</span>:

  <ol>
   <li><p>Let <var title>clone</var> be a
   <span title=concept-node-clone>clone</span> of
   <var title>original start node</var>.

   <li><p>Set the <span title=concept-CD-data>data</span> of
   <var title>clone</var> to the result of
   <span title=concept-CD-substring>substringing data</span> 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><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p><span title=concept-CD-replace>Replace data</span> 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>fragment</var>.
  </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
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
 <var title>original end node</var>, set <var title>common ancestor</var> to
 its own <span title=concept-tree-parent>parent</span>.

 <li><p>Let <var title>first partially contained child</var> be null.

 <li><p>If <var title>original start node</var> is <em>not</em> an
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
 <var title>original end node</var>, set <var title>first partially contained child</var>
 to the first <span title=concept-tree-child>child</span> of
 <var title>common ancestor</var> that is <span>partially contained</span> in
 <var title>range</var>.

 <li><p>Let <var title>last partially contained child</var> be null.

 <li>
  <p>If <var title>original end node</var> is <em>not</em> an
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  <var title>original start node</var>, set
  <var title>last partially contained child</var> to the last
  <span title=concept-tree-child>child</span> of <var title>common ancestor</var> that is
  <span>partially contained</span> in <var title>range</var>.

  <p class="note no-backref">These variable assignments do actually always make sense.
  For instance, if <var title>original start node</var> is not an
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  <var title>original end node</var>, <var title>original start node</var> is itself
  <span>partially contained</span> in <var title>range</var>, and so are all its
  <span title=concept-tree-ancestor>ancestors</span> up until a
  <span title=concept-tree-child>child</span> of <var title>common ancestor</var>.
  <var title>common ancestor</var> cannot be <var title>original start node</var>, because
  it has to be an <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  <var title>original end node</var>. The other case is similar. Also, notice that the two
  <span title=concept-tree-child>children</span> will never be equal if both are defined.

 <li><p>Let <var title>contained children</var> be a list of all
 <span title=concept-tree-child>children</span> of
 <var title>common ancestor</var> that are <span>contained</span> in
 <var title>range</var>, in <span title=concept-tree-order>tree order</span>.

 <li>
  <p>If any member of <var title>contained children</var> is a
  <span title=concept-doctype>doctype</span>, <span title=concept-throw>throw</span> a
  "<code>HierarchyRequestError</code>" exception.
  <!-- 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 no-backref">We do not have to worry about the first or last partially
  contained node, because a <span title=concept-doctype>doctype</span> 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
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> 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
   <span title=concept-tree-parent>parent</span> is not null and is not an
   <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
   <var title>original end node</var>, set <var title>reference node</var> to its
   <span title=concept-tree-parent>parent</span>.

   <li>
    <p>Set <var title>new node</var> to the
    <span title=concept-tree-parent>parent</span> of <var title>reference node</var>, and
    <var title>new offset</var> to one plus <var title>reference node</var>'s
    <span title=concept-tree-index>index</span>.

    <p class=note>If <var title>reference node</var>'s
    <span title=concept-tree-parent>parent</span> is null, it would be the
    <span title=concept-range-root>root</span> of <var title>range</var>, so would be an
    <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
    <var title>original end node</var>, and we could not 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>Text</code>, <code>ProcessingInstruction</code>, or
  <code>Comment</code> <span title=concept-node>node</span>:

  <p class=note>In this case, <var title>first partially contained child</var> is
  <var title>original start node</var>.

  <ol>
   <li><p>Let <var title>clone</var> be a
   <span title=concept-node-clone>clone</span> of
   <var title>original start node</var>.

   <li><p>Set the <span title=concept-CD-data>data</span> of
   <var title>clone</var> to the result of
   <span title=concept-CD-substring>substringing data</span> with node
   <var title>original start node</var>, offset
   <var title>original start offset</var>, and count
   <var title>original start node</var>'s
   <span title=concept-node-length>length</span> minus
   <var title>original start offset</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p><span title=concept-CD-replace>Replace data</span> with node
   <var title>original start node</var>, offset
   <var title>original start offset</var>, count
   <var title>original start node</var>'s
   <span title=concept-node-length>length</span> 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
   <span title=concept-node-clone>clone</span> of
   <var title>first partially contained child</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p>Let <var title>subrange</var> be a new <span title=concept-range>range</span>
   whose <span title=concept-range-start>start</span> is
   (<var title>original start node</var>, <var title>original start offset</var>) and
   whose <span title=concept-range-end>end</span> is
   (<var title>first partially contained child</var>, <var title>first partially contained child</var>'s <span title=concept-node-length>length</span>).

   <li><p>Let <var title>subfragment</var> be the result of
   <span title=concept-range-extract>extracting</span> <var title>subrange</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>subfragment</var> to
   <var title>fragment</var>.
  </ol>

 <li><p>For each <var title>contained child</var> in <var title>contained children</var>,
 <span title=concept-node-append>append</span> <var title>contained child</var> to
 <var title>fragment</var>.

 <li>
  <p>If <var title>last partially contained child</var> is a
  <code>Text</code>, <code>ProcessingInstruction</code>, or
  <code>Comment</code> <span title=concept-node>node</span>:

  <p class=note>In this case, <var title>last partially contained child</var> is
  <var title>original end node</var>.

  <ol>
   <li><p>Let <var title>clone</var> be a <span title=concept-node-clone>clone</span> of
   <var title>original end node</var>.

   <li><p>Set the <span title=concept-CD-data>data</span> of
   <var title>clone</var> to the result of
   <span title=concept-CD-substring>substringing data</span> with node
   <var title>original end node</var>, offset 0, and count
   <var title>original end offset</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p><span title=concept-CD-replace>Replace data</span> 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
   <span title=concept-node-clone>clone</span> of
   <var title>last partially contained child</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p>Let <var title>subrange</var> be a new <span title=concept-range>range</span>
   whose <span title=concept-range-start>start</span> is
   (<var title>last partially contained child</var>, 0) and whose
   <span title=concept-range-end>end</span> is
   (<var title>original end node</var>, <var title>original end offset</var>).

   <li><p>Let <var title>subfragment</var> be the result of
   <span title=concept-range-extract>extracting</span> <var title>subrange</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>subfragment</var> to
   <var title>fragment</var>.
  </ol>

 <li><p>Set <span title=concept-range-start>start</span> and
 <span title=concept-range-end>end</span> to
 (<var title>new node</var>, <var title>new offset</var>).

 <li><p>Return <var title>fragment</var>.
</ol>

<p>The <dfn title=dom-Range-extractContents><code>extractContents()</code></dfn> method
must return the result of <span title=concept-range-extract>extracting</span>
<span>context object</span>.

<p>To <dfn title=concept-range-clone>clone</dfn> a <span title=concept-range>range</span>
<var title>range</var>, run these steps:

<ol>
 <li><p>Let <var title>fragment</var> be a new <code>DocumentFragment</code>
 <span title=concept-node>node</span> whose
 <span title=concept-node-document>node document</span> is <var title>range</var>'s
 <span title=concept-range-start-node>start node</span>'s
 <span title=concept-node-document>node document</span>.

 <li><p>If <var title>range</var>'s <span title=concept-range-start>start</span> equals
 its <span title=concept-range-end>end</span>, return <var title>fragment</var>.
 <!-- 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
 <var title>range</var>'s <span title=concept-range-start-node>start node</span>,
 <span title=concept-range-start-offset>start offset</span>,
 <span title=concept-range-end-node>end node</span>, and
 <span title=concept-range-end-offset>end offset</span>, respectively.

 <li>
  <p>If <var title>original start node</var> equals
  <var title>original end node</var>, and they are a <code>Text</code>,
  <code>ProcessingInstruction</code>, or <code>Comment</code>
  <span title=concept-node>node</span>:

  <ol>
   <li><p>Let <var title>clone</var> be a <span title=concept-node-clone>clone</span> of
   <var title>original start node</var>.

   <li><p>Set the <span title=concept-CD-data>data</span> of
   <var title>clone</var> to the result of
   <span title=concept-CD-substring>substringing data</span> 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><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p>Return <var title>fragment</var>.
  </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
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
 <var title>original end node</var>, set
 <var title>common ancestor</var> to its own
 <span title=concept-tree-parent>parent</span>.

 <li><p>Let <var title>first partially contained child</var> be null.

 <li><p>If <var title>original start node</var> is <em>not</em> an
 <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
 <var title>original end node</var>, set <var title>first partially contained child</var>
 to the first <span title=concept-tree-child>child</span> of
 <var title>common ancestor</var> that is <span>partially contained</span> in
 <var title>range</var>.

 <li><p>Let <var title>last partially contained child</var> be null.

 <li>
  <p>If <var title>original end node</var> is <em>not</em> an
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  <var title>original start node</var>, set
  <var title>last partially contained child</var> be the last
  <span title=concept-tree-child>child</span> of <var title>common ancestor</var> that is
  <span>partially contained</span> in <var title>range</var>.

  <p class="note no-backref">These variable assignments do actually always make sense.
  For instance, if <var title>original start node</var> is not an
  <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  <var title>original end node</var>, <var title>original start node</var> is itself
  <span>partially contained</span> in <var title>range</var>, and so are all its
  <span title=concept-tree-ancestor>ancestors</span> up until a
  <span title=concept-tree-child>child</span> of <var title>common ancestor</var>.
  <var title>common ancestor</var> cannot be <var title>original start node</var>, because
  it has to be an <span title=concept-tree-inclusive-ancestor>inclusive ancestor</span> of
  <var title>original end node</var>. The other case is similar. Also, notice that the two
  <span title=concept-tree-child>children</span> will never be equal if both are defined.

 <li><p>Let <var title>contained children</var> be a list of all
 <span title=concept-tree-child>children</span> of
 <var title>common ancestor</var> that are <span>contained</span> in
 <var title>range</var>, in <span title=concept-tree-order>tree order</span>.

 <li>
  <p>If any member of <var title>contained children</var> is a
  <span title=concept-doctype>doctype</span>, <span title=concept-throw>throw</span> a
  "<code>HierarchyRequestError</code>" exception.

  <p class="note no-backref">We do not have to worry about the first or last partially
  contained node, because a <span title=concept-doctype>doctype</span> 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>first partially contained child</var> is a
  <code>Text</code>, <code>ProcessingInstruction</code>, or
  <code>Comment</code> <span title=concept-node>node</span>:

  <p class=note>In this case, <var title>first partially contained child</var> is
  <var title>original start node</var>.

  <ol>
   <li><p>Let <var title>clone</var> be a
   <span title=concept-node-clone>clone</span> of
   <var title>original start node</var>.

   <li><p>Set the <span title=concept-CD-data>data</span> of
   <var title>clone</var> to the result of
   <span title=concept-CD-substring>substringing data</span> with node
   <var title>original start node</var>, offset
   <var title>original start offset</var>, and count
   <var title>original start node</var>'s
   <span title=concept-node-length>length</span> minus
   <var title>original start offset</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</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
   <span title=concept-node-clone>clone</span> of
   <var title>first partially contained child</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p>Let <var title>subrange</var> be a new <span title=concept-range>range</span>
   whose <span title=concept-range-start>start</span> is
   (<var title>original start node</var>, <var title>original start offset</var>) and
   whose <span title=concept-range-end>end</span> is
   (<var title>first partially contained child</var>, <var title>first partially contained child</var>'s <span title=concept-node-length>length</span>).

   <li><p>Let <var title>subfragment</var> be the result of
   <span title=concept-range-clone>cloning</span> <var title>subrange</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>subfragment</var> to
   <var title>fragment</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 <span title=concept-node-clone>clone</span> of
   <var title>contained child</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var> to
   <var title>fragment</var>.
  </ol>

 <li>
  <p>If <var title>last partially contained child</var> is a
  <code>Text</code>, <code>ProcessingInstruction</code>, or
  <code>Comment</code> <span title=concept-node>node</span>:

  <p class=note>In this case, <var title>last partially contained child</var> is
  <var title>original end node</var>.

  <ol>
   <li><p>Let <var title>clone</var> be a <span title=concept-node-clone>clone</span> of
   <var title>original end node</var>.

   <li><p>Set the <span title=concept-CD-data>data</span> of
   <var title>clone</var> to the result of
   <span title=concept-CD-substring>substringing data</span> with node
   <var title>original end node</var>, offset 0, and count
   <var title>original end offset</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var> to
   <var title>fragment</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
   <span title=concept-node-clone>clone</span> of
   <var title>last partially contained child</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>clone</var>
   to <var title>fragment</var>.

   <li><p>Let <var title>subrange</var> be a new <span title=concept-range>range</span>
   whose <span title=concept-range-start>start</span> is
   (<var title>last partially contained child</var>, 0) and whose
   <span title=concept-range-end>end</span> is
   (<var title>original end node</var>, <var title>original end offset</var>).

   <li><p>Let <var title>subfragment</var> be the result of
   <span title=concept-range-clone>cloning</span> <var title>subrange</var>.

   <li><p><span title=concept-node-append>Append</span> <var title>subfragment</var> to
   <var title>fragment</var>.
  </ol>

 <li><p>Return <var title>fragment</var>.
</ol>

<p>The <dfn title=dom-Range-cloneContents><code>cloneContents()</code></dfn>
method must return the result of <span title=concept-range-clone>cloning</span>
<span>context object</span>.

<p>To <dfn title=concept-range-insert>insert</dfn> a <span title=concept-node>node</span>
<var title>node</var> into a <span title=concept-range>range</span>
<var title>range</var>, 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 <var title>range</var>'s <span title=concept-range-start-node>start node</span>
 is either a <code>ProcessingInstruction</code> or <code>Comment</code>
 <span title=concept-node>node</span>, or a <code>Text</code>
 <span title=concept-node>node</span> whose <span title=concept-tree-parent>parent</span>
 is null, <span title=concept-throw>throw</span> an "<code>HierarchyRequestError</code>"
 exception.
 <!--
 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.
 -->
 <li><p>Let <var title>referenceNode</var> be null.

 <!-- 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 <var title>range</var>'s <span title=concept-range-start-node>start node</span>
 is a <code>Text</code> <span title=concept-node>node</span>,
 <span title=concept-Text-split>split</span> it with offset
 <var title>range</var>'s <span title=concept-range-start-offset>start offset</span>, and
 set <var title>referenceNode</var> to the result.

 <li><p>Otherwise, set <var title>referenceNode</var> to the
 <span title=concept-tree-child>child</span> of
 <span title=concept-range-start-node>start node</span> whose
 <span title=concept-tree-index>index</span> is
 <span title=concept-range-start-offset>start offset</span>, and null if
 there is no such <span title=concept-tree-child>child</span> otherwise.

 <li><p>Let <var title>parent</var> be <var title>range</var>'s
 <span title=concept-range-start-node>start node</span> if <var title>referenceNode</var>
 is null, and <var title>referenceNode</var>'s
 <span title=concept-tree-parent>parent</span> otherwise.

 <!-- 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>newOffset</var> be <var title>parent</var>'s
 <span title=concept-node-length>length</span> if <var title>referenceNode</var> is null,
 and <var title>referenceNode</var>'s <span title=concept-tree-index>index</span>
 otherwise.

 <li><p>Increase <var title>newOffset</var> by <var title>node</var>'s
 <span title=concept-node-length>length</span> if <var title>node</var> is a
 <code>DocumentFragment</code> <span title=concept-node>node</span>, and one otherwise.

 <li><p><span title=concept-node-pre-insert>Pre-insert</span>
 <var title>node</var> into <var title>parent</var> before <var title>referenceNode</var>.

 <li><p>If <var title>range</var>'s <span title=concept-range-start>start</span> and
 <span title=concept-range-end>end</span> are the same, set <var title>range</var>'s
 <span title=concept-range-end>end</span> to
 (<var title>parent</var>, <var title>newOffset</var>).
</ol>

<p>The <dfn title=dom-Range-insertNode><code>insertNode(<var>node</var>)</code></dfn>
method must <span title=concept-range-insert>insert</span> <var title>node</var> into
<span>context object</span>.

<p>The
<dfn 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>Text</code> <span title=concept-node>node</span> is
 <span>partially contained</span> in the <span>context object</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidStateError</code>" exception.
 <!-- 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>Document</code>,
 <code>DocumentType</code>, or <code>DocumentFragment</code>
 <span title=concept-node>node</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.
 <!-- 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><p>Let <var title>fragment</var> be the result of
 <span title=concept-range-extract>extracting</span> <span>context object</span>.
 <!-- 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
 <span title=concept-tree-child>children</span>,
 <span title=concept-node-replace-all>replace all</span> with null within
 <var title>newParent</var>.

 <li><p><span title=concept-range-insert>Insert</span> <var title>newParent</var> into
 <span>context object</span>.

 <li><p><span title=concept-node-append>Append</span> <var title>fragment</var> to
 <var title>newParent</var>.

 <li><p><span title=concept-range-select>Select</span> <var title>newParent</var> within
 <span>context object</span>.
 <!-- 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 title=dom-Range-cloneRange><code>cloneRange()</code></dfn>
method must return a new <span title=concept-range>range</span> with the
same <span title=concept-range-start>start</span> and
<span title=concept-range-end>end</span> as the <span>context object</span>.

<p>The <dfn title=dom-Range-detach><code>detach()</code></dfn> method must
do nothing. <span class=note>Its functionality (disabling a
<code>Range</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>comparePoint</code>( <var title>parent</var>, <var title>offset</var> )
 <dd><p>Returns &minus;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>intersectsNode</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 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 <span title=concept-tree-root>root</span> is
 different from the <span>context object</span>'s <span
 title=concept-range-root>root</span>, return false.
 <!-- 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
 <span title=concept-doctype>doctype</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.
 <!-- 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 <span title=concept-node-length>length</span>,
 <span title=concept-throw>throw</span> an
 "<code>IndexSizeError</code>" exception.
 <!-- 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
 <span title=concept-range-bp-before>before</span>
 <span title=concept-range-start>start</span> or
 <span title=concept-range-bp-after>after</span>
 <span title=concept-range-end>end</span>, return false.

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


<p>The
<dfn 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 <span title=concept-tree-root>root</span> is
 different from the <span>context object</span>'s
 <span title=concept-range-root>root</span>,
 <span title=concept-throw>throw</span> a "<code>WrongDocumentError</code>"
 exception.
 <!-- 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
 <span title=concept-doctype>doctype</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidNodeTypeError</code>" exception.
 <!-- 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 <span title=concept-node-length>length</span>,
 <span title=concept-throw>throw</span> an
 "<code>IndexSizeError</code>" exception.
 <!-- 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
 <span title=concept-range-bp-before>before</span>
 <span title=concept-range-start>start</span>, return &minus;1.

 <li><p>If (<var title>node</var>, <var title>offset</var>) is
 <span title=concept-range-bp-after>after</span>
 <span title=concept-range-end>end</span>, return 1.

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

<hr>

<p>The
<dfn 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 <span title=concept-tree-root>root</span>
 is different from the <span>context object</span>'s
 <span title=concept-range-root>root</span>, return false.
 <!-- 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
 <span title=concept-tree-parent>parent</span>.

 <li><p>If <var title>parent</var> is null, return true.
 <!-- 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
 <span title=concept-tree-index>index</span>.

 <li><p>If (<var title>parent</var>, <var title>offset</var>) is
 <span title=concept-range-bp-before>before</span>
 <span title=concept-range-end>end</span> and (<var title>parent</var>,
 <var title>offset</var> + 1) is
 <span title=concept-range-bp-after>after</span>
 <span title=concept-range-start>start</span>, return true.

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

</div>

<hr>

<p>The <dfn 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 <span title=concept-range-start-node>start node</span> equals
 <span title=concept-range-end-node>end node</span>, and it is a
 <code>Text</code> <span title=concept-node>node</span>, return the
 substring of that <code>Text</code> <span title=concept-node>node</span>'s <span title=concept-CD-data>data</span> beginning at
 <span title=concept-range-start-offset>start offset</span> and ending at
 <span title=concept-range-end-offset>end offset</span>.

 <li><p>If <span title=concept-range-start-node>start node</span> is a
 <code>Text</code> <span title=concept-node>node</span>, append to
 <var title>s</var> the substring of that
 <span title=concept-node>node</span>'s
 <span title=concept-CD-data>data</span> from the
 <span title=concept-range-start-offset>start offset</span> until the end.

 <li><p>Append to <var title>s</var> the concatenation, in
 <span title=concept-tree-order>tree order</span>, of the
 <span title=concept-CD-data>data</span> of all <code>Text</code>
 <span title=concept-node>nodes</span> that are <span>contained</span> in
 the <span>context object</span>.

 <li><p>If <span title=concept-range-end-node>end node</span> is a
 <code>Text</code> <span title=concept-node>node</span>, append to
 <var title>s</var> the substring of that
 <span title=concept-node>node</span>'s
 <span title=concept-CD-data>data</span> from its start until the
 <span title=concept-range-end-offset>end offset</span>.

 <li><p>Return <var title>s</var>.
</ol>

<hr>

<p class=note>The
<code title=dom-Range-createContextualFragment data-anolis-spec=domps>createContextualFragment()</code>,
<code data-anolis-spec=cssom-view title=dom-Range-getClientRects>getClientRects()</code>,
and
<code data-anolis-spec=cssom-view title=dom-Range-getBoundingClientRect>getBoundingClientRect()</code>
methods are defined in other specifications.
<span data-anolis-ref class=informative>DOMPS</span>
<span data-anolis-ref class=informative>CSSOMVIEW</span>


<h2>Traversal</h2>

<p><code>NodeIterator</code> and <code>TreeWalker</code> objects can be used
to filter and traverse <span title=concept-node>node</span>
<span title=concept-tree>trees</span>.

<p>Each <code>NodeIterator</code> and <code>TreeWalker</code> object has an
associated <dfn title=concept-traversal-active>active flag</dfn> to avoid
recursive invocations. It is initially unset.

<p>Each <code>NodeIterator</code> and <code>TreeWalker</code> object also
has an associated <dfn title=concept-traversal-root>root</dfn>
<span title=concept-node>node</span>,
<dfn title=concept-traversal-whatToShow>whatToShow</dfn> bitmask, and
<dfn title=concept-traversal-filter>filter</dfn> callback.

<p>To <dfn title=concept-node-filter>filter</dfn> <var title>node</var> run
these steps:

<ol>
 <li><p>If <span title=concept-traversal-active>active flag</span> is set
 <span title=concept-throw>throw</span> an
 "<code>InvalidStateError</code>".
 <li><p>Let <var title>n</var> be <var title>node</var>'s
 <code title=dom-Node-nodeType>nodeType</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
 <span title=concept-traversal-whatToShow>whatToShow</span> is not set,
 return <code title=dom-NodeFilter-FILTER_SKIP>FILTER_SKIP</code>.
 <!-- !((1 << (node.nodeType - 1)) & whatToShow) -->
 <li><p>If <span title=concept-traversal-filter>filter</span> is null,
 return <code title=dom-NodeFilter-FILTER_ACCEPT>FILTER_ACCEPT</code>.
 <li><p>Set the <span title=concept-traversal-active>active flag</span>.
 <li><p>Let <var title>result</var> be the return value of invoking
 <span title=concept-traversal-filter>filter</span>.
 <li><p>Unset the <span title=concept-traversal-active>active flag</span>.
 <li><p>If an exception was thrown, re-throw the exception.
 <li><p>Return <var title>result</var>.
</ol>


<h3>Interface <code>NodeIterator</code></h3>

<pre class=idl>interface <dfn>NodeIterator</dfn> {
  [SameObject] readonly attribute <span>Node</span> <span title=dom-NodeIterator-root>root</span>;
  readonly attribute <span>Node</span> <span title=dom-NodeIterator-referenceNode>referenceNode</span>;
  readonly attribute boolean <span title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</span>;
  readonly attribute unsigned long <span title=dom-NodeIterator-whatToShow>whatToShow</span>;
  readonly attribute <span>NodeFilter</span>? <span title=dom-NodeIterator-filter>filter</span>;<!--
  readonly attribute boolean <span title=dom-NodeIterator-expandEntityReferences>expandEntityReferences</span>;-->

  <span>Node</span>? <span title=dom-NodeIterator-nextNode>nextNode</span>();
  <span>Node</span>? <span title=dom-NodeIterator-previousNode>previousNode</span>();

  void <span title=dom-NodeIterator-detach>detach</span>();
};</pre>

<p class=note><code>NodeIterator</code> objects can be created using the
<code title=dom-Document-createNodeIterator>createNodeIterator()</code>
method.

<p>Each <code>NodeIterator</code> object has an associated
<dfn>iterator collection</dfn>, which is a
<span title=concept-collection>collection</span> rooted at
<span title=concept-traversal-root>root</span>, whose filter matches any
<span title=concept-node>node</span>.

<p>Before a <span title=concept-node>node</span> is removed from the
<span>iterator collection</span>, these steps must be run:

<ol>
 <li><p>If the <span title=concept-node>node</span> is not a
 <span title=concept-tree-descendant>descendant</span> of
 <span title=concept-traversal-root>root</span> and is not an
 <span title=concept-tree-ancestor>ancestor</span> of the
 <code title=dom-NodeIterator-referenceNode>referenceNode</code> attribute
 value or the
 <code title=dom-NodeIterator-referenceNode>referenceNode</code> attribute
 value itself, terminate these steps.

 <li><p>If the
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</code>
 attribute value is false, set the
 <code title=dom-NodeIterator-referenceNode>referenceNode</code> attribute
 to the first <span title=concept-node>node</span>
 <span title=concept-tree-preceding>preceding</span> the
 <span title=concept-node>node</span> that is being removed, and terminate
 these steps.

 <li><p>If the
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</code>
 attribute value is true and there is a <span title=concept-node>node</span>
 <span title=concept-tree-following>following</span> the
 <span title=concept-node>node</span> that is being removed, set the
 <code title=dom-NodeIterator-referenceNode>referenceNode</code> attribute
 to the first such <span title=concept-node>node</span>, and terminate these
 steps.

 <li><p>Set the
 <code title=dom-NodeIterator-referenceNode>referenceNode</code> attribute
 to the first <span title=concept-node>node</span>
 <span title=concept-tree-preceding>preceding</span> the
 <span title=concept-node>node</span> that is being removed and set the
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</code>
 attribute to false.
</ol>

<p class=note>As mentioned earlier <code>NodeIterator</code> objects have an
associated <span title=concept-traversal-active>active flag</span>,
<span title=concept-traversal-root>root</span>
<span title=concept-node>node</span>,
<span title=concept-traversal-whatToShow>whatToShow</span> bitmask, and
<span title=concept-traversal-filter>filter</span> callback as well.

<hr>

<p>The <dfn title=dom-NodeIterator-root><code>root</code></dfn> attribute
must return <span title=concept-traversal-root>root</span>.</p>

<p>The
<dfn title=dom-NodeIterator-referenceNode><code>referenceNode</code></dfn>
and
<dfn title=dom-NodeIterator-pointerBeforeReferenceNode><code>pointerBeforeReferenceNode</code></dfn>
attributes must return what they were initialized to.</p>

<p>The <dfn title=dom-NodeIterator-whatToShow><code>whatToShow</code></dfn>
attribute must return
<span title=concept-traversal-whatToShow>whatToShow</span>.

<p>The <dfn title=dom-NodeIterator-filter><code>filter</code></dfn>
attribute must return <span title=concept-traversal-filter>filter</span>.

<p>To <dfn 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>referenceNode</code> attribute.

 <li><p>Let <var title>before node</var> be the value of the
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</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 <span title=concept-node>node</span>
      <span title=concept-tree-following>following</span>
      <var title>node</var> in the <span>iterator collection</span>. If
      there is no such <span title=concept-node>node</span> return null.
      <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 <span title=concept-node>node</span>
      <span title=concept-tree-preceding>preceding</span>
      <var title>node</var> in the <span>iterator collection</span>. If
      there is no such <span title=concept-node>node</span> return null.
      <p>If <var title>before node</var> is false, set it to true.
    </dl>
   <li><p><span title=concept-node-filter>Filter</span>
   <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>FILTER_ACCEPT</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>referenceNode</code> attribute
 to <var title>node</var>, set the
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</code>
 attribute to <var title>before node</var>, and return
 <var title>node</var>.
</ol>

<p>The <dfn title=dom-NodeIterator-nextNode><code>nextNode()</code></dfn>
method must <span title=concept-NodeIterator-traverse>traverse</span> in
direction next.

<p>The
<dfn title=dom-NodeIterator-previousNode><code>previousNode()</code></dfn>
method must <span title=concept-NodeIterator-traverse>traverse</span> in
direction previous.

<p>The <dfn title=dom-NodeIterator-detach><code>detach()</code></dfn>
method must do nothing. <span class=note>Its functionality (disabling a
<code>NodeIterator</code> object) was removed, but the method itself is preserved
for compatibility.</span>


<h3>Interface <code>TreeWalker</code></h3>

<pre class=idl>interface <dfn>TreeWalker</dfn> {
  [SameObject] readonly attribute <span>Node</span> <span title=dom-TreeWalker-root>root</span>;
  readonly attribute unsigned long <span title=dom-TreeWalker-whatToShow>whatToShow</span>;
  readonly attribute <span>NodeFilter</span>? <span title=dom-TreeWalker-filter>filter</span>;<!--
  readonly attribute boolean <span title=dom-TreeWalker-expandEntityReferences>expandEntityReferences</span>;-->
           attribute <span>Node</span> <span title=dom-TreeWalker-currentNode>currentNode</span>;

  <span>Node</span>? <span title=dom-TreeWalker-parentNode>parentNode</span>();
  <span>Node</span>? <span title=dom-TreeWalker-firstChild>firstChild</span>();
  <span>Node</span>? <span title=dom-TreeWalker-lastChild>lastChild</span>();
  <span>Node</span>? <span title=dom-TreeWalker-previousSibling>previousSibling</span>();
  <span>Node</span>? <span title=dom-TreeWalker-nextSibling>nextSibling</span>();
  <span>Node</span>? <span title=dom-TreeWalker-previousNode>previousNode</span>();
  <span>Node</span>? <span title=dom-TreeWalker-nextNode>nextNode</span>();
};</pre>

<p class=note><code>TreeWalker</code> objects can be created using the
<code title=dom-Document-createTreeWalker>createTreeWalker()</code> method.

<p class=note>As mentioned earlier <code>TreeWalker</code> objects have an
associated <span title=concept-traversal-active>active flag</span>,
<span title=concept-traversal-root>root</span>
<span title=concept-node>node</span>,
<span title=concept-traversal-whatToShow>whatToShow</span> bitmask, and
<span title=concept-traversal-filter>filter</span> callback.

<p>The <dfn title=dom-TreeWalker-root><code>root</code></dfn> attribute must
return <span title=concept-traversal-root>root</span>.</p>

<p>The <dfn title=dom-TreeWalker-whatToShow><code>whatToShow</code></dfn>
attribute must return
<span title=concept-traversal-whatToShow>whatToShow</span>.

<p>The <dfn title=dom-TreeWalker-filter><code>filter</code></dfn> attribute
must return <span title=concept-traversal-filter>filter</span>.

<p>The <dfn 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>currentNode</code>
attribute must set it to the new value.</p>


<p>The <dfn 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>currentNode</code> attribute.

 <li>
  <p>While <var title>node</var> is not null and is not
  <span title=concept-traversal-root>root</span>, run these substeps:

  <ol>
   <li><p>Let <var title>node</var> be <var title>node</var>'s
   <span title=concept-tree-parent>parent</span>.

   <li><p>If <var title>node</var> is not null and
   <span title=concept-node-filter>filtering</span> <var title>node</var>
   returns <code title=dom-NodeFilter-FILTER_ACCEPT>FILTER_ACCEPT</code>,
   then set the <code title=dom-TreeWalker-currentNode>currentNode</code>
   attribute to <var title>node</var>, return <var title>node</var>.
  </ol>

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

<p>To <dfn 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>currentNode</code> attribute.

 <li><p>Set <var title>node</var> to <var title>node</var>'s
 <span title=concept-tree-first-child>first child</span> if
 <var title>type</var> is first, and <var title>node</var>'s
 <span title=concept-tree-last-child>last child</span> if
 <var title>type</var> is last.

 <li>
  <p><dfn title=concept-traverse-children-main>Main</dfn>:
  While <var title>node</var> is not null, run these substeps:

  <ol>
   <li><p><span title=concept-node-filter>Filter</span>
   <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>FILTER_ACCEPT</code>, then set
   the <code title=dom-TreeWalker-currentNode>currentNode</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>FILTER_SKIP</code>, run these
    subsubsteps:

    <ol>
     <li><p>Let <var title>child</var> be <var title>node</var>'s
     <span title=concept-tree-first-child>first child</span> if
     <var title>type</var> is first, and <var title>node</var>'s
     <span title=concept-tree-last-child>last child</span> 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
     <span title=concept-traverse-children-main>Main</span>.
    </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
     <span title=concept-tree-next-sibling>next sibling</span> if
     <var title>type</var> is first, and <var title>node</var>'s
     <span title=concept-tree-previous-sibling>previous sibling</span> 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
     <span title=concept-traverse-children-main>Main</span>.

     <li><p>Let <var title>parent</var> be <var title>node</var>'s
     <span title=concept-tree-parent>parent</span>.

     <li><p>If <var title>parent</var> is null, <var title>parent</var> is
     <span title=concept-traversal-root>root</span>, or
     <var title>parent</var> is
     <code title=dom-TreeWalker-currentNode>currentNode</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 title=dom-TreeWalker-firstChild><code>firstChild()</code></dfn>
method must <span title=concept-traverse-children>traverse children</span>
of type first.

<p>The <dfn title=dom-TreeWalker-lastChild><code>lastChild()</code></dfn>
method must <span title=concept-traverse-children>traverse children</span>
of type last.

<p>To <dfn 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>currentNode</code> attribute.

 <li><p>If <var title>node</var> is
 <span title=concept-traversal-root>root</span>, return null.

 <li>
  <p>Run these substeps:

  <ol>
   <li><p>Let <var title>sibling</var> be <var title>node</var>'s
   <span title=concept-tree-next-sibling>next sibling</span> if
   <var title>type</var> is next, and <var title>node</var>'s
   <span title=concept-tree-previous-sibling>previous sibling</span> 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><span title=concept-node-filter>Filter</span>
     <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>FILTER_ACCEPT</code>, then set
     the <code title=dom-TreeWalker-currentNode>currentNode</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
     <span title=concept-tree-first-child>first child</span> if
     <var title>type</var> is next, and <var title>node</var>'s
     <span title=concept-tree-last-child>last child</span> if
     <var title>type</var> is previous.

     <li><p>If <var title>result</var> is
     <code title=dom-NodeFilter-FILTER_REJECT>FILTER_REJECT</code> or
     <var title>sibling</var> is null, then set <var title>sibling</var> to
     <var title>node</var>'s
     <span title=concept-tree-next-sibling>next sibling</span> if
     <var title>type</var> is next, and <var title>node</var>'s
     <span title=concept-tree-previous-sibling>previous sibling</span> if
     <var title>type</var> is previous.
    </ol>

   <li><p>Set <var title>node</var> to its
   <span title=concept-tree-parent>parent</span>.

   <li><p>If <var title>node</var> is null or is
   <span title=concept-traversal-root>root</span>, return null.

   <li><p><span title=concept-node-filter>Filter</span>
   <var title>node</var> and if the return value is
   <code title=dom-NodeFilter-FILTER_ACCEPT>FILTER_ACCEPT</code>, then
   return null.
   <!-- XXX WTF? -->

   <li><p>Run these substeps again.
  </ol>
</ol>

<p>The
<dfn title=dom-TreeWalker-nextSibling><code>nextSibling()</code></dfn>
method must <span title=concept-traverse-siblings>traverse siblings</span>
of type next.

<p>The
<dfn title=dom-TreeWalker-previousSibling><code>previousSibling()</code></dfn>
method must <span title=concept-traverse-siblings>traverse siblings</span>
of type previous.

<p>The
<dfn 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>currentNode</code> attribute.

 <li>
  <p>While <var title>node</var> is not
  <span title=concept-traversal-root>root</span>, run these substeps:

  <ol>
   <li><p>Let <var title>sibling</var> be the
   <span title=concept-tree-previous-sibling>previous sibling</span> 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><span title=concept-node-filter>Filter</span>
     <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>FILTER_REJECT</code> and
     <var title>node</var> has a
     <span title=concept-tree-child>child</span>, set <var title>node</var>
     to its <span title=concept-tree-last-child>last child</span> and then
     <span title=concept-node-filter>filter</span> <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>FILTER_ACCEPT</code>, then set
     the <code title=dom-TreeWalker-currentNode>currentNode</code>
     attribute to <var title>node</var> and return <var title>node</var>.

     <li><p>Set <var title>sibling</var> to the
     <span title=concept-tree-previous-sibling>previous sibling</span> of
     <var title>node</var>.
    </ol>

   <li><p>If <var title>node</var> is
   <span title=concept-traversal-root>root</span> or <var title>node</var>'s
   <span title=concept-tree-parent>parent</span> is null, return null.

   <li><p>Set <var title>node</var> to its
   <span title=concept-tree-parent>parent</span>.

   <li><p><span title=concept-node-filter>Filter</span>
   <var title>node</var> and if the return value is
   <code title=dom-NodeFilter-FILTER_ACCEPT>FILTER_ACCEPT</code>, then set
   the <code title=dom-TreeWalker-currentNode>currentNode</code> attribute
   to <var title>node</var> and return <var title>node</var>.
  </ol>

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

<p>The <dfn 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>currentNode</code> attribute.

 <li><p>Let <var title>result</var> be
 <code title=dom-NodeFilter-FILTER_ACCEPT>FILTER_ACCEPT</code>.

 <li>
  <p>Run these substeps:

  <ol>
   <li>
    <p>While <var title>result</var> is not
    <code title=dom-NodeFilter-FILTER_REJECT>FILTER_REJECT</code> and
    <var title>node</var> has a <span title=concept-tree-child>child</span>,
    run these subsubsteps:

    <ol>
     <li><p>Set <var title>node</var> to its
     <span title=concept-tree-first-child>first child</span>.

     <li><p><span title=concept-node-filter>Filter</span>
     <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>FILTER_ACCEPT</code>, then set
     the <code title=dom-TreeWalker-currentNode>currentNode</code> attribute
     to <var title>node</var> and return <var title>node</var>.
    </ol>

   <li>
    <p>If a <span title=concept-node>node</span> is
    <span title=concept-tree-following>following</span>
    <var title>node</var> and is not
    <span title=concept-tree-following>following</span>
    <span title=concept-traversal-root>root</span>, set
    <var title>node</var> to the first such
    <span title=concept-node>node</span>.
    <p>Otherwise, return null.
    <!-- Implemented as iterating over parent/nextSibling -->

   <li><p><span title=concept-node-filter>Filter</span>
   <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>FILTER_ACCEPT</code>, then set
   the <code title=dom-TreeWalker-currentNode>currentNode</code> attribute
   to <var title>node</var> and return <var title>node</var>.

   <li><p>Run these substeps again.
  </ol>
</ol>


<h3>Interface <code>NodeFilter</code></h3>

<pre class=idl>callback interface <dfn>NodeFilter</dfn> {
  // Constants for <span title=dom-NodeFilter-acceptNode>acceptNode()</span>
  const unsigned short <span title=dom-NodeFilter-FILTER_ACCEPT>FILTER_ACCEPT</span> = 1;
  const unsigned short <span title=dom-NodeFilter-FILTER_REJECT>FILTER_REJECT</span> = 2;
  const unsigned short <span title=dom-NodeFilter-FILTER_SKIP>FILTER_SKIP</span> = 3;

  // Constants for <span title=concept-traversal-whatToShow>whatToShow</span>
  const unsigned long <span title=dom-NodeFilter-SHOW_ALL>SHOW_ALL</span> = 0xFFFFFFFF;
  const unsigned long <span title=dom-NodeFilter-SHOW_ELEMENT>SHOW_ELEMENT</span> = 0x1;
  const unsigned long <span title=dom-NodeFilter-SHOW_ATTRIBUTE>SHOW_ATTRIBUTE</span> = 0x2; // historical
  const unsigned long <span title=dom-NodeFilter-SHOW_TEXT>SHOW_TEXT</span> = 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 <span title=dom-NodeFilter-SHOW_PROCESSING_INSTRUCTION>SHOW_PROCESSING_INSTRUCTION</span> = 0x40;
  const unsigned long <span title=dom-NodeFilter-SHOW_COMMENT>SHOW_COMMENT</span> = 0x80;
  const unsigned long <span title=dom-NodeFilter-SHOW_DOCUMENT>SHOW_DOCUMENT</span> = 0x100;
  const unsigned long <span title=dom-NodeFilter-SHOW_DOCUMENT_TYPE>SHOW_DOCUMENT_TYPE</span> = 0x200;
  const unsigned long <span title=dom-NodeFilter-SHOW_DOCUMENT_FRAGMENT>SHOW_DOCUMENT_FRAGMENT</span> = 0x400;
  const unsigned long <span title=dom-NodeFilter-SHOW_NOTATION>SHOW_NOTATION</span> = 0x800; // historical

  unsigned short <span title=dom-NodeFilter-acceptNode>acceptNode</span>(<span>Node</span> <var title>node</var>);
};</pre>

<p><code>NodeFilter</code> objects can be used as
<span title=concept-traversal-filter>filter</span> callback and provide
constants for the <span title=concept-traversal-whatToShow>whatToShow</span>
bitmask.

<p class=note>It is typically implemented as an JavaScript function.

<p>These constants can be used as callback return value:

<ul class="brief">
 <li><dfn title=dom-NodeFilter-FILTER_ACCEPT><code>FILTER_ACCEPT</code></dfn> (1);
 <li><dfn title=dom-NodeFilter-FILTER_REJECT><code>FILTER_REJECT</code></dfn> (2);
 <li><dfn title=dom-NodeFilter-FILTER_SKIP><code>FILTER_SKIP</code></dfn> (3).
</ul>

<p>These constants can be used for the
<span title=concept-traversal-whatToShow>whatToShow</span> bitmask:

<ul class="brief">
 <li><dfn title=dom-NodeFilter-SHOW_ALL><code>SHOW_ALL</code></dfn> (4294967295, FFFFFFFF in hexadecimal);
 <li><dfn 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 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 title=dom-NodeFilter-SHOW_PROCESSING_INSTRUCTION><code>SHOW_PROCESSING_INSTRUCTION</code></dfn> (64, 40 in hexadecimal);
 <li><dfn title=dom-NodeFilter-SHOW_COMMENT><code>SHOW_COMMENT</code></dfn> (128, 80 in hexadecimal);
 <li><dfn title=dom-NodeFilter-SHOW_DOCUMENT><code>SHOW_DOCUMENT</code></dfn> (256, 100 in hexadecimal);
 <li><dfn title=dom-NodeFilter-SHOW_DOCUMENT_TYPE><code>SHOW_DOCUMENT_TYPE</code></dfn> (512, 200 in hexadecimal);
 <li><dfn title=dom-NodeFilter-SHOW_DOCUMENT_FRAGMENT><code>SHOW_DOCUMENT_FRAGMENT</code></dfn> (1024, 400 in hexadecimal).
</ul>


<!-- 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>Sets</h2>

<p class=note>Yes, the names <code>DOMTokenList</code> and
<code>DOMSettableTokenList</code> are unfortunate legacy mishaps.

<h3>Interface <code>DOMTokenList</code></h3>

<pre class="idl">interface <dfn>DOMTokenList</dfn> {
  readonly attribute unsigned long <span title="dom-DOMTokenList-length">length</span>;
  getter DOMString? <span title="dom-DOMTokenList-item">item</span>(unsigned long <var title>index</var>);
  boolean <span title="dom-DOMTokenList-contains">contains</span>(DOMString <var title>token</var>);
  void <span title="dom-DOMTokenList-add">add</span>(DOMString... <var title>tokens</var>);
  void <span title="dom-DOMTokenList-remove">remove</span>(DOMString... <var title>tokens</var>);
  boolean <span title="dom-DOMTokenList-toggle">toggle</span>(DOMString <var title>token</var>, optional boolean <var title>force</var>);
  <span title="dom-DOMTokenList-stringifier">stringifier</span>;
};</pre>

<p>A <code>DOMTokenList</code> object has an associated ordered set of
<dfn title=concept-DTL-tokens>tokens</dfn>, which is initially empty.

<p>A <code>DOMTokenList</code> object also has an associated
<span title=concept-element>element</span> and an
<span title=concept-attribute>attribute</span>'s
<span title=concept-attribute-local-name>local name</span>.

<p>A <code>DOMTokenList</code> object's
<dfn title=concept-DTL-update>update steps</dfn> are:

<ol>
 <li><p>If there is no associated
 <span title=concept-attribute>attribute</span> (when the object is a
 <code>DOMSettableTokenList</code>), terminate these steps.

 <li><p><span title=concept-element-attributes-set>Set an attribute</span>
 for the associated <span title=concept-element>element</span> using
 associated <span title=concept-attribute>attribute</span>'s
 <span title=concept-attribute-local-name>local name</span> and the result
 of running the <span title=concept-ordered-set-serializer>ordered set serializer</span>
 for <span title=concept-DTL-tokens>tokens</span>.
</ol>

<dl class="domintro">
 <dt><code><var title>tokenlist</var> . <span title="dom-DOMTokenList-length">length</span></code>
 <dd><p>Returns the number of tokens.

 <dt><code><var title>tokenlist</var> . <span title="dom-DOMTokenList-item">item</span>(<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> . <span title="dom-DOMTokenList-contains">contains</span>(<var title>token</var>)</code>
 <dd>
  <p>Returns true if <var title>token</var> is present, and false otherwise.
  <p>Throws a "<code>SyntaxError</code>" exception if <var title>token</var>
  is the empty string.
  <p>Throws an "<code>InvalidCharacterError</code>" exception if
  <var title>token</var> contains any
  <span data-anolis-spec=encoding>ASCII whitespace</span>.

 <dt><code><var title>tokenlist</var> . <span title=dom-DOMTokenList-add>add</span>(<var title>tokens</var>&hellip;)</code>
 <dd>
  <p>Adds all arguments passed, except those already present.
  <p>Throws a "<code>SyntaxError</code>" exception if one if the arguments
  is the empty string.
  <p>Throws an "<code>InvalidCharacterError</code>" exception if one of the
  arguments contains any
  <span data-anolis-spec=encoding>ASCII whitespace</span>.

 <dt><code><var title>tokenlist</var> . <span title=dom-DOMTokenList-remove>remove</span>(<var title>tokens</var>&hellip;)</code>
 <dd>
  <p>Removes arguments passed, if they are present.
  <p>Throws a "<code>SyntaxError</code>" exception if one if the arguments
  is the empty string.
  <p>Throws an "<code>InvalidCharacterError</code>" exception if one of the
  arguments contains any
  <span data-anolis-spec=encoding>ASCII whitespace</span>.

 <dt><code><var title>tokenlist</var> . <span title="dom-DOMTokenList-toggle">toggle</span>(<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>add()</code>).  If
  <var title>force</var> is false, removes <var title>token</var> (same as
  <code title=dom-DOMTokenList-remove>remove()</code>).
  <p>Returns true if <var title>token</var> is now present, and false
  otherwise.
  <p>Throws a "<code>SyntaxError</code>" exception if <var title>token</var> is empty.
  <p>Throws an "<code>InvalidCharacterError</code>" exception if <var title>token</var> contains any spaces.
</dl>

<div class="impl">

<p>The <dfn title="dom-DOMTokenList-length"><code>length</code></dfn>
attribute must return the number of tokens in the
<span title=concept-DTL-tokens>tokens</span>.

<p>The object's
<span data-anolis-spec=webidl>supported property indices</span> are the
numbers in the range zero to the number of tokens in
<span title=concept-DTL-tokens>tokens</span> minus one, unless
<span title=concept-DTL-tokens>tokens</span> is  empty, in which case there are no
<span data-anolis-spec=webidl>supported property indices</span>.

<p>The
<dfn 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 <span title=concept-DTL-tokens>tokens</span>, return null.

 <li><p>Return the <var title>index</var>th token in
 <span title=concept-DTL-tokens>tokens</span>.
</ol>

<p>The
<dfn 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
 <span title=concept-throw>throw</span> a "<code>SyntaxError</code>"
 exception.

 <li><p>If <var title>token</var> contains any
 <span data-anolis-spec=encoding>ASCII whitespace</span>, then
 <span title=concept-throw>throw</span>
 an "<code>InvalidCharacterError</code>" exception.

 <li><p>Return true if <var title>token</var> is in
 <span title=concept-DTL-tokens>tokens</span>, and false otherwise.
</ol>

<p>The
<dfn title=dom-DOMTokenList-add><code>add(<var title>tokens</var>&hellip;)</code></dfn>
method must run these steps:

<ol>
 <li><p>If one of <var title>tokens</var> is the empty string,
 <span title=concept-throw>throw</span> a "<code>SyntaxError</code>"
 exception.

 <li><p>If one of <var title>tokens</var> contains any
 <span data-anolis-spec=encoding>ASCII whitespace</span>, then
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.

 <li><p>For each <var title>token</var> in <var title>tokens</var>, in given
 order, that is not in <span title=concept-DTL-tokens>tokens</span>, append
 <var title>token</var> to <span title=concept-DTL-tokens>tokens</span>.

 <li><p>Run the <span title=concept-DTL-update>update steps</span>.
</ol>

<p>The
<dfn title="dom-DOMTokenList-remove"><code>remove(<var title>tokens</var>&hellip;)</code></dfn>
method must run these steps:

<ol>
 <li><p>If one of <var title>tokens</var> is the empty string,
 <span title=concept-throw>throw</span> a "<code>SyntaxError</code>"
 exception.

 <li><p>If one of <var title>tokens</var> contains any
 <span data-anolis-spec=encoding>ASCII whitespace</span>, then
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.

 <li><p>For each <var title>token</var> in <var title>tokens</var>, remove
 <var title>token</var> from <span title=concept-DTL-tokens>tokens</span>.

 <li><p>Run the <span title=concept-DTL-update>update steps</span>.
</ol>

<p>The
<dfn 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,
 <span title=concept-throw>throw</span> a "<code>SyntaxError</code>"
 exception.

 <li><p>If <var title>token</var> contains any
 <span data-anolis-spec=encoding>ASCII whitespace</span>,
 <span title=concept-throw>throw</span> an
 "<code>InvalidCharacterError</code>" exception.

 <li>
  <p>If <var title>token</var> is in <span title=concept-DTL-tokens>tokens</span>, run
  these substeps:

  <ol>
   <li><p>If <var title>force</var> is either not passed or is false, then remove
   <var title>token</var> from <span title=concept-DTL-tokens>tokens</span>, run the
   <span title=concept-DTL-update>update steps</span>, and return false.

   <li><p>Otherwise, return true.
  </ol>

 <li>
  <p>Otherwise, run these substeps:

  <ol>
   <li><p>If <var title>force</var> is passed and is false, return false.

   <li><p>Otherwise, append <var title>token</var> to
   <span title=concept-DTL-tokens>tokens</span>, run the
   <span title=concept-DTL-update>update steps</span>, and return true.
  </ol>
</ol>

<p>The <dfn title="dom-DOMTokenList-stringifier">stringifier</dfn> must
return the result of the
<span title=concept-ordered-set-serializer>ordered set serializer</span> for
<span title=concept-DTL-tokens>tokens</span>.

</div>


<h3>Interface <code>DOMSettableTokenList</code></h3>

<pre class="idl">interface <dfn>DOMSettableTokenList</dfn> : <span>DOMTokenList</span> {
            attribute DOMString <span title="dom-DOMSettableTokenList-value">value</span>;
};</pre>

<p>A <code>DOMSettableTokenList</code> object is equivalent to a
<code>DOMTokenList</code> object without an associated
<span title=concept-attribute>attribute</span>.

<dl class="domintro">
 <dt><code><var title>tokenlist</var> . <span title="dom-DOMSettableTokenList-value">value</span></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 title="dom-DOMSettableTokenList-value"><code>value</code></dfn>
attribute must return the result of the
<span title=concept-ordered-set-serializer>ordered set serializer</span> for
<span title=concept-DTL-tokens>tokens</span>.

<p>Setting the <code title=dom-DOMSettableTokenList-value>value</code>
attribute must run the <span title=concept-ordered-set-parser>ordered set parser</span>
for the given value and set <span title=concept-DTL-tokens>tokens</span> to the result.

</div>


<h2>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>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.
<span class=informative data-anolis-ref>DOM3EVENTS</span>
<span data-anolis-ref>UIEVENTS</span>

<ul class=brief>
 <li>Events have constructors now.
 <li>Removes <dfn><code>MutationEvent</code></dfn>, and
 <dfn><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>initEvent()</code> rather than after
 dispatch.
</ul>


<h3>DOM Core</h3>

<p>These are the changes made to the features described in
<cite>DOM Level 3 Core</cite>.

<p><dfn><code>DOMString</code></dfn> and
<dfn><code>DOMTimeStamp</code></dfn> are now defined in Web IDL.

<p><code>Node</code> now inherits from <code>EventTarget</code>.</p>

<p><span title=concept-node>Nodes</span> are implicitly
<span title=concept-node-adopt>adopted</span> across
<span title=concept-document>document</span> boundaries.

<p><span title=concept-doctype>Doctypes</span> now always have a
<span title=concept-node-document>node document</span> and can be moved
across <span title=concept-document>document</span> boundaries.

<p><code>ProcessingInstruction</code> now inherits from
<code>CharacterData</code>.

<p><code>DOMError</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><code>CDATASection</code></dfn>
 <li><dfn><code>DOMConfiguration</code></dfn>
 <li><dfn><code>DOMErrorHandler</code></dfn>
 <li><dfn><code>DOMImplementationList</code></dfn>
 <li><dfn><code>DOMImplementationSource</code></dfn>
 <li><dfn><code>DOMLocator</code></dfn>
 <li><dfn><code>DOMObject</code></dfn>
 <li><dfn><code>DOMStringList</code></dfn>
 <li><dfn><code>DOMUserData</code></dfn>
 <li><dfn><code>Entity</code></dfn>
 <li><dfn><code>EntityReference</code></dfn>
 <li><dfn><code>NamedNodeMap</code></dfn> <!--AttrExodus-->
 <li><dfn><code>NameList</code></dfn>
 <li><dfn><code>Notation</code></dfn>
 <li><dfn><code>TypeInfo</code></dfn>
 <li><dfn><code>UserDataHandler</code></dfn>
</ul>

<p>Interface members:
<dl>
 <dt><code>Node</code>
 <dd>
  <ul class=brief>
   <!--AttrExodus-->
   <li><dfn title=dom-Node-hasAttributes><code>hasAttributes()</code></dfn>
   <li><dfn title=dom-Node-attributes><code>attributes</code></dfn>

   <!--NodeExodus-->
   <li><dfn title=dom-Node-namespaceURI><code>namespaceURI</code></dfn>
   <li><dfn title=dom-Node-prefix><code>prefix</code></dfn>
   <li><dfn title=dom-Node-localName><code>localName</code></dfn>

   <li><dfn title=dom-Node-isSupported><code>isSupported</code></dfn>
   <li><dfn title=dom-Node-getFeature><code>getFeature()</code></dfn>
   <li><dfn title=dom-Node-getUserData><code>getUserData()</code></dfn>
   <li><dfn title=dom-Node-setUserData><code>setUserData()</code></dfn>

   <li><dfn title=dom-Node-isSameNode><code>isSameNode()</code></dfn>
  </ul>

 <dt><code>Document</code>
 <dd>
  <ul class=brief>
   <li><dfn title=dom-Document-createCDATASection><code>createCDATASection()</code></dfn>
   <li><dfn title=dom-Document-createAttribute><code>createAttribute()</code></dfn>
   <li><dfn title=dom-Document-createAttributeNS><code>createAttributeNS()</code></dfn>
   <li><dfn title=dom-Document-createEntityReference><code>createEntityReference()</code></dfn>
   <li><dfn title=dom-Document-inputEncoding><code>inputEncoding</code></dfn>
   <li><dfn title=dom-Document-xmlEncoding><code>xmlEncoding</code></dfn>
   <li><dfn title=dom-Document-xmlStandalone><code>xmlStandalone</code></dfn>
   <li><dfn title=dom-Document-xmlVersion><code>xmlVersion</code></dfn>
   <li><dfn title=dom-Document-strictErrorChecking><code>strictErrorChecking</code></dfn>
   <li><dfn title=dom-Document-domConfig><code>domConfig</code></dfn>
   <li><dfn title=dom-Document-normalizeDocument><code>normalizeDocument()</code></dfn>
   <li><dfn title=dom-Document-renameNode><code>renameNode()</code></dfn>
  </ul>

 <dt><code>DOMImplementation</code>
 <dd>
  <ul class=brief>
   <li><dfn title=dom-DOMImplementation-getFeature><code>getFeature()</code></dfn>
  </ul>

 <dt><code>Attr</code>
 <dd>
  <p>No longer inherits from <code>Node</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>Element</code>
 <dd>
  <ul class=brief>
   <li><dfn title=dom-Element-getAttributeNode><code>getAttributeNode()</code></dfn>
   <li><dfn title=dom-Element-getAttributeNodeNS><code>getAttributeNodeNS()</code></dfn>
   <li><dfn title=dom-Element-setAttributeNode><code>setAttributeNode()</code></dfn>
   <li><dfn title=dom-Element-removeAttributeNode><code>removeAttributeNode()</code></dfn>
   <li><dfn title=dom-Element-schemaTypeInfo><code>schemaTypeInfo</code></dfn>
   <li><dfn title=dom-Element-setIdAttribute><code>setIdAttribute()</code></dfn>
   <li><dfn title=dom-Element-setIdAttributeNS><code>setIdAttributeNS()</code></dfn>
   <li><dfn title=dom-Element-setIdAttributeNode><code>setIdAttributeNode()</code></dfn>
  </ul>

 <dt><code>DocumentType</code>
 <dd>
  <ul class=brief>
   <li><dfn title=dom-DocumentType-entities><code>entities</code></dfn>
   <li><dfn title=dom-DocumentType-notations><code>notations</code></dfn>
   <li><dfn title=dom-DocumentType-internalSubset><code>internalSubset</code></dfn>
  </ul>

 <dt><code>Text</code>
 <dd>
  <ul class=brief>
   <li><dfn title=dom-Text-isElementContentWhitespace><code>isElementContentWhitespace</code></dfn>
   <li><dfn title=dom-Text-replaceWholeText><code>replaceWholeText()</code></dfn>
  </ul>
</dl>

<h3>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>.

<ul>
 <li><p><dfn><code>RangeException</code></dfn> has been removed.

 <li><p><code>Range</code> objects can now be moved between
 <span title=concept-document>documents</span> and used on
 <span title=concept-node>nodes</span> that are not <span>in a document</span>.

 <li><p>A wild <code title=dom-Range>Range()</code> constructor appeared.

 <li><p>New methods <code title=dom-Range-comparePoint>comparePoint()</code>,
 <code title=dom-Range-intersectsNode>intersectsNode()</code>, and
 <code title=dom-Range-isPointInRange>isPointInRange()</code> have been added.

 <li><p><code title=dom-Range-detach>detach()</code> is now a no-op.

 <li><p><dfn title=dom-Range-toString><code>toString()</code></dfn> is now defined through
 IDL.
</ul>


<h3>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>.

<ul>
 <li><p><code title=dom-Document-createNodeIterator>createNodeIterator()</code> and
 <code title=dom-Document-createTreeWalker>createTreeWalker()</code> now have optional
 arguments and lack a fourth argument which is no longer relevant given entity references
 never made it into the DOM.

 <li><p>The <code title>expandEntityReferences</code> attribute has been removed from the
 <code>NodeIterator</code> and <code>TreeWalker</code> interfaces for the aforementioned
 reason.

 <li><p>The <code title=dom-NodeIterator-referenceNode>referenceNode</code> and
 <code title=dom-NodeIterator-pointerBeforeReferenceNode>pointerBeforeReferenceNode</code>
 attributes have been added to <code>NodeIterator</code> objects to align with proprietary
 extensions of implementations.

 <li><p><code title=dom-NodeIterator-nextNode>nextNode()</code> and
 <code title=dom-NodeIterator-previousNode>previousNode()</code> now throw
 when invoked from a <code>NodeFilter</code> to align with user agents.

 <li><p><code title=dom-NodeIterator-detach>detach()</code> is now a no-op.
</ul>


<h2 class=no-num>References</h2>
<div id=anolis-references></div>


<h2 class=no-num>Acknowledgments</h2>

<p>Thanks to

Adam Klein,
Adrian Bateman,
Alex Russell,
Arkadiusz Michalski,
Arun Ranganathan,
Jake Archibald<!-- technically B.J. Archibald -->,
Boris Zbarsky,
Brandon Slade,
Brandon Wallace,
Brian Kardell,
Cameron McCormack,
Christophe Dumez,
Daniel Glazman,
David Bruant,
David Flanagan,
David Håsäther,
Dethe Elza,
Dimitri Glazkov,
Domenic Denicola,
Dominic Cooney,
Dominique Hazaël-Massieux,
Erik Arvidsson,
Glenn Maynard,
Harald Alvestrand,
Henri Sivonen,
Igor Bukanov,
Jacob Rossi,
Jake Verbaten,
James Graham,
James Robinson,
Jens Lindström,
João Eiras,
Jonas Sicking,
Joshua Bell,
Justin Summerlin,
呂康豪 (Kang-Hao Lu),
Kevin Sweeney,
Manish Goregaokar,
Manish Tripathi,
Marcos Caceres,
Mark Miller,
Mats Palmgren,
Mounir Lamouri,
Michael™ Smith,
Ojan Vafai,
Olli Pettay,
Ondřej Žára,
Philip Jägenstedt,
Rafael Weinstein,
Rick Waldron,
Robbert Broersma,
Robin Berjon,
Rune <span title="Fabulous">F.</span> 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.
<span data-anolis-ref>HTML</span>

<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,
Lachlan Hunt, 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 -->