Error performing DOM methods on Sizzle objects

Question

I'm giving Sizzle a try (without jQuery) for DOM selections. I'm mixing the Sizzle selections with native JS to build some animation functionality. I'm encountering errors when performing DOM methods on Sizzle objects. For example:

Sizzle('#masthead-copy').appendChild(foo);

Results in: Object has no method 'appendChild'. But the following works:

document.getElementById('masthead-copy').appendChild(foo);

The same occurs on similar methods throughout:

Sizzle('#masthead-images').getElementsByTagName('foo');

But the following works:

document.getElementById('masthead-images').getElementsByTagName('foo');

It seems Sizzle returns an Array on all selections (even on ids), which may explain the issue here. Is there a common workaround for this?

Answer 1

As indicated in comments, Sizzle returns an Array on all selections, and so selecting ids with Sizzle requires a reference to the first (only) item in the resulting array:

Sizzle('#masthead-copy')[0].appendChild(foo);