Help - Search - Members - Calendar
Full Version: DOM: childNodes, nodeType, splitText() methods
Weborum Webmaster Forum > TUTORIAL ARCHIVE - tutorials & scripts to save you scouring the internet. Please feel free to add your own. > Javascript tutorials/scripts
Willy Duitt
Dec 15 2004, 12:16 PM
DOM Example: childNodes, nodeType, createElement

CODE

<script type="text/javascript">
 function format(){
  var p = document.getElementsByTagName('p');
   for(var i=0; i<p.length; i++){
    var node = p[i].childNodes;
     for(var j=0; j<node.length; j++){
       if(node[j].nodeType == 3 && node[j].nodeValue.match(/.*[^\s]/g)){
        var span = document.createElement('span');
            span.style.color = 'red'; // TESTING PURPOSES ONLY, PLEASE REMOVE //;
            span.appendChild(document.createTextNode(node[j].nodeValue));
            node[j].parentNode.replaceChild(span,node[j]);
       }
     }
   }        alert(document.body.innerHTML); // TESTING PURPOSES ONLY, PLEASE REMOVE //;
 }          window.###### = format;

</script>
</head>

<body>
<div>
<p>The <span class="noun">Hare</span> <span class="verb">ran</span> past the <span class="adj">lazy</span> <span class="noun">Tortoise</span>.</p>
<p>The <span class="noun">Hare</span> <span class="verb">ran</span> past the <span class="adj">lazy</span> <span class="noun">Tortoise</span>.</p>


Please Note: window.##### == window.onload

.....Willy

Edit: Changed to title to also reflect splitText() to aide search engine archiving...
Willy Duitt
Dec 16 2004, 02:55 PM
Ok, the person I wrote this code for asked if there was a way to split the varios words up which are contained in one node type #text (node type 3)... So I reworked the code to include the DOM splitText() method...

CODE

<script type="text/javascript">
<!--//
 function addSpans(){ // written by: WillyDuitt@hotmail.com //;
  var p = document.getElementsByTagName('p');
   for(var i=0; i<p.length; i++){
     for(var j=p[i].childNodes.length-1; j>-1; j--){
      var node=p[i].childNodes[j];

       if(node.nodeType == 1){
         for(var k=0; k<node.childNodes.length; k++){
          var span = document.createElement('span');
              span.style.cursor = 'pointer';
              span.className = node.className;
              span.style.color = 'red'; // TESTING PURPOSES ONLY, PLEASE REMOVE //;
              span.onclick = function(){ alert(this.innerHTML+':className='+this.className) };
              span.appendChild(document.createTextNode(node.childNodes[k].nodeValue));
              node.childNodes[k].parentNode.replaceChild(span,node.childNodes[k]);
         }
       }

       if(node.nodeType == 3){
         while(node.nodeValue.lastIndexOf(' ')>-1){
          var span = document.createElement('span');
              span.style.cursor = 'pointer';
              span.style.color = 'blue'; // TESTING PURPOSES ONLY, PLEASE REMOVE //;
              span.onclick = function(){ alert(this.innerHTML+': This word has no class!') };
              span.appendChild(node.splitText(node.nodeValue.lastIndexOf(' ')));
              p[i].insertBefore(span,node.nextSibling);
         }  
       }
     }      

          var span = document.createElement('span');
              span.style.cursor = 'pointer';
              span.style.color = 'blue'; // TESTING PURPOSES ONLY, PLEASE REMOVE //;
              span.onclick = function(){ alert(this.innerHTML+': This word has no class!') };
              span.appendChild(document.createTextNode(node.nodeValue));
              node.parentNode.replaceChild(span,node);
   }
 }            window.###### = addSpans;
//-->
</script>
</head>

<body>
<div>
<p>The test <span class="noun">Hare</span> <span class="verb">ran</span> past the <span class="adj">lazy</span> <span class="noun">Tortoise</span>.</p>
<p>The <span class="noun">Hare</span> <span class="verb">ran</span> past the <span class="adj">lazy</span> <span class="noun">Tortoise</span> test.</p>
</div>


.....Willy

Edit: Fixed a minor oversight of using params when I should have used square bracket notation: var node=p[i].childNodes[j]; ... This was preventing the script to work properly in Mozzila based browsers, which I neglected to test because I only assumed I was writing cross-browser compatable code... Alls well now and the script has now been tested in: IE, Firefox, Opera, Mozilla....
Waleed
Dec 16 2004, 05:56 PM
pardon my dumbness, but what exactly does this do? and how do we use it?
Willy Duitt
Dec 16 2004, 08:01 PM
The script iterates thru all the words contained on a page (as written, all those within a <p> tag) and wraps each one in a span tag including styling and an event handler to fire a function to be used for a custom tooltip (although this example only fires an alert indicating the class name)....

When completed, the words will be matched to a dictionary and classes assigned according to whether the word is an adjective, noun, ect...

I posted it here for the archives and to use those keywords contained in the title to aide someone else looking to use some of the methods I used... Particularly the splitText() method which I only learned of yesterday after studying the DOM docs trying to figure out a way to get it to work... In the first script I was able to target the various text nodes, but I needed something else when the text node was type #text and contained more than one word...

don't ask me anything else because I do not understand it enough to fully explain it, and I wrote it... w00t.gif

.....Willy
Waleed
Dec 17 2004, 10:49 AM
i look exactly like the monkey in your avatar right now...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.