[e] (0) Add a comment about cloneNode vs importNode in the example th…

…at clones a template, since some tutorials use importNode instead of cloneNode (they're identical in practice) Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=26837 Affected topics: DOM APIs, HTML git-svn-id: https://svn.whatwg.org/webapps@8825 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Sep 29, 2014 · 413fea8 · 413fea8
1 parent 0072e9a
commit 413fea8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/complete.html b/complete.html
@@ -2379,7 +2379,7 @@ <h4 id=dependencies>2.2.2 Dependencies</h4>
 
     <p>In particular, the following features are defined in the DOM specification: <a href=#refsDOM>[DOM]</a></p> 
 
-    <ul class=brief><li><dfn id=attr><code>Attr</code></dfn> interface<li><dfn id=comment-2><code>Comment</code></dfn> interface<li><dfn id=domimplementation><code>DOMImplementation</code></dfn> interface<li><dfn id=dom-document><code>Document</code></dfn> interface<li><dfn id=xmldocument><code>XMLDocument</code></dfn> interface<li><dfn id=documentfragment><code>DocumentFragment</code></dfn> interface<li><dfn id=documenttype><code>DocumentType</code></dfn> interface<li><dfn id=domexception><code>DOMException</code></dfn> interface<li><dfn id=childnode><code>ChildNode</code></dfn> interface<li><dfn id=element><code>Element</code></dfn> interface<li><dfn id=node><code>Node</code></dfn> interface<li><dfn id=nodelist><code>NodeList</code></dfn> interface<li><dfn id=processinginstruction><code>ProcessingInstruction</code></dfn> interface<li><dfn id=text><code>Text</code></dfn> interface<li><dfn id=node-document><a href=https://dom.spec.whatwg.org/#concept-node-document>node document</a></dfn> concept<li><dfn id=htmlcollection><code>HTMLCollection</code></dfn> interface<li><dfn id=dom-htmlcollection-length><code>HTMLCollection.length</code></dfn> attribute<li><dfn id=dom-htmlcollection-item><code>HTMLCollection.item()</code></dfn> method<li><dfn id=dom-htmlcollection-nameditem><code>HTMLCollection.namedItem()</code></dfn> method<li>The terms <dfn id=collections>collections</dfn> and <dfn id=represented-by-the-collection>represented by the collection</dfn><li><dfn id=domtokenlist><code>DOMTokenList</code></dfn> interface<li><dfn id=domsettabletokenlist><code>DOMSettableTokenList</code></dfn> interface<li><dfn id=dom-domsettabletokenlist-value><code>DOMSettableTokenList.value</code></dfn> attribute<li><dfn id=dom-domimplementation-createdocument><code>createDocument()</code></dfn> method<li><dfn id=dom-domimplementation-createhtmldocument><code>createHTMLDocument()</code></dfn> method<li><dfn id=dom-document-createelement><code>createElement()</code></dfn> method<li><dfn id=dom-document-createelementns><code>createElementNS()</code></dfn> method<li><dfn id=dom-document-getelementbyid><code>getElementById()</code></dfn> method<li><dfn id=dom-document-getelementsbyclassname><code>getElementsByClassName()</code></dfn> method<li><dfn id=dom-node-insertbefore><code>insertBefore()</code></dfn> method<li><dfn id=dom-node-childnodes><code>childNodes</code></dfn> attribute<li><dfn id=dom-node-localname><code>localName</code></dfn> attribute<li><dfn id=dom-node-parentnode><code>parentNode</code></dfn> attribute<li><dfn id=dom-node-namespaceuri><code>namespaceURI</code></dfn> attribute<li><dfn id=dom-element-tagname><code>tagName</code></dfn> attribute<li><dfn id=dom-element-id><code>id</code></dfn> attribute<li><dfn id=textcontent><code>textContent</code></dfn> attribute<li>The <dfn id=concept-node-insert>insert</dfn>, <dfn id=concept-node-append>append</dfn>, <dfn id=concept-node-remove>remove</dfn>, <dfn id=concept-node-replace>replace</dfn>, and <dfn id=concept-node-adopt>adopt</dfn> algorithms for nodes<li>The <dfn id=concept-node-insert-ext><a href=https://dom.spec.whatwg.org/#concept-node-insert-ext>insertion steps</a></dfn>,
+    <ul class=brief><li><dfn id=attr><code>Attr</code></dfn> interface<li><dfn id=comment-2><code>Comment</code></dfn> interface<li><dfn id=domimplementation><code>DOMImplementation</code></dfn> interface<li><dfn id=dom-document><code>Document</code></dfn> interface<li><dfn id=xmldocument><code>XMLDocument</code></dfn> interface<li><dfn id=documentfragment><code>DocumentFragment</code></dfn> interface<li><dfn id=documenttype><code>DocumentType</code></dfn> interface<li><dfn id=domexception><code>DOMException</code></dfn> interface<li><dfn id=childnode><code>ChildNode</code></dfn> interface<li><dfn id=element><code>Element</code></dfn> interface<li><dfn id=node><code>Node</code></dfn> interface<li><dfn id=nodelist><code>NodeList</code></dfn> interface<li><dfn id=processinginstruction><code>ProcessingInstruction</code></dfn> interface<li><dfn id=text><code>Text</code></dfn> interface<li><dfn id=node-document><a href=https://dom.spec.whatwg.org/#concept-node-document>node document</a></dfn> concept<li><dfn id=htmlcollection><code>HTMLCollection</code></dfn> interface<li><dfn id=dom-htmlcollection-length><code>HTMLCollection.length</code></dfn> attribute<li><dfn id=dom-htmlcollection-item><code>HTMLCollection.item()</code></dfn> method<li><dfn id=dom-htmlcollection-nameditem><code>HTMLCollection.namedItem()</code></dfn> method<li>The terms <dfn id=collections>collections</dfn> and <dfn id=represented-by-the-collection>represented by the collection</dfn><li><dfn id=domtokenlist><code>DOMTokenList</code></dfn> interface<li><dfn id=domsettabletokenlist><code>DOMSettableTokenList</code></dfn> interface<li><dfn id=dom-domsettabletokenlist-value><code>DOMSettableTokenList.value</code></dfn> attribute<li><dfn id=dom-domimplementation-createdocument><code>createDocument()</code></dfn> method<li><dfn id=dom-domimplementation-createhtmldocument><code>createHTMLDocument()</code></dfn> method<li><dfn id=dom-document-createelement><code>createElement()</code></dfn> method<li><dfn id=dom-document-createelementns><code>createElementNS()</code></dfn> method<li><dfn id=dom-document-getelementbyid><code>getElementById()</code></dfn> method<li><dfn id=dom-document-getelementsbyclassname><code>getElementsByClassName()</code></dfn> method<li><dfn id=dom-node-insertbefore><code>insertBefore()</code></dfn> method<li><dfn id=dom-node-appendchild><code>appendChild()</code></dfn> method<li><dfn id=dom-node-clonenode><code>cloneNode()</code></dfn> method<li><dfn id=dom-document-importnode><code>importNode()</code></dfn> method<li><dfn id=dom-node-childnodes><code>childNodes</code></dfn> attribute<li><dfn id=dom-node-localname><code>localName</code></dfn> attribute<li><dfn id=dom-node-parentnode><code>parentNode</code></dfn> attribute<li><dfn id=dom-node-namespaceuri><code>namespaceURI</code></dfn> attribute<li><dfn id=dom-element-tagname><code>tagName</code></dfn> attribute<li><dfn id=dom-element-id><code>id</code></dfn> attribute<li><dfn id=textcontent><code>textContent</code></dfn> attribute<li>The <dfn id=concept-node-insert>insert</dfn>, <dfn id=concept-node-append>append</dfn>, <dfn id=concept-node-remove>remove</dfn>, <dfn id=concept-node-replace>replace</dfn>, and <dfn id=concept-node-adopt>adopt</dfn> algorithms for nodes<li>The <dfn id=concept-node-insert-ext><a href=https://dom.spec.whatwg.org/#concept-node-insert-ext>insertion steps</a></dfn>,
              <dfn id=concept-node-remove-ext><a href=https://dom.spec.whatwg.org/#concept-node-remove-ext>removing steps</a></dfn>,
          and <dfn id=concept-node-adopt-ext><a href=https://dom.spec.whatwg.org/#concept-node-adopt-ext>adopting steps</a></dfn> hooks<li>The <dfn id=attribute-list>attribute list</dfn> concept.<li>The <dfn id=concept-cd-data>data</dfn> of a text node.<li><dfn id=event><code>Event</code></dfn> interface<li><dfn id=eventtarget><code>EventTarget</code></dfn> interface<li><dfn id=eventinit><code>EventInit</code></dfn> dictionary type<li><dfn id=dom-event-target><code>target</code></dfn> attribute<li><dfn id=dom-event-currenttarget><code>currentTarget</code></dfn> attribute<li><dfn id=dom-event-istrusted><code>isTrusted</code></dfn> attribute<li><dfn id=dom-event-initevent><code>initEvent()</code></dfn> method<li><dfn id=dom-eventtarget-addeventlistener><code>addEventListener()</code></dfn> method<li>The <dfn id=concept-event-type>type</dfn> of an event<li>The concept of an <dfn id=concept-event-listener>event listener</dfn> and the <a href=#concept-event-listener id=dependencies:concept-event-listener>event listeners</a> associated with an <code id=dependencies:eventtarget><a href=#eventtarget>EventTarget</a></code><li>The concept of a <dfn id=concept-event-target-override>target override</dfn><li>The concept of a regular <dfn id=event-parent>event parent</dfn> and a <dfn id=cross-boundary-event-parent>cross-boundary event parent</dfn><li>The <dfn id="document's-character-encoding">encoding</dfn> (herein the <i>character encoding</i>) and <dfn id=concept-document-content-type>content type</dfn> of a <code id=dependencies:document><a href=#document>Document</a></code><li>The distinction between <dfn id=xml-documents>XML documents</dfn> and <dfn id=html-documents>HTML documents</dfn><li>The terms <dfn id=quirks-mode>quirks mode</dfn>, <dfn id=limited-quirks-mode>limited-quirks mode</dfn>, and <dfn id=no-quirks-mode>no-quirks mode</dfn><li>The algorithm to <dfn id=concept-node-clone>clone</dfn> a <code id=dependencies:node><a href=#node>Node</a></code>, and the concept of <dfn id=concept-node-clone-ext>cloning steps</dfn> used by that algorithm<li>The concept of <dfn id=base-url-change-steps>base URL change steps</dfn> and the definition of what happens when an element is <dfn id=affected-by-a-base-url-change>affected by a base URL change</dfn><li>The concept of an element's <dfn id=concept-id>unique identifier (ID)</dfn><li>The concept of a DOM <dfn id=concept-range>range</dfn>, and the terms <dfn id=concept-range-start>start</dfn>, <dfn id=concept-range-end>end</dfn>, and <dfn id=concept-range-bp>boundary point</dfn> as applied to ranges.<li><dfn id=mutationobserver><code>MutationObserver</code></dfn> interface and <dfn id=mutation-observers><a href=https://dom.spec.whatwg.org/#mutation-observers>mutation observers</a></dfn> in general<li><dfn id=promise>Promise</dfn> interface<li>The <dfn id=concept-resolver>resolver</dfn> concept<li>The <dfn id=concept-resolver-fulfill>fulfill</dfn> and <dfn id=concept-resolver-reject>reject</dfn> algorithms</ul>
 
@@ -45892,6 +45892,13 @@ <h4 id=the-template-element>4.12.3 The <dfn><code>template</code></dfn> element<
  }
 &lt;/script></pre>
 
+   <p>This example uses <code id=the-template-element:dom-node-clonenode><a href=#dom-node-clonenode>cloneNode()</a></code> on the
+   <code id=the-template-element:the-template-element-17><a href=#the-template-element>template</a></code>'s contents; it could equivalently have used <code id=the-template-element:dom-document-importnode><a href=#dom-document-importnode>document.importNode()</a></code>, which does the same thing. The
+   only difference between these two APIs is when the <a id=the-template-element:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is updated: with
+   <code id=the-template-element:dom-node-clonenode-2><a href=#dom-node-clonenode>cloneNode()</a></code> it is updated when the nodes are appended
+   with <code id=the-template-element:dom-node-appendchild><a href=#dom-node-appendchild>appendChild()</a></code>, with <code id=the-template-element:dom-document-importnode-2><a href=#dom-document-importnode>document.importNode()</a></code> it is updated when the nodes are
+   cloned.</p>
+
   </div>