Using the W3C DOM

  • Revision slug: Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM
  • Revision title: Using the W3C DOM
  • Revision id: 5165
  • Created:
  • Creator: Ayandatta
  • Is current revision? No
  • Comment /* Changing an Element's Text Using the DOM */

Revision Content

The document objects for some browsers have properties for accessing arrays of elements and types of elements. document.all[], for example, is used by Internet Explorer to access particular elements within the document. Many of these arrays were not made a part of the W3C specification for the Document Object Model and will cause JavaScript errors in standards-compliant browsers like Firefox, Seamonkey and Netscape 7+.

The W3C Document Object Model exposes almost all of the elements in an HTML page as scriptable objects. In general the attributes and methods of the W3C DOM are more powerful than the proprietary object models used in DHTML programming. The attributes and methods of the W3C DOM are overall well supported by modern browsers like MSIE 7, Opera 9, Safari 2, Konqueror 3.x and Mozilla-based browsers (Firefox, Seamonkey, Netscape 7+, Camino): so there is no gain from relying on proprietary object models.

Unsupported DOM-related Properties

The following document object properties are not supported in the W3C Document Object Model:

  • document.layers[]
  • id_attribute_value
  • document.all
  • document.all.id_attribute_value
  • document.all{{mediawiki.external('id_attribute_value')}}

The following form related properties (originally from Internet Explorer) are not supported in the W3C Document Object Model:

  • FormName.InputName.value
  • InputName.value
  • FormCtrlName
  • document.forms(0)

Scripts that use these properties will not execute in Firefox, Mozilla and Netscape 7+ or other standards-compliant browsers. Instead, use the W3C DOM access attributes and access methods described in the next section; since these are supported by Internet Explorer too, then there is no need to use MSIE-specific attributes and methods.

Accessing Elements with the W3C DOM

The best and most supported practice for getting scriptable access to an element in an HTML page is to use document.getElementById(id). A very wide majority of browsers (MSIE 5+, Firefox, NS 7+, Seamonkey, Opera 6+, Safari 1.x, Konqueror 3.x, etc.) support document.getElementById(id). This method returns a reference to the uniquely identified element, which can then be used to script that element. For example, the following short sample dynamically sets the left margin of a div element with an id of "inset" to half an inch:

// in the HTML: <div id="inset">Sample Text</div>
document.getElementById("inset").style.marginLeft = ".5in";
IE-specific ways to access elements W3C web standards replacements
id_attribute_valuedocument.getElementById(id_attribute_value)
document.all.id_attribute_valuedocument.getElementById(id_attribute_value)
document.all{{mediawiki.external('id_attribute_value')}}document.getElementById(id_attribute_value)
FormName.InputName.valuedocument.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or
document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value
InputName.valuedocument.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or
document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value
FormCtrlNamedocument.forms{{mediawiki.external('\"FormName\"')}}.FormCtrlName or
document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"FormCtrlName\"')}}
document.forms(0)document.forms{{mediawiki.external(0)}}

More on accessing forms and form elements:
Referencing Forms and Form Controls by comp.lang.javascript newsgroup FAQ notes
DOM 2 specification on accessing forms and form elements
Referencing Forms and Form elements correctly, Javascript Best Practices, by Matt Kruse

For accessing a group of elements, the DOM specification also includes getElementsByTagName, which returns a list of all the elements with the given tag name in the order they appear in the document:

var arrCollection_Of_Pargs = document.getElementsByTagName("p");
var objFirst_Parg = arrCollection_Of_Pargs[0];
// objFirst_Parg will reference the first paragraph in the document
objFirst_Parg.style.border = "2px solid green";
// and now, the first paragraph in the document 
// gets a 2px solid green border.

In addition to these access methods, the W3C DOM2 specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events raised as the user interacts with the document itself.

Manipulating Document Style and Content

Changing an Element's Style Using the DOM

