dean.edwards.name/weblog/2005/08/cssquery2/

Comment: #1

Excellent! Thanks Dean!

Comment: #2

I’m a huge fan of your work and am very pleased to hear that you improved Safari support!

Thank you!

Comment: #3

Great work!
I can see some uses for this!

On a related note, when is your IE7 going to work with PNGa set as background-image (or does it)?

Comment: #4

Thanks for this, Dean.

What I’d like to see, in addition to your cssQuery() method is a method that tests a specified element to see if it satisfies a given css selector. The behaviour.js library by Ben Nolan is an example of why this would be useful. That library uses Simon Willison’s getElementBySelector() function, but invokes it repeatedly on the same document, effectively traversing the document n times. In applications like this, I suspect it is more efficient to traverse the document once, testing each element in turn to see if it matches each selector of interest. I assume that this is the way browsers apply styles to a document…

Comment: #5

Thanks Dean, now I can hack your cssQuery into the Behaviour library[1] to force better opera and safari support.

Implementing unobtrusive JS gets easier every day thanks to people like yourself!

[1]http://bennolan.com/behaviour/

Comment: #6

Browsercam? I sure hope you didn’t pay for that, Dean…

Comment: #7

The ability to select a parent element of a given node based on CSS attributes would be useful to me (and probably generally useful). In other words, CSS allows you to select down the DOM, whereas with CSSQuery, you could offer the ability to select up the DOM tree.

Comment: #8

Browsercam? I sure hope you didn’t pay for that, Dean…

I have a free account provided by a satisified IE7 user.

Comment: #10

I thought it was rather easy to do all this. I have a $ object that can get or test any element (cross browser or I’d use Element.prototype) based on id, tagName, attribute by String or RegExp. The code is only maybe 3k, and isn’t too slow – but I’m not doing anything fancy like caching.

It also provides a setAttributes() that you can pass pairs of strings to. As soon as I’ve set up dean’s starlight I’ll post the code up.

Comment: #11

Great! I use CSSQuery a lot! Thanks!

Comment: #12

I’ve been working with this and found one edge case that doesn’t work — attributes whose values contain brackets, such as “arrivaldate[]”. Trying to query these elements with cssQuery(“input[names=’arrivaldate[]’]”) doesn’t work.

Names like this are often used on PHP pages, to get multiple fields with the same name to form themselves into an array back on the server.

Comment: #13

(Of course the above should have been name= rather than names= — the bug remains, though. I’ve found ways to work around it, and the library itself has made my life much easier.)

Comment: #14

I think I found a problem with cssQuery() not returning a match with this selector:

div div ol li #beta { ... }

e.g.

<div>
<div>
<ol>
<li id="alpha">x</li>
<li id="beta">y</li>
</ol>
</div>
</div>

Comment: #15

Anthon – that selector is not a match. You would need to use this instead:

div div ol li#beta { ... }

Note the removal of the space between li and #beta.

Comment: #16

Thanks. My oopsie.

Please accept the following patches. The first is for IE4. The second rounds out the handling of supposed attribute naming conflicts.

--- /home/apang/download/ajax/cssQuery/src/cssQuery.js  2005-08-19 22:04:32.000000000 -0400
+++ cssQuery.js 2005-12-22 14:05:41.000000000 -0500
@@ -167,7 +167,7 @@
 // IE5/6 includes comments (LOL) in it's elements collections.
 // so we have to check for this. the test is tagName != "!". LOL (again).
 var thisElement = function($element) {
-       return ($element && $element.nodeType == 1 &&$element.tagName != "!") ? $element : null;
+       return ($element && (typeof $element.nodeType == "undefined" || $element.nodeType == 1) && $element.tagName != "!") ? $element : null;
 };

 // return the previous element to the supplied element

--- /home/apang/download/ajax/cssQuery/src/cssQuery-level2.js   2005-08-19 17:30:08.000000000 -0400
+++ cssQuery-level2.js  2005-12-22 14:03:41.000000000 -0500
@@ -95,9 +95,17 @@
                case "id":
                        return "e.id";
                case "class":
+               case "classname":
                        return "e.className";
                case "for":
+               case "htmlfor":
                        return "e.htmlFor";
+               case "http-equiv":
+               case "httpequiv":
+                       return "e.httpEquiv";
+               case "accept-charset":
+               case "acceptcharset":
+                       return "e.acceptCharset";
                case "href":
                        if (isMSIE) {
                                // IE always returns the full path not the fragment in the href attribute

Comment: #17

I missed this additional change in cssQuery.js, and revised my patch for cssQuery-level2.js. (This just leaves an IE4 substitute for DOM traversal unimplemented, e.g., e.firstChild.)

@@ -228,7 +228,7 @@
 };

var getElementsByTagName = function($element, $tagName) {
-       return ($tagName == "*" && $element.all) ? $element.all : $element.getElementsByTagName($tagName);
+       return ($tagName == "*") ? ($element.all ? $element.all : $element.getElementsByTagName($tagName)) : ($element.all ? $element.all.tags($tagName) : $element.getElementsByTagName($tagName));
 };

 var compareTagName = function($element, $tagName, $namespace) {

--- /home/apang/download/ajax/cssQuery/src/cssQuery-level2.js   2005-08-19 17:30:08.000000000 -0400
+++ cssQuery-level2.js  2005-12-22 14:55:42.000000000 -0500
@@ -95,9 +95,17 @@
                case "id":
                        return "e.id";
                case "class":
-                       return "e.className";
+               case "classname":
+                       return "e.getAttribute('"+name+"')||e.className";
                case "for":
-                       return "e.htmlFor";
+               case "htmlfor":
+                       return "e.getAttribute('"+name+"')||e.htmlFor";
+               case "http-equiv":
+               case "httpequiv":
+                       return "e.getAttribute('"+$name+"')||e.httpEquiv";
+               case "accept-charset":
+               case "acceptcharset":
+                       return "e.getAttribute('"+$name+"')||e.acceptCharset";
                case "href":
                        if (isMSIE) {
                                // IE always returns the full path not the fragment in the href attribute

Comment: #18

Uh, yeah…I missed the $ in $name in a couple of places.

Comment: #19

Hi,

cssQuery now works with IE4.

Since my last comment, I’ve implemented the DOM traversal and moved most of the changes into cssQuery-standard.js. Some minor tweaks to the test page were also needed. You can find my diffs here:

http://www.advantax.org/public/cssQuery.diffs

Cheers,

— Anthon

Comment: #20

If you’re still reading these comments, I think the problem in #12 can be fixed by changing the AttributeSelector regular expression to something like:

var AttributeSelector = {match:
/\[([\w-]+(\|[\w-]+)?)\s*(\W?=)?\s*('([^']|\\')*'|"([^"]|\\")*"|[^\]]*)\s*\]/
};

Comment: #21

Hello there

I have a question to cssquery, i got the problem with the onload problem that it overwrite other onload functions how it is (was) in addEvent handler. Is there any solution for cssquery or am i just to stupid to see it :P.

Greets

Comment: #22

Ah sorry – it was my fault.. just had a error in reasoning.

Comment: #29

There’s a problem with cssquery when there are too many elements in the page. The script will take a long time to load, and in firefox, prompts a message asking if the user would want to continue to load the script (which is not very user-friendly). Is there a workaround for this?