PDA

View Full Version : Need to perform complicated task involving nesting of elements



techno_race
10-11-2009, 04:44 AM
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...


...
<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...


...
<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...


...
<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.

jscheuer1
10-11-2009, 05:09 AM
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.

techno_race
10-11-2009, 03:28 PM
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...

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.

techno_race
10-11-2009, 03:32 PM
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.