The following table describes standards-based methods for accessing and updating style rules defined for various HTML elements in a web page. See the W3C DOM2 Recommendation, CSS2 Extended Interface.

DOM level 2 provides for the assignment of new values to the CSS properties of an element using the ElemRef.style object reference. You can get a reference to the element to which that style corresponds by using the DOM's getElementById or one of the other methods described in the DOM access section above.

Deprecated coding practices Appropriate DOM 2 replacements
IE5+: ElemRef.style.pixelLeft DOM level 2: parseInt(ElemRef.style.left, 10)
IE5+: ElemRef.style.pixelTop DOM level 2: parseInt(ElemRef.style.top, 10)
IE5+: ElemRef.style.pixelLeft = x;
ElemRef.style.pixelTop = y;
DOM level 2:

ElemRef.style.left = x + "px";

ElemRef.style.top = y + "px";
W3C DOM2 Reflection of an Element's CSS Properties

Keep in mind that according to the W3C Recommendation, the values returned by the style property of an element reflect static settings in the element's STYLE attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:

  • Place all of the element's static CSS declarations (if it has any) in the element's STYLE attribute.
  • Use no static CSS declarations for the element and initialize its CSS properties from JavaScript through the DOM.
W3C DOM2 Reflection of an Element's CSS Positioning Properties

The values returned by the W3C DOM2 style.left and style.top properties are strings that include the CSS unit suffix (such as "px"), whereas IE5+ ElemRef.style.pixelLeft (and the corresponding properties for top) return an integer. So, if you want to get the element's inline STYLE settings for left and top as integers, parse the integer from the string by using parseInt(). Conversely, if you want to set the element's inline STYLE settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.

CSS 1 and CSS 2.x specifications require that non-zero values must be specified with a length unit; otherwise, the css declaration will be ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
CSS 2.1 Rules for handling parsing errors

Changing an Element's Text Using the DOM

Changing the actual text content of an element has changed substantially compared to the normal means of operation. Each element's content is broken up into a set of child nodes, consisting of plain text and sub-elements. In order to change the text of the element, the script operates on the node.

The node structure and supporting methods are defined in the W3C DOM level 1 recommendation.

If the element has no sub-elements, just text, then it (normally) has one child node, accessed as ElemRef.childNodes{{mediawiki.external(0)}}. In such precise case, the W3C web standards equivalent of ElemRef.innerText is ElemRef.childNodes{{mediawiki.external(0)}}.nodeValue. We could introduce DOM 3 Core textContent attribute here which is supported by Mozilla 1.5+, Safari 2.x, Opera 9.x and is a perfect equivalent to MSIE's innerText. http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent

The following examples show how to modify the text of a SPAN element that already exists in the HTML file.

<body>
  <p>Papa's got <span id="dynatext">a lot of nerve</span>!</p>

  <script type="text/javascript">
// get a reference to the SPAN element
var SpanElemRef = document.getElementById("dynatext");

// implement SpanElemRef.innerText = "a brand new bag"
var new_txt = document.createTextNode("a brand new bag");
SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);

// alternate, slightly more dangerous implementation
//(will not work if childNodes[0] is not a text node)
SpanElemRef.childNodes[0].nodeValue = "a brand new bag";

// implement SpanElemRef.innerHTML = "a brand <b>new</b> bag"
var new_el = document.createElement(SpanElemRef.nodeName);
new_el.appendChild(document.createTextNode("a brand "));
var bold_el = document.createElement("b");
bold_el.appendChild(document.createTextNode("new"));
new_el.appendChild(bold_el);
new_el.appendChild(document.createTextNode(" bag"));
SpanElemRef.parentNode.replaceChild(new_el, SpanElemRef);
  </script>
</body>

The first example shows the relatively simple method of replacing the text in the SPAN by substituting a new text node for the original. The assumption here is that the SPAN has a single, text child; the code would work even if that were not true, but the results might be unexpected.

