selectors-api

How to use querySelectorAll only for elements that have a specific attribute set?

由 放肆的年华 提交于 2019-11-28 15:13:09
问题 I'm trying to use document.querySelectorAll for all checkboxes that have the value attribute set. There are other checkboxes on the page that do not have value set, and the value is different for each checkbox. The ids and names are not unique though. Example: <input type="checkbox" id="c2" name="c2" value="DE039230952"/> How do I select just those checkboxes that have values set? 回答1: You can use querySelectorAll() like this: var test = document.querySelectorAll('input[value][type="checkbox"

for of loop querySelectorAll

由 ╄→尐↘猪︶ㄣ 提交于 2019-11-28 12:05:34
Mozilla states that "for of loops will loop over NodeList objects correctly". (source: https://developer.mozilla.org/en-US/docs/Web/API/NodeList ) However, this doesn't work in Chrome 43. Is this incorrect documentation or a browser bug? The copied example code used on a page with checkboxes: var list = document.querySelectorAll( 'input[type=checkbox]' ); for (var item of list) { item.checked = true; } Edit: This is shipping in Chrome 51 . Jake Archibald posted a simple fix : NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator] And for of loops. The docs are correct, but I

IE9 equivalent of querySelectorAll

由 ⅰ亾dé卋堺 提交于 2019-11-28 08:28:46
问题 I haven't had any problems in FF or Chrome, but IE9 chucks an error on this method. I thought I would be able to use it, due to it having been shown to be supported here: http://www.quirksmode.org/dom/w3c_core.html However, that appears to not be the case in practice. That being said, what can I use in its place? EDIT: Here's the exact line it fails on: var maximize_buttons = document.querySelectorAll(".maximize"); That is the first time I attempt to use querySelectorAll(). The browser

How to get the second match with QuerySelector?

由 99封情书 提交于 2019-11-28 08:12:58
The following statement gives me the first element with the class titanic element = document.querySelector('.titanic'); How would I retrieve the second element with the same class? Use document.querySelectorAll document.querySelectorAll('.titanic')[1] 来源： https://stackoverflow.com/questions/22902447/how-to-get-the-second-match-with-queryselector

.parents() without jquery - or querySelectorAll for parents [duplicate]

由 限于喜欢 提交于 2019-11-27 08:25:36
Possible Duplicate: Check event.target.parentElement with matchesSelector js I have a dom object, I'd like to match its parents, all parents, against a selector, like querySelectAll() , but for parents instead of children. Similar to jQuery's .parents('selector') method, but I do NOT need any back-wards compatibility. Also, no libraries please. I will totes take a boolean return value. I CAN write this myself as a recursive function/for/while using matchesSelector() . I'm looking for little-known methods or more efficient code. Saving any processing is worth it. Think tens of thousands of

Can I use a regular expression in querySelectorAll?

由 亡梦爱人 提交于 2019-11-27 07:34:20
On a page I'm doing I will be ending up with custom link elements like this: <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> ... I'm trying to use querySelectorAll to retrieve all link elements with a type service/... specified and am getting nowhere. Currently I'm selecting this: root.querySelectorAll('link'); which gives me all <link> elements when I only want the ones with type service/.* Questions: Can I add a regex to a QSA selector? If so, how to do it? Benjamin Gruenbaum You can't really use a regular

querySelector search immediate children

由 断了今生、忘了曾经 提交于 2019-11-27 07:02:07
I have some jquery-like function: function(elem) { return $('> someselector', elem); }; The question is how can i do the same with querySelector() ? The problem is > selector in querySelector() requires parent to be explicitly specified. Is there any workaround? Though it's not a full answer, you should keep an eye on the W3C Selector API v.2 which is already available in Google Chrome and Safari 7.x (both desktop and mobile), but as far as I have tested, still not there in Firefox and IE. function(elem) { return elem.querySelectorAll(':scope > someselector'); }; You can't. There's no selector

:nth-of-type() in jQuery / Sizzle?

由 别等时光非礼了梦想. 提交于 2019-11-27 04:38:32
It surprised me that Sizzle (the selector engine jQuery uses) comes with a built-in :nth-child() selector, but lacks an :nth-of-type() selector. To illustrate the difference between :nth-child() and :nth-of-type() and to illustrate the problem, consider the following HTML document : <!doctype html> <html> <head> <meta charset="utf-8"> <title>:nth-of-type() in Sizzle/jQuery?</title> <style> body p:nth-of-type(2n) { background: red; } </style> </head> <body> <p>The following CSS is applied to this document:</p> <pre>body p:nth-of-type(2n) { background: red; }</pre> <p>This is paragraph #1.</p>

How to properly escape attribute values in css/js attribute selector [attr=value]?

由 ℡╲_俬逩灬. 提交于 2019-11-27 03:51:43
问题 How should I escape attributes in the css/js attibute selector [attr=value] ? Specifically, is this correct? document.querySelector('input[name="test[33]"]') I'm looking for the "standard way" of doing this, if any, because I don't want Sizzle using a heavy-to-execute fallback function 回答1: Yes, that is one correct approach. The Selectors Level 3 specification states the following: Attribute values must be CSS identifiers or strings. The example in your question uses a string as the attribute

IE8 does not support querySelectorAll

由 我是研究僧i 提交于 2019-11-27 01:07:59
I tried to use document.querySelectorAll() , but IE8 throw error, that Object doesn't support this property or method var titleCheckBox = document.querySelectorAll(""); Here http://www.quirksmode.org/dom/w3c_core.html#t13 written, that IE8 support this method. What I doing wrong? Check that your page isn't in Quirks mode or Compatibility mode. You can use the F12 dev tools to confirm this. Press F12 and look in the top-right corner of the resulting window. If you see "Compatibility" or "Quirks" in the mode description, then you've found the problem. Quirks mode: this is usually triggered by a
订阅 selectors-api