[Javascript] textNode & innerHTML

SineCosine

I'm still looking for my Tangent
Reaction score
77
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)
 

JerseyFoo

1/g = g-1
Reaction score
40
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.
 

SineCosine

I'm still looking for my Tangent
Reaction score
77
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;
			}
		}
 

JerseyFoo

1/g = g-1
Reaction score
40
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'] !== 0 || 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.
 

SineCosine

I'm still looking for my Tangent
Reaction score
77
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
 

JerseyFoo

1/g = g-1
Reaction score
40
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.
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top