PDA

View Full Version : DomQuery selects commented out HTML nodes in IE6/7



CableDawg
9 Apr 2007, 11:15 AM
I stumbled upon the following oddity with IE6/7 and DomQuery. Given a DIV container with some H5s, one of which being commented out, DomQuery was returning the commented out HTML nodes when given this CSS selector:


Ext.select('#container > *')

Now granted... one could argue that commented out nodes still match the asterisk wildcard, but I don't think that is expected behavior. In fact, IE is probably the one adding the nodes to the DOM so it is probably more to blame. But still, figured I would mention it here.

Here is a link to a page containing the bug:

http://luddite.net/derek/test/dq_ie6.html

Again, this only affects IE6/7, not Firefox.

Thanks!

jon.whitcraft
9 Apr 2007, 12:07 PM
What happens when you do a



Ext.select('#container > h5');
just a dumb question...

CableDawg
9 Apr 2007, 12:13 PM
I updated the test page to do both.

The "> h5" selector returns the expected results.

Unfortunately, I needed to select all children regardless of tagName in my project so just selecting a specific tag would not work very well.

My workaround was to check the outerHTML property for HTML comments at the beginning to filter out any unwanted comments from IE6/7

jon.whitcraft
9 Apr 2007, 12:17 PM
OK. Well may i ask is there any reason to have the commented out code in there? if you are using a server side language can you have asp/php/java/cf comment out the code so it doesn't even render the node?

I generally don't try and leave comment out html code in the source unless it's been commented out with a Server Side Language as that's just more bytes for the client to download.

just my 2 cents.

CableDawg
9 Apr 2007, 12:25 PM
Yes, of course, the commented code should definitely be removed. I just thought it was odd that commented code was getting parsed by the browser at all (unless DQ uses innerHTML). I figured I would report what I noticed to help others who may run in to the same problem. I'm sure there are plenty of people that keep comments in their deployed code without realizing that it could impact their project.

jack.slocum
9 Apr 2007, 12:27 PM
* is a query for all nodes. A comment IS a node in IE, so it is being returned. While I can see any reason for wanting comment nodes and I think IEs behavior is wrong, I would suggest using a more specific query if you don't want comment nodes.

You can query for multiple types:

#container > h5, #container > div, #container > span