The second example shows a more concise but brute-force technique of accomplishing the same thing. As noted, if the first child node is not a text node, this action will not work: although sub-element nodes have a nodeValue, the contents of that field are not displayed in the document.

The final example shows a technique equivalent to setting innerHTML. First, it constructs a new element, created as the same type (SPAN) as the original. Next it adds three nodes: an initial text node, a B element with its own text node, and a final text node. The script then accesses the SPAN element's parent (the P element), and substitutes the new element for the original SPAN in the parent's list of child nodes.

It should be clear that translating scripts to modify document content is not a trivial undertaking. The benefit of such a conversion is that the script will work in modern, W3C DOM-compliant browsers such as Firefox 2, Seamonkey 1, Netscape 7+ and other Gecko-based browsers. Requirements of backward compatibility, however, will not only prolong but worsen the difficulties of dealing with multiple platforms.

Useful references on changing an element's text using the DOM

{{ wiki.languages( { "ja": "ja/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM" } ) }}

Revision Source

<p>
</p><p>The <code>document</code> objects for some browsers have properties for accessing arrays of elements and types of elements. <code>document.all[]</code>, for example, is used by Internet Explorer to access particular elements within the document. Many of these arrays were not made a part of the <abbr title="World Wide Web Consortium">W3C</abbr> specification for the Document Object Model and will cause JavaScript errors in standards-compliant browsers like Firefox, Seamonkey and Netscape 7+.
</p><p>The <a class="external" href="http://www.w3.org/DOM/DOMTR"><abbr title="World Wide Web Consortium">W3C</abbr> Document Object Model</a> exposes almost all of the elements in an HTML page as scriptable objects. In general the attributes and methods of the <abbr title="World Wide Web Consortium">W3C</abbr> DOM are more powerful than the proprietary object models used in DHTML programming. <strong>The attributes and methods of the <abbr title="World Wide Web Consortium">W3C</abbr> DOM are overall well supported by modern browsers like MSIE 7, Opera 9, Safari 2, Konqueror 3.x and Mozilla-based browsers (Firefox, Seamonkey, Netscape 7+, Camino): so there is no gain from relying on proprietary object models</strong>.
</p>
<h3 name="Unsupported_DOM-related_Properties"> Unsupported DOM-related Properties </h3>
<p>The following <code>document</code> object properties are not supported in the <abbr title="World Wide Web Consortium">W3C</abbr> Document Object Model:
</p>
<ul><li> <code>document.layers[]</code>
</li><li> <code>id_attribute_value</code>
</li><li> <code>document.all</code>
</li><li> <code>document.all.id_attribute_value</code>
</li><li> <code>document.all{{mediawiki.external('id_attribute_value')}}</code>
</li></ul>
<p>The following form related properties (originally from Internet Explorer) are not supported in the <abbr title="World Wide Web Consortium">W3C</abbr> Document Object Model:
</p>
<ul><li> <code>FormName.InputName.value</code>
</li><li> <code>InputName.value</code>
</li><li> <code>FormCtrlName</code>
</li><li> <code>document.forms(0)</code>
</li></ul>
<p>Scripts that use these properties will not execute in Firefox, Mozilla and Netscape 7+ or other standards-compliant browsers. <strong>Instead, use the <abbr title="World Wide Web Consortium">W3C</abbr> DOM access attributes and access methods described in the next section; since these are supported by Internet Explorer too, then there is no need to use MSIE-specific attributes and methods.</strong>
</p>
<h3 name="Accessing_Elements_with_the_W3C_DOM"> Accessing Elements with the <abbr title="World Wide Web Consortium">W3C</abbr> DOM </h3>
<p><strong>The best and most supported practice for getting scriptable access to an element in an HTML page is to use <code>document.getElementById(<var>id</var>)</code>.</strong> A very wide majority of browsers (MSIE 5+, Firefox, NS 7+, Seamonkey, Opera 6+, Safari 1.x, Konqueror 3.x, etc.) support document.getElementById(<var>id</var>). This method returns <strong>a reference to the uniquely identified element</strong>, which can then be used to script that element. For example, the following short sample dynamically sets the left margin of a <code>div</code> element with an <code>id</code> of "inset" to half an inch:
</p>
<pre>// in the HTML: &lt;div id="inset"&gt;Sample Text&lt;/div&gt;
document.getElementById("inset").style.marginLeft = ".5in";</pre>
<table cellpadding="4" class="standard-table" id="dom_access" summary="List of Internet Explorer specific ways to access elements in a document or form elements (1st, left column) and their respective W3C web standards replacements (2nd, right column)">

  <tbody><tr style="text-align: center;"><th scope="col">IE-specific ways to access elements</th><th scope="col">
  <abbr title="World Wide Web Consortium">W3C</abbr> web standards replacements</th></tr>
  <tr><td>id_attribute_value</td><td>document.getElementById(id_attribute_value)</td></tr>
  <tr><td>document.all.id_attribute_value</td><td>document.getElementById(id_attribute_value)</td></tr>
  <tr><td>document.all{{mediawiki.external('id_attribute_value')}}</td><td>document.getElementById(id_attribute_value)</td></tr>
  <tr><td>FormName.InputName.value</td><td>document.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or<br>
  document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value</td></tr>
  <tr><td>InputName.value</td><td>document.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or<br>
  document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value</td></tr>
  <tr><td>FormCtrlName</td><td>document.forms{{mediawiki.external('\"FormName\"')}}.FormCtrlName or<br>
  document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"FormCtrlName\"')}}</td></tr>
  <tr><td>document.forms(0)</td><td>document.forms{{mediawiki.external(0)}}</td></tr>
 </tbody></table>
<p>More on accessing forms and form elements:<br>
<a class="external" href="http://jibbering.com/faq/faq_notes/form_access.html">Referencing Forms and Form Controls</a> by comp.lang.javascript newsgroup FAQ notes<br>
<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">DOM 2 specification on accessing forms and form elements</a><br>
<a class="external" href="http://www.javascripttoolbox.com/bestpractices/#forms">Referencing Forms and Form elements correctly</a>, Javascript Best Practices, by Matt Kruse
</p><p>For accessing a group of elements, the DOM specification also includes <code>getElementsByTagName</code>, which returns a list of all the elements with the given tag name in the order they appear in the document:
</p>
<pre>var arrCollection_Of_Pargs = document.getElementsByTagName("p");
var objFirst_Parg = arrCollection_Of_Pargs[0];
// objFirst_Parg will reference the first paragraph in the document
objFirst_Parg.style.border = "2px solid green";
// and now, the first paragraph in the document 
// gets a 2px solid green border.
</pre>
<p>In addition to these access methods, the <abbr title="World Wide Web Consortium">W3C</abbr> DOM2 specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events raised as the user interacts with the document itself.
</p>
<h3 name="Manipulating_Document_Style_and_Content"> Manipulating Document Style and Content </h3>
<h4 name="Changing_an_Element.27s_Style_Using_the_DOM"> Changing an Element's Style Using the DOM </h4>
<p><span id="dom_manip"></span>
The following table describes standards-based methods for accessing and updating style rules defined for various HTML elements in a web page. See the <abbr title="World Wide Web Consortium">W3C</abbr> DOM2 Recommendation, <a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-extended">CSS2 Extended Interface</a>.
</p><p>DOM level 2 provides for the assignment of new values to the CSS properties of an element using the <code><var>ElemRef</var>.style</code> object reference. You can get a reference to the element to which that style corresponds by using the DOM's <code>getElementById</code> or one of the other methods described in the <a href="#dom_access">DOM access section</a> above.
</p>
<table cellpadding="4" class="standard-table" summary="List of some non-standard ways to modify the style of an element (1st, left column) and their respective standard compliant replacement (2nd, right column)">

