selectors-api

With the code from this article I've successfully added querySelectorAll to document in IE7. But I need to use it on an element rather than document , like this: var containers = document.querySelectorAll('.container'); // Works for (var i=0; i<=containers.length; i++) { var container = containers[i]; container.querySelectorAll('a[data-type="people"]'); // Fails // ... } Is there a way to add querySelectorAll to elements in IE7 rather than only to document ? Very interesting question. I would lean toward using a library for this, like jQuery , one of the ones mentioned below, Closure , or any

XPath can do everything querySelector can do, and more, so when would you ever choose the latter? I haven't seen any speed benchmarks comparing the two, so right now I'm choosing based on syntax conciseness, which seems kind of arbitrary. Edit: I probably should have stated that I'm writing Greasemonkey scripts for Firefox, so I'm not worried about cross-browser compatibility, and would rather not include any libraries. Yehuda Katz What browser are you using? In Safari (or the iPhone), querySelector and querySelectorAll are much faster than XPath. IE doesn't support XPath at all, and IE6 and

The definitions from the DOM Standard seems almost exactly the same, and I don't understand the difference. What is the difference between queryAll and querySelectorAll . The evaluation logic from DOM standard is below, but I am not smart enough to understand it. query & queryAll To match a relative selectors string relativeSelectors against a set, run these steps: Let s be the result of parse a relative selector from relativeSelectors against set. [SELECTORS] If s is failure, throw a JavaScript TypeError. Return the result of evaluate a selector s using :scope elements set. [SELECTORS] The

Let's presume you got a list with nested child lists. <ul> <li></li> <li> <ul> <li></li> <li></li> </ul> </li> <li></li> </ul> And use document.querySelectorAll() to make a selection: var ul = document.querySelectorAll("ul"); How can i use the ul collection to get the direct child elements? ul.querySelectorAll("> li"); // Gives 'Error: An invalid or illegal string was specified' Let's presume ul is cached somehow (otherwise i could have done ul > li directly). In jQuery this works: $("ul").find("> li"); But it doesn't in native querySelectorAll . Any solutions? lazd The correct way to write a

This seems like something that would have a quick answer, but I can't find one. Maybe I'm searching the wrong terms? No libraries please, though I don't need cross-browser fallbacks, I'm targeting all the latest versions on this project. I'm getting some elements: element = document.querySelectorAll(".someselector"); This is working, but how do I now delete these elements? Do I have to loop through them and do the element.parentNode.removeChild(element); thing, or is there a simple function I'm missing? Yes, you're almost right. .querySelectorAll returns a frozen NodeList . You need to iterate

I found following cone in a js plugin var container = document.getElementById( 'vs-container' ), wrapper = container.querySelector( 'div.vs-wrapper' ), sections = Array.prototype.slice.call( wrapper.querySelectorAll( 'section' ) ), links = Array.prototype.slice.call( container.querySelectorAll( 'header.vs-header > ul.vs-nav > li' ) ); I couldn't understand what does Array.prototype.slice.call() & wrapper.querySelectorAll( 'section' ) do in above code. I've not seen them before so I would like to know what they actually do. querySelectorAll is a method on DOM elements that accepts a CSS

Say I have an HTML structure like <div id="a"> <div id="b"> <div id="c"></div> </div> </div> To do a query for the children of "a" using querySelectorAll I can do something like //Get "b", but not "c" document.querySelectorAll('#a > div') My question is : is it possible to do this without the ID, referencing the node directly? I tried doing var a_div = document.getElementById('a') a_div.querySelectorAll('> div') //<-- error here but I get an error telling me that the selector I used is invalid. And in case anyone is wondering, my real use case would be something more complicated like '> .foo

I'm trying to make a js code that works with multiple pages. I'm trying to use querySelectorAll() to obtain the elements form the DOM. I need the elements to be ordered. In order to do that I may use xPath or selectors (I'd prefer to use selectors but xPath is also ok). The problem is: Are the elements in the NodeList returned by querySelectorAll() ordered against the order that the tags appear in the HTML? Note: I'd like to add the tag: querySelectorAll The returned node list is ordered. A quick test proved it: document.querySelectorAll("body, head")[0]; //Returned [object HTMLHeadElement]