[Javascript] textNode & innerHTML

Discussion in 'General Webmaster Support' started by SineCosine, Dec 31, 2010.

  1. SineCosine

    SineCosine I'm still looking for my Tangent

    Ratings:
    +76 / 0 / -0
    So, I've decided to stop using innerHTML for good and start using textNode.
    Problem is, I can't do basic things using textNode =/

    PHP:
            alert(get('News').innerHTML);
            
    alert(get('News').firstChild.nodeValue);
    First alert gives me the intended effect:
    Code:
    					<div>
    					<center>
    						<span class="big-font" style="color: yellow;">.~+*^ News ^*+~.</span><br>
    					
    						Welcome to the <span class="big-font">AnyHow~Step</span> Blog<br>
    						We're the first SG-site that's dedicated to providing you with information on all things Pump<br><br>
    	
    						Feel free to browse through the many sections that we have for offer <br><br>
    					</center>
    					<table style="font-size: 0.8em; font-family: verdana;" border="0">
    					<tbody><tr>
    					<td>
    		
    						List of working links:
    						<ul>
    							<li>Home</li>
    							<li>Archive</li>
    							<li>Pumpers</li>
    							<li>Shout Out!</li>
    							<li>Gallery</li>
    							<li>Fiesta: Song List</li>
    						</ul>
    	
    					</td>
    					</tr>
    					</tbody></table>
    		
    						<table style="font-size: 0.8em; font-family: verdana;" border="0">
    						<tbody><tr><th colspan="2">
    							<u><b>Pump It Up Pro 2 Qualifying &amp; Quarter Finals</b></u><br>
    						</th>
    						</tr><tr>
    							<td>
    								<b>Time:&nbsp;</b>
    							</td>
    							<td>								
    								Saturday, January 8, 2011 ยท 10:30am - 4:00pm
    							</td>
    						</tr>
    						<tr>
    							<td>
    								<b>Location:&nbsp;</b>
    							</td>
    							<td>
    								Bedok Point (New Shopping Centre)
    							</td>
    						</tr>
    						<tr>
    							<td>
    								<b>Extra Info:&nbsp;</b>
    							</td>
    							<td>
    								<br><br><br>
    								All Preliminary Round players who have qualified are to attend the Event with a total of 16Guys and 8Girls.<br>
    								Players are to follow the rules.<br>
    								No Vulgarities allowed.<br><br>
    
    								Preliminary Round players who interested in the Routines section are to be alert when the instructions are given.
    								Note that the Judges will choose only <b>four</b> teams and Judges' decisions are final.<br><br>
    
    								A gentle reminder: Barefoot-playing is forbidden<br><br>
    
    								PRELIMINARY PLAYERS ARE TO REPORT BY 10.30AM.<br>
    								Match ups will be decided by the drawing of lots.
    							</td>
    						</tr>
    						</tbody></table>
    						
    
    					<center>
    						<span class="mini-font">
    							Best viewed with:<br>
    							Mozilla Firefox<br>
    							Screen Resolution - 1360 X 768	<br>
    						</span><br>
    					</center>
    					</div>
    					
    While the second alert gives me nothing:
    Code:
    null
    
    Am I doing something wrong here? o.0
    (And yes, I've been googling =x)
     
  2. JerseyFoo

    JerseyFoo 1/g = g-1

    Ratings:
    +40 / 0 / -0
    I assume you're using my get function...
    Code:
                
    var eles = [];
    function get(id){
        return eles[id] || (eles[id] = document.getElementById(id)) || false;
    }
    This uses eles as an element-cache, it needs to be global. It also will not work if the id is assigned to a different element.

    Never seen nodeValue used as a replacement for innerHTML, textContent, innerText... can't remember why.
     
  3. SineCosine

    SineCosine I'm still looking for my Tangent

    Ratings:
    +76 / 0 / -0
    I have a few elements that get removed and added again over the course of the users visit.
    And so, I changed your 'get' function.

    PHP:
            function get (id) {
                if if (
    elements[id] == document.getElementById(id)) {
                    return 
    elements[id];
                } else if (
    document.getElementById(id)) {
                    return 
    elements[id] = document.getElementById(id);
                } else {
                    
    alert('function get(id) error: Element \'' id '\' requested, Not found.');
                    return 
    null;
                }
            }

     
  4. JerseyFoo

    JerseyFoo 1/g = g-1

    Ratings:
    +40 / 0 / -0
    Your use of it severely misses the point and is ridiculous, go back to document.getElementById(). The point of my function is to cache DOM lookups, while yours not only defeats that but creates a second DOM lookup.

    EDIT:
    Let me explain exactly what this does...
    PHP:
    /* Background;
    DOM lookups in JavaScript are expensive, anything involving the document object is considerably slower.

    You'll likely need to access HTML elements by ID very often, and elements you access by a particular ID will usually be constant.  Assuming you have good JS practices and HTML structure.
    */
    var eles = [];
    function 
    get(id){
        return 
    eles[id] || (eles[id] = document.getElementById(id)) || false;
    }

    // Essentially is the same as... (logically)
    if ( typeof(eles['someId']) !== 'undefined' || eles['someId'] !== null ||  eles['someId'] !== false || eles['someId'] !== || eles['someId'] !== '' ){  // ie. !eles['someId']
        
    return eles['someId'];
    } else if ( 
    document.getElementById('someId') ){
        
    eles['someId'] = document.getElementById('someId');
        return 
    eles['someId'];
    } else {
       
    eles['someId'] = null;
       return 
    false// useful to check if element exists;  get('someId') !== false
    }
    // Except so much faster and convenient.
     
  5. SineCosine

    SineCosine I'm still looking for my Tangent

    Ratings:
    +76 / 0 / -0
    Oh, sorry about that.
    I guess I'll revert.

    But the thing is, this 'News' section never has its id changed =/
    So my much slower function and your get function doesn't really have anything to do with nodeValue returning null =x
     
  6. JerseyFoo

    JerseyFoo 1/g = g-1

    Ratings:
    +40 / 0 / -0
    Ah, I mis-read your problem, I thought you were checking nodeValue twice and it returned null the second time.

    The problem is that firstChild is a white space element. Also, firstChild.nodeValue would be equivalent to firstChild.innerHTML if it works.
     

Share This Page