<tbody><tr style="text-align: center;">
<th scope="col">Deprecated coding practices</th>
<th scope="col">Appropriate DOM 2 replacements</th>
</tr>

<tr>
<td>IE5+: <code><var>ElemRef</var>.style.pixelLeft</code></td>
<td>DOM level 2: <code>parseInt(<var>ElemRef</var>.style.left, 10)</code></td>
</tr>

<tr>
<td>IE5+: <code><var>ElemRef</var>.style.pixelTop</code></td>
<td>DOM level 2: <code>parseInt(<var>ElemRef</var>.style.top, 10)</code></td>
</tr>

<tr>
<td>IE5+: <code><var>ElemRef</var>.style.pixelLeft = <var>x</var>;<br>
<var>ElemRef</var>.style.pixelTop = <var>y</var>;</code></td>
<td>DOM level 2:<br>
<p><code><var>ElemRef</var>.style.left = <var>x</var> + "px";</code><br>
</p>
<code><var>ElemRef</var>.style.top = <var>y</var> + "px";</code></td>
</tr>

</tbody></table>
<h5 name="W3C_DOM2_Reflection_of_an_Element.27s_CSS_Properties"> <abbr title="World Wide Web Consortium">W3C</abbr> DOM2 Reflection of an Element's CSS Properties </h5>
<p>Keep in mind that according to the <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation, the values returned by the style property of an element reflect static settings in the element's <code>STYLE</code> attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:
</p>
<ul><li> Place all of the element's static CSS declarations (if it has any) in the element's <code>STYLE</code> attribute.
</li><li> Use no static CSS declarations for the element and initialize its CSS properties from JavaScript through the DOM.
</li></ul>
<h5 name="W3C_DOM2_Reflection_of_an_Element.27s_CSS_Positioning_Properties"> <abbr title="World Wide Web Consortium">W3C</abbr> DOM2 Reflection of an Element's CSS Positioning Properties </h5>
<p>The values returned by the <abbr title="World Wide Web Consortium">W3C</abbr> DOM2 <code>style.left</code> and <code>style.top</code> properties are strings that include the CSS unit suffix (such as "px"), whereas IE5+ <code><var>ElemRef</var>.style.pixelLeft</code> (and the corresponding properties for top) return an integer. So, if you want to get the element's inline <code>STYLE</code> settings for left and top as integers, parse the integer from the string by using <code>parseInt()</code>. Conversely, if you want to set the element's inline <code>STYLE</code> settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.
</p><p><strong>CSS 1 and CSS 2.x specifications require that non-zero values must be specified with a length unit; otherwise, the css declaration will be ignored.</strong> Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C standards-compliant browsers enforce such handling of parsing error.<br>
<a class="external" href="http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing">CSS 1 Forward-compatible parsing</a><br>
<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">CSS 2.1 Rules for handling parsing errors</a>
</p>
<h4 name="Changing_an_Element.27s_Text_Using_the_DOM"> Changing an Element's Text Using the DOM </h4>
<p>Changing the actual text content of an element has changed substantially compared to the normal means of operation. Each element's content is broken up into a set of child nodes, consisting of plain text and sub-elements. In order to change the text of the element, the script operates on the node.
</p><p>The node structure and supporting methods are defined in the <abbr title="World Wide Web Consortium">W3C</abbr> <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM level 1</a> recommendation.
</p><p>If the element has no sub-elements, just text, then it (normally) has one child node, accessed as <code>ElemRef.childNodes{{mediawiki.external(0)}}</code>. In such precise case, the W3C web standards equivalent of <code>ElemRef.innerText</code> is <code>ElemRef.childNodes{{mediawiki.external(0)}}.nodeValue</code>.
<span class="comment">We could introduce DOM 3 Core textContent attribute here which is supported by Mozilla 1.5+, Safari 2.x, Opera 9.x and is a perfect equivalent to MSIE's innerText. http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent</span>
</p><p>The following examples show how to modify the text of a <code>SPAN</code> element that already exists in the HTML file.
</p>
<pre>&lt;body&gt;
  &lt;p&gt;Papa's got &lt;span id="dynatext"&gt;a lot of nerve&lt;/span&gt;!&lt;/p&gt;

  &lt;script type="text/javascript"&gt;
