W3C home > Mailing lists > Public > www-style@w3.org > March 2010

Re: Select elements based on text content

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Mon, 29 Mar 2010 22:26:19 -0400
Message-ID: <4BB1614B.1000403@mit.edu>
To: David Chambers <david.chambers.05@gmail.com>
CC: www-style@w3.org
On 3/29/10 8:51 PM, David Chambers wrote:
>     In general, the use of such a selector would cause significant
>     slowdowns in web page rendering (esp. incremental rendering).
>
>
> That's interesting. I have very little understanding of how selectors
> work behind the scenes, and had assumed that selecting elements based on
> their text content would be no more difficult than selecting elements
> based on an attribute value.

Not quite.  Say I have this selector:

   td[foo="bar"]

Then when an attribute changes I only need to check that the attribute's 
name is "foo" and the element's name is "td" to decide whether this 
selector matters.  In particular, if I keep a list of selectors that 
involve attributes, one list for each distinct attribute name, I can 
just pull up the list for the name of the attribute that's changing and 
check the selectors in it against the node the attribute is changing on. 
  In the common case, the list for any given attribute is empty.  Adding 
an attribute selector affects the speed of changing the attribute it's 
selecting against, but not other attributes.

Now consider td:contains("something").  Any time a node is added to the 
DOM, one needs to check whether it has an ancestor "td" and if so 
whether it has any descendants containing the text "something" (or some 
variant thereof, depending on whether "something" can span element 
boundaries).  Or check just one of those, of course. Or check neither 
and restyle the entire document.

And if you have a selector like |td:contains("something") span| then on 
any DOM insertion you have to either restyle everything under all "td"s 
or restyle all spans under all "td"s or determine whether the new node 
has an ancestor "td" (possibly more than one!) and descendant 
"something" and then restyle all "span"s under the "td"s involved.

It may be possible to optimize things somewhat but the whole "any 
insertion anywhere in the DOM could affect any other element in the 
document depending on the selectors involved" thing is a bit of a pain 
and makes this much harder to handle than attribute changes.

Similar for removals from the DOM.

-Boris
Received on Tuesday, 30 March 2010 02:26:55 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT