How do you get the value from within a span? [Archive]

View Full Version : How do you get the value from within a span?

TrunkMonkey

05-10-2009, 07:42 AM

Let me preface this by saying I am pretty inept with java script.

When viewing the source of the page I'm working with, this is the section I need to grab the value from:

<div id="breadCrumbTrail"><a href="http://www.domainname.com" class="nav">thomasdinardo</a>
 > 
<a href="http://www.domainname.com/Directory" class="nav">DirectoryName</a> > 
<span class="title" id="albumTitle">I NEED THIS VALUE</span>
</div>

I can grab the DirectoryName value succesfully using this:

<script type="text/javascript" language="javascript">
/*=================================*/
/*== Get INeedThisValue For Form ==*/
/*=================================*/
var albumtitleps = YD.get('breadCrumbTrail').childNodes[2].innerHTML;
document.write(albumtitleps);
</script>

For testing, I'm just writing the value directly to the page.

What should I be doing to get to the value in the span?

Thanks!

Tom

TinyScript

05-10-2009, 08:18 AM

not sure if this works in IE, but in FF it works
<div id="breadCrumbTrail"><a href="http://www.domainname.com" class="nav">thomasdinardo</a>
 > 
<a href="http://www.domainname.com/Directory" class="nav">DirectoryName</a> > 
<span class="title" id="albumTitle" onclick="var newElm=document.getElementById('breadCrumbTrail').childNodes[3].nextSibling.innerHTML;alert(newElm)">I NEED THIS VALUE</span>
</div>

which is the same thing as this

<div id="breadCrumbTrail"><a href="http://www.domainname.com" class="nav">thomasdinardo</a>
 > 
<a href="http://www.domainname.com/Directory" class="nav">DirectoryName</a> > 
<span class="title" id="albumTitle" onclick="var newElm=document.getElementById('breadCrumbTrail').childNodes[4].innerHTML;alert(newElm)">I NEED THIS VALUE</span>
</div>

<div id="breadCrumbTrail"><a href="" class="nav" onclick="var newElm=document.getElementById('breadCrumbTrail').childNodes[0].innerHTML;var newElm2=document.getElementById('breadCrumbTrail').childNodes[0].nextSibling.textContent;alert(newElm+newElm2)">thomasdinardo</a>
 > 
<a href="" class="nav" onclick="var newElm=document.getElementById('breadCrumbTrail').childNodes[2].innerHTML;var newElm2=document.getElementById('breadCrumbTrail').childNodes[2].nextSibling.textContent;alert(newElm+newElm2)">DirectoryName</a> > 
<span class="title" id="albumTitle" onclick="var newElm=document.getElementById('breadCrumbTrail').childNodes[4].innerHTML;alert(newElm)">I NEED THIS VALUE</span>
</div>

TrunkMonkey

05-10-2009, 05:49 PM

Excellent! Thanks for getting me squared away.

adios

05-10-2009, 11:24 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<script type="text/javascript">






if (document.ELEMENT_NODE == null) {
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}

var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) {

s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space.

return s;
}

function getTextValue(el) {

var i;
var s;

// Find and concatenate the values of all text nodes contained within the
// element.
s = "";
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes[i].nodeType == document.TEXT_NODE)
s += el.childNodes[i].nodeValue;
else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
el.childNodes[i].tagName == "BR")
s += " ";
else
// Use recursion to get text within sub-elements.
s += getTextValue(el.childNodes[i]);

return normalizeString(s);
}

</script>
</head>
<body>
<div id="breadCrumbTrail"><a href="http://www.domainname.com" class="nav">thomasdinardo</a>
 > 
<a href="http://www.domainname.com/Directory" class="nav">DirectoryName</a> > 
<span class="title" id="albumTitle">I NEED THIS VALUE</span>
</div>
<script type="text/javascript">
var el = document.getElementById('albumTitle');
document.writeln('<h3>' + getTextValue(el) + '</h3>');
</script>
</body>
</html>

TrunkMonkey

05-11-2009, 04:28 AM

Thanks Adios.

TinyScript got me going when he pointed me to: .childNodes[3].nextSibling.innerHTML;

That's what I was missing.

In reviewing your code sample, it's pretty complex (for me). What additional benefits would be had by implementing that solution over the one I'm currently using.

Thanks.

Tom

adios

05-11-2009, 09:32 AM

In reviewing your code sample, it's pretty complex (for me). What additional benefits would be had by implementing that solution over the one I'm currently using.

Mike Hall's explanation here (http://www.brainjar.com/dhtml/tablesort/default4.asp).

I'm not much for these hardcoded DOM tree traversals - go to this node, than that one, then ... any changes to the document will likely rearrange the tree structure, and you're SOL. It's generally better to use routines that look for something based on your criteria, than those which simply assume a node will be where it was when you tested. Mixing 'innerHTML' with DOM is really an issue (http://slayeroffice.com/articles/innerHTML_alternatives/).

Hall's script is pretty straightforward. Hand it an element, it'll drill down and bring back the text in there. You'll save work the next time you need to do this by avoiding fishing around in there, wondering why the node you specified isn't playing ball.

Use Steve Chipman's method (http://slayeroffice.com/articles/innerHTML_alternatives/#2b) if it's more to your liking. Nice tutorial, too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<script type="text/javascript">

function so_getText(obj) {
// return the data of obj if its a text node
if (obj.nodeType == 3) return obj.nodeValue;
var txt = new Array(),i=0;
// loop over the children of obj and recursively pass them back to this function
while(obj.childNodes[i]) {
txt[txt.length] = so_getText(obj.childNodes[i]);
i++;
}
// return the array as a string
return txt.join("");
}

</script>
</head>
<body>
<div id="breadCrumbTrail"><a href="http://www.domainname.com" class="nav">thomasdinardo</a>
 > 
<a href="http://www.domainname.com/Directory" class="nav">DirectoryName</a> > 
<span class="title" id="albumTitle">I NEED THIS VALUE</span>
</div>
<script type="text/javascript">
var el = document.getElementById('albumTitle');
document.writeln('<h3>' + so_getText(el) + '</h3>');
</script>
</body>
</html>

TrunkMonkey

05-11-2009, 07:01 PM

Thanks for the explaination. That makes a lot of sense. In this case you're 100% right, I should try to figure this out since the depth of the span nodes can and probably will increase over time, so my currect solution will not scale.

I'm going to play with this during the week to see if I can figure out how to get it implemented.

Thanks for the help!

Tom