MooTools: Get child nodes

Question

I have the ID of an element. I want to retrieve all child elements and all text nodes. Is there a way to do this in MooTools?

For example, say I have this markup:

<div id="foobar">
    test <img />
</div>

How can I use $('foobar') to select both text node "test" and element "img", like they're siblings?

Answer 1

You can use the get() function to get specific properties of an element that have been set in the Element.properties hash ('html','text' or 'tag' are set by default):

alert($('foobar').get('text'));  //alerts 'test'

And you can use the getChildren() function to get the set of child elements. getChildren() function can take a match, so you could use $('foobar').getChildren('img') to return just the img element, or simply $('foobar').getChildren() to return all elements.

Answer 2

In the example you have given, you can't get "test" as a text node because it's a property of the "foobar" div. If you want to get both nodes you can get the child nodes and the div itself: http://mootools.net/shell/NG3Yn/

However, like @zombat has pointed out, you will have to use get and set('text') in order to manipulate the text.