http://simonwillison.net/2003-03-25T23:38:24+00:00Simon Willison2003-03-25T23:38:24+00:002003-03-25T23:38:24+00:00https://simonwillison.net/2003/Mar/25/getElementsBySelector/#atom-tag

<p>Inspired by <a href="http://blog.mooncalf.me.uk/archive/2003/03/25#RefinedClassFetching" title="document.getElementsByClassName">Andy</a>, I decided to have a crack at something I've been thinking about trying for a long time. <a href="/static/2003/getElementsBySelector.js" title="getElementsBySelector.js"><code>document.getElementsBySelector</code></a> is a javascript function which takes a standard <acronym title="Cascading Style Sheets">CSS</acronym> style selector and returns an array of elements objects from the document that match that selector. For example:</p> <pre><code>document.getElementsBySelector('div#main p a.external') </code></pre> <p>This will return an array containing all of the links that have 'external' in their <code>class</code> attribute and are contained inside a paragraph which is itself contained inside a div with its <code>id</code> attribute set to 'main'.</p> <p>So far I've only tested it on Phoenix but it seems to work as intended for the small number of test cases I've tried. If you spot any bugs please let me know. I'm about to fire up a Windows <acronym title="Personal Computer">PC</acronym> and see how much it breaks in <acronym title="Internet Explorer">IE</acronym>...</p> <p><strong>Update:</strong> I've put together a <a href="/static/2003/getElementsBySelector.html" title="document.getElementsBySelector Demo">demo page</a> showing the function in action. It works fine in <acronym title="Internet Explorer">IE</acronym> 6.</p> <p>Tags: <a href="https://simonwillison.net/tags/css">css</a>, <a href="https://simonwillison.net/tags/getelementsbyselector">getelementsbyselector</a>, <a href="https://simonwillison.net/tags/javascript">javascript</a>, <a href="https://simonwillison.net/tags/projects">projects</a></p>