selectors-api

问题 I wonder if it's possible in Javascript to get the currently selected options in a <select multiple> field using the Selctors API rather than a "stupid" iteration over all options. select.querySelectorAll('option[selected="selected"]') only returns the options that were marked as preselected in the original HTML, which is not what I'm looking for. Any ideas? 回答1: document.querySelectorAll('option:checked') Works even on IE9 ;) 回答2: I was also experienced your issue, I have a feeling it's to

问题 How could I test CSS1-3 selectors to check that they get the correct elements, e.g. with JavaScript (maybe jQuery)? 回答1: The simplest traditional way by far is to not use JavaScript at all, and just set up a test page by hand where you can test selectors to your heart's content. The test cases you see on the Web (like the well-known CSS3.info Selectors Test) are really just souped-up versions hosted online. But if you're looking for a JavaScript method, you can try the Selectors API. It's

问题 I would like to know is querySelector supported by all browsers? is not what's alternate for it to use? I have tested it with IE8, FF3, Chrome 4. Its fine for me. I do not have old browsers. So i would like to know if old browsers will give problem to me or not? 回答1: IE7< don't support it and IIRC IE8 has issues with namespaces. There's at least one more esoteric browser out there with major issues but I don't recall which it is. Basically there is no unified expression-based DOM method, and

问题 I have selected a specific class via .querySelectorAll : var hit3 = document.querySelectorAll(".lattern.hit-3 .circle"); I am now trying to target and adjust a .style.visibility attribut on this element, by doing the following: hit3.style.visibility = "visible"; This however results in an error: Uncaught TypeError: Cannot set property 'visibility' of undefined How do I target a specific .style with the above .querySelectorAll selector? Fiddle 回答1: querySelectorAll return a node list so you

问题 I have used e.preventDefault() in the past to cancel a click event, but I am having trouble figuring out why it isnt working in this scenario. I assigned all a tags in a column with a classname, then get references to them with document.queryselectorAll(.classname) , then for each a tag add a click event that gets values from server, and if validation not met should prevent default and give user message. (function(){ const userName = document.getElementById('FullName').value; // route $route

问题 I have this code: <a href="javascript:alert('something1')">Click</a> <a href="javascript:prompt('something2')">Click</a> <a href="javascript:alert('something3')">Click</a> <a href="javascript:prompt('something4')">Click</a> Now, using console.log(document.querySelectorAll("a[href^='javascript:prompt('],a[href^='javascript:alert(']")); would fetch all such elements as NodeList. But, I have the HTML text given with different case of letters in javascript . That is, look at the following code:

问题 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

问题 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")

问题 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

问题 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