Need to perform complicated task involving nesting of elements

Printable View

10-11-2009, 04:44 AM
techno_race

Need to perform complicated task involving nesting of elements

I am looking for some sort of complex mind-spinning (or not, if that's possible) way to use JavaScript to find all elements in the page that contain only some (not none, not all) content other than nested elements, and take said content and put it in a <span>.

The script must then take all elements that cannot contain content (<img>, anybody?) and those that contain no nested elements and return them like any of the getElement...()
functions.

This script must also delete elements that contain no content.

Example:

This page...

HTML Code:

... <body> Hello there. <em>Check this out.</em><strong></strong> <table><tr> <td></td><td><div>Furball: <img src="..."></div>Yay.</td> <td><div>WOOPWOOPWOOP</div></td> </tr></table> </body> </html>

Will be transformed into this page...

HTML Code:

... <body> <span>Hello there. </span><em>Check this out.</em> <table><tr> <td></td><td><div><span>Furball:</span> <img src="..."></div><span>Yay.<span></td> <td><div>WOOPWOOPWOOP</div></td> </tr></table> </body> </html>

And will be returned just like running document.getElementsByClass('lookyhere'); on...

HTML Code:

... <body> <span class="lookyhere">Hello there. </span><em class="lookyhere">Check this out.</em> <table><tr> <td></td><td><div><span class="lookyhere">Furball:</span> <img src="..." class="lookyhere"></div><span class="lookyhere">Yay.<span></td> <td><div class="lookyhere">WOOPWOOPWOOP</div></td> </tr></table> </body> </html>

Hope someone can help!

Bonus: Who can guess what I'm doing?
It involves Mr. Doob, Greasemonkey, April Fool's Day, and a comment made on the CENSORED posted at CENSORED by me under the name doggitydogs.
10-11-2009, 05:09 AM
jscheuer1

There are few tags with opening and closing tags which cannot contain image tags. But I think (as far as that part goes) you mean simply to skip image tags. And I think you misunderstand what getElements . . . does or are using it here in an attempt to explain something for which it may not be well suited. Anyways, what it looks to me like you are trying to do could be defined this way:

Take all text nodes on a page regardless of where they are and wrap each one in a span tag with a class of "lookyhere".

Does that make sense to you, do you think it would achieve your objective? If so, I can probably make up some code for it. Otherwise please be more specific about what you are after.
10-11-2009, 03:28 PM
techno_race

Sorry, I thought that getElements... just allowed you to perform actions on elements with a common attribute.
For example, document.getElementsByClass('timedate').innerHTML += new Date(); would add the time/date to the end of every element with a class of timedate.
Then couldn't this also be coded as something like...

Code:

var tdEls = document.getElementsByClass('timedate'); var tdVal = new Date(); tdels += tdVal;

That's what I thought... what does it really do?

As for my problem, I need to, yes, wrap all text nodes in a <span>, but it shouldn't have a class. I then need to take all elements that do not contain more elements, like these <span>s, <img>s, and do something with them - I suppose I could assign them a class and then do a document.getElementsByClass("...") on them.

I think that, in the process of writing this, I came up with a way to do this. I'll get back to you.
10-11-2009, 03:32 PM
techno_race

I figured out how to explain this properly. I am looking to wrap all text nodes in a <span>, then to find all elements that cannot contain anything (<img>, etc.) and that do not contain the < symbol, and save them to a variable like var ... = document.getElements... does.