mozilla

Compare Revisions

Example

Change Revisions

Revision 202593:

Revision 202593 by Gor1 on

Revision 202594:

Revision 202594 by Gor1 on

Title:
Example
Example
Slug:
Using_the_W3C_DOM_Level_1_Core/Example
Using_the_W3C_DOM_Level_1_Core/Example
Tags:
DOM
DOM
Content:

Revision 202593
Revision 202594
n7    <p>n
8      &lt;html&gt; &lt;head&gt;
9    </p>
nn8&lt;html&gt;
9&lt;head&gt;
11 &lt;title&gt;My Document&lt;/title&gt;10  &lt;title&gt;My Document&lt;/title&gt;
12 &lt;script type="text/javascript"&gt;11  &lt;script type="text/javascript"&gt;
13</pre>
14    <pre class="eval">
15 function change() {12  function change() {
16   // document.getElementsByTagName("H1") returns a NodeList of t13    // document.getElementsByTagName("H1") returns a NodeList of 
>he P>the P
17   // elements in the document, and the first is number 0:14    // elements in the document, and the first is number 0:
18   
19   var header = document.getElementsByTagName("H1").item(0);15    var header = document.getElementsByTagName("H1").item(0);
20   // the firstChild of the header is a Text node:16    // the firstChild of the header is a Text node:
21   header.firstChild.data = "A dynamic document";17    header.firstChild.data = "A dynamic document";
22   // now the header is "A dynamic document".18    // now the header is "A dynamic document".
23   
24   var para = document.getElementsByTagName("P").item(0);19    var para = document.getElementsByTagName("P").item(0);
25   para.firstChild.data = "This is the first paragraph.";20    para.firstChild.data = "This is the first paragraph.";
26   
27   // create a new Text node for the second paragraph21    // create a new Text node for the second paragraph
28   var newText = document.createTextNode("This is the second para22    var newText = document.createTextNode("This is the second par
>graph.");>agraph.");
29   // create a new Element to be the second paragraph23    // create a new Element to be the second paragraph
30   var newElement = document.createElement("P");24    var newElement = document.createElement("P");
31   // put the text in the paragraph25    // put the text in the paragraph
32   newElement.appendChild(newText);26    newElement.appendChild(newText);
33   // and put the paragraph on the end of the document by appendi27    // and put the paragraph on the end of the document by append
>ng it to>ing it to
34   // the BODY (which is the parent of para)28    // the BODY (which is the parent of para)
35   para.parentNode.appendChild(newElement);29    para.parentNode.appendChild(newElement);
36 }30  }
37 &lt;/script&gt;31  &lt;/script&gt;
38</pre>32&lt;/head&gt;
39    <p>33&lt;body&gt;
40      &lt;/head&gt; &lt;body&gt;
41    </p>
42    <pre class="eval">
43 &lt;input type="button" value="Change this document." onclick="c34  &lt;input type="button" value="Change this document." onclick="
>hange()"&gt;>change()"&gt;
t51    <p>t42    <pre class="eval">
52      &lt;/body&gt; &lt;/head&gt;43&lt;/body&gt;
53    </p>44&lt;/head&gt;
45</pre>

Back to History