Your markup is extremely important not only for the display of your application, but also for the complexity and stability of your javascript. There are three important tenets to building a selector friendly DOM.

1. Keep it Lean!

I cannot stress the importance of the markup of your pages enough. Some people think of the markup as being just the browser's input feed, but it is actually much more than that. It is the data model for a face of your application and has three separate but related users: the browser, the javascript, and the css.

Building your markup with all three of these in mind will make your selectors a lot cleaner and easier to work with. Adding DOM elements that aren't necessary will negatively impact all three of these aspects, so just don't do it. Whatever the reason for adding them to begin with, remove them if you don't need them anymore. Having extraneous stuff in there will also hurt our next bullet.

2. Be Consistent!

Your DOM needs to be consistent. This starts with understanding what all the tags actually are and what they are intended for. For example, a "p" tag is for paragraphs. Are you making a paragraph when you use it? If not, then you may want to consider using something else that is better suited. A "div" is for defining a logical block of elements on the screen. A "table" is for displaying tabular data. If you are using it for your page layout, shame on you!

Having a consistent way of creating your DOM will make it a lot easier to write generic selectors. You can't select all the rows in your form cleanly if some of them are wrapped in paragraphs and some are wrapped in divs.

3. Namespace!

Namespace the major portions of your page. It will allow you to write javascript and css that is specific to a portion of the page and will prevent unintended bleed over into other portions of the screen. The simplest example is a typical page layout with a header, left panel, and content pane. Each of these are unique elements on the screen and should have an id. Every selector that is intended for only that piece should then begin with "div#content" or whatever.

Ids and classes aren't just for css, either. If it makes sense, add a class to the elements that you want to select with your javascript even if it is never mentioned in the css. Those attributes are designed for use with selectors and since we use selectors heavily in both css and javascript, it is perfectly acceptable to add them for one or the other or both.

Also, if an element is meant to be totally unique on the screen, like your content pane, use an id instead of a class to distinguish it. By their nature, ids are unique on the screen and classes are for mass assignment, so using them appropriately gives you one more piece of metadata when interacting with your DOM.