selectors-api

When using querySelectorAll, is there a way to reference the immediate children of the context node, without using IDs?

由 柔情痞子 提交于 2019-12-18 08:11:21
问题 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

Using querySelectorAll(). Is the result returned by the method ordered?

由 余生颓废 提交于 2019-12-18 05:27:33
问题 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 回答1: The returned node list is ordered

How to get the second match with QuerySelector?

由 自古美人都是妖i 提交于 2019-12-17 18:34:29
问题 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? 回答1: Use document.querySelectorAll document.querySelectorAll('.titanic')[1] 回答2: You don't necessarily need querySelectorAll for picking second element and the question is to use querySelector API. You can utilizing the power of CSS in the selector. For example you can do: document.querySelector('.titanic:nth-child

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

由 久未见 提交于 2019-12-17 07:30:21
问题 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

Using querySelector with IDs that are numbers

由 社会主义新天地 提交于 2019-12-17 03:03:41
问题 From what I understand the HTML5 spec lets you use IDs that are numbers like this. <div id="1"></div> <div id="2"></div> I can access these fine using getElementById but not with querySelector . If I try do the following I get SyntaxError: DOM Exception 12 in the console. document.querySelector("#1") I'm just curious why using numbers as IDs does not work querySelector when the HTML5 spec says these are valid. I tried multiple browsers. 回答1: It is valid, but requires some special handling.

Using querySelector with IDs that are numbers

由 孤街浪徒 提交于 2019-12-17 03:03:32
问题 From what I understand the HTML5 spec lets you use IDs that are numbers like this. <div id="1"></div> <div id="2"></div> I can access these fine using getElementById but not with querySelector . If I try do the following I get SyntaxError: DOM Exception 12 in the console. document.querySelector("#1") I'm just curious why using numbers as IDs does not work querySelector when the HTML5 spec says these are valid. I tried multiple browsers. 回答1: It is valid, but requires some special handling.

querySelector, wildcard element match?

由 假如想象 提交于 2019-12-17 01:39:20
问题 Is there a way to do a wildcard element name match using querySelector or querySelectorAll ? I see support for wildcards in attribute queries but not for the elements themselves. The XML document I'm trying to parse is basically a flat list of properties and I need to find elements that have certain strings in their names. I realize the XML document is probably in need of a restructuring if I need this but that's just not going to happen. Any solution except going back to using the apparently

How to add querySelectorAll() function to Element for IE <= 7?

由 Deadly 提交于 2019-12-13 11:34:05
问题 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 ? 回答1: Very interesting question. I

Using querySelector to Find Descendant Elements Returns Unexpected Results

由 强颜欢笑 提交于 2019-12-13 05:03:44
问题 So I've been playing around with querySelector recently and noticed some really odd behaviour when trying to select descendant elements. Take the following markup as an example: <div id="parent"> <div id="foo"> <div id="bar"></div> </div> </div> If I want to query this DOM tree from the context of the #parent element, I may do the following: var parent = document.getElementById('parent'); parent.querySelector('div') This returns the #foo element as expected. Now, if I wanted to get the #bar

querySelectorAll not working

由 女生的网名这么多〃 提交于 2019-12-12 08:32:35
问题 I have a requirement where I have to pickup the last .div within a container and apply some business logic to it. The selection of the last .div has to be dynamic because the user has the option to add/remove .div elements. Initially I tried with querySelectorAll but it did not seem to work. So I decided to change it to getElementsByClassName and surprisingly it worked with the same logic. Can somebody please help me with the reason for why the remove_div doesn't work while the second one (
订阅 selectors-api