// get a reference to the SPAN element
var SpanElemRef = document.getElementById("dynatext");

// implement SpanElemRef.innerText = "a brand new bag"
var new_txt = document.createTextNode("a brand new bag");
SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);

// alternate, slightly more dangerous implementation
//(will not work if childNodes[0] is not a text node)
SpanElemRef.childNodes[0].nodeValue = "a brand new bag";

// implement SpanElemRef.innerHTML = "a brand &lt;b&gt;new&lt;/b&gt; bag"
var new_el = document.createElement(SpanElemRef.nodeName);
new_el.appendChild(document.createTextNode("a brand "));
var bold_el = document.createElement("b");
bold_el.appendChild(document.createTextNode("new"));
new_el.appendChild(bold_el);
new_el.appendChild(document.createTextNode(" bag"));
SpanElemRef.parentNode.replaceChild(new_el, SpanElemRef);
  &lt;/script&gt;
&lt;/body&gt;
</pre>
<p>The first example shows the relatively simple method of replacing the text in the <code>SPAN</code> by substituting a new text node for the original. The assumption here is that the <code>SPAN</code> has a single, text child; the code would work even if that were not true, but the results might be unexpected.
</p><p>The second example shows a more concise but brute-force technique of accomplishing the same thing. As noted, if the first child node is not a text node, this action will not work: although sub-element nodes have a <code>nodeValue</code>, the contents of that field are not displayed in the document.
</p><p>The final example shows a technique equivalent to setting <code>innerHTML</code>. First, it constructs a new element, created as the same type (<code>SPAN</code>) as the original. Next it adds three nodes: an initial text node, a <code>B</code> element with its own text node, and a final text node. The script then accesses the <code>SPAN</code> element's parent (the <code>P</code> element), and substitutes the new element for the original <code>SPAN</code> in the parent's list of child nodes.
</p><p>It should be clear that translating scripts to modify document content is not a trivial undertaking. The benefit of such a conversion is that the script will work in modern, <abbr title="World Wide Web Consortium">W3C</abbr> DOM-compliant browsers such as Firefox 2, Seamonkey 1, Netscape 7+ and other Gecko-based browsers. Requirements of backward compatibility, however, will not only prolong but worsen the difficulties of dealing with multiple platforms.
</p><p>Useful references on changing an element's text using the DOM
</p>
<ul><li> <a href="en/Whitespace_in_the_DOM">Whitespace in the DOM</a> by David Baron
</li><li> <a class="external" href="http://slayeroffice.com/articles/innerHTML_alternatives/">Alternatives to innerHTML</a> for more advanced users
</li><li> <a class="external" href="http://www.developer-x.com/content/innerhtml/">innerHTML VS DOM</a> by Tim Scarfe; an <b>excellent article</b>, for more advanced users
</li><li> <a class="external" href="http://www.gtalbot.org/DHTMLSection/innerHTMLvsNodeValue.html">Speed and performance comparison between innerHTML attribute and DOM's nodeValue when modifying the text data of a text node</a> by Gérard Talbot
</li><li> <a class="external" href="http://www.gtalbot.org/DHTMLSection/DOM2CharacterData.html">Interactive DOM level 2 CharacterData Interface attributes and methods tests</a>: other ways to modify (replace, delete, manipulate) efficiently text nodes in the DOM by Gérard Talbot
</li></ul>
<div class="noinclude">
</div>
{{ wiki.languages( { "ja": "ja/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM" } ) }}
Revert to this revision