www.webdeveloper.com
Results 1 to 2 of 2

Thread: Removing textNodes

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    488

    Removing textNodes

    I was recently trying to find a better method of replacing text inside HTML elements. WD user Kor (and several others) has mentioned several times on this forum that "innerHTML" is not a DOM standard. We also know that textContent only works on FF and innerText only works on IE (this pays no attention to Chrome and Safari, since they do both). Nevertheless, we need to stay away from these if we want concise code that works cross browser, correct?

    So, I knew I wanted to use textNodes to accomplish this. The best method for inserting things into the document to make sure it goes into the DOM tree as well is to use createElement and createTextNode, and manipulate them using their respective properties. I went and took a look at the textNode properties and methods to see what I could find.

    It turns out that the TextNode object actually has 2 properties that give you their content: "nodeValue" and "data". I'm not quite sure exactly what the difference between the two is, but I'm sure there is one. They are both described exactly the same way in documentation.

    For my purposes, I decided to stick with nodeValue. I figured I could do this one of 2 ways. Create and insert my own TextNode and manipulate it or declare an element object to hold an existing one. Since most of the time, we need to manipulate text that already exists, I'll stick to the first method. There may be cases like "<td></td>" where there is no TextNode and we need to make one though.

    So how do we do this? Text nodes don't have id's or even tags... they're just text! If we know the only thing inside a container is text content, then this is easy... we just use Element.firstChild to refer to the only node inside it--a TextNode. But what if we have "<strong>" tags or "<span>" tags, etc? Or leading/trailing elements?

    What's the best method for referring to TextNodes?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Nodes have another property: nodeType:
    http://www.javascriptkit.com/domref/nodetype.shtml
    Using nodeType you may find not only the textNodes but even the comments, CDATA sections, etc.

    About the difference between data and nodeValue: nodeValue is a more comprehensive property. It can refer the value of an node (any kind of node who might bear a value - for instance an attribute, but not only the native HTML attributes) as well (see DOM 2)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    onload=function(){
    var div=document.getElementsByTagName('div')[0];
    var attValue=div.getAttributeNode('myproperty').nodeValue;
    alert(attValue);
    }
    </script>
    </head>
    <body>
    <div myproperty="some value"></div>
    </body>
    </html>
    In fact we are dealing here with XML DOM applied on HTML/XHTML medium.
    Last edited by Kor; 12-04-2009 at 03:13 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles