Home > Developer > Web Develop
HTML5 introduced the new Document.queryselector and Document.queryselectorall two methods to the Web API to make it easier to pick elements from the DOM and function like a jquery selector. This makes it much easier to write native JavaScript code.
1. Usage
Two methods use the same syntax, which is to receive a string parameter, which needs to be a valid CSS selection syntax.
element = Document.queryselector (' selectors '= Document.queryselectorall (' selectors ');Where parameter selectors can contain multiple CSS selectors, separated by commas.
element = Document.queryselector (' Selector1,selector2,... '= Document.queryselectorall (' Selector1, Selector2,... ');You cannot find elements with pseudo-class state using these two methods, such as Queryselector (': hover '), and do not get the expected results.
2, Queryselector () The usage description
The method returns a single element that satisfies the condition. Follow the principle of depth first and first order traversal use the CSS selector provided by the parameter to find in the DOM, returning the first element that satisfies the condition.
element = Document.queryselector (' Div#container '); // returns the first DIV element with id container= Document.queryselector ('. Foo,.bar '); // returns the first element with the Foo or bar style class3, Queryselectorall () The usage description
The method returns all the elements that satisfy the condition, and the result is a NodeList collection. The lookup rule is the same as described earlier.
elements = Document.queryselectorall (' Div.foo '); // returns all div with the Foo class styleHowever, it is important to note that the elements in the returned NodeList collection are non-real-time (no-live), and want to distinguish what is real-time non-real-time return results, see the following example:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Test</title>6 </Head>7 <Body>8 <DivID= "Container"><Div></Div><Div></Div></Div>9 <Scripttype= "Text/javascript">Ten //first select the element with ID container in the page One Container=document.getElementById ('Container'); A Console.log (container.childNodes.length);//result is 2 - //then add a child element to it through the code - Container.appendchild (Document.createelement ('Div')); the //This element is not only added to the page, but also the variable container is automatically updated. - Console.log (container.childNodes.length);//result is 3 - </Script> - </Body> + </HTML>
The above example is a good way to understand what is an element that will be updated in real time. document.getElementById return is the real-time results, the above to add a child element, once again get all the number of child elements, has been updated from the original 2 to 3 (this does not consider some browsers such as Chrome will also parse the whitespace into a child node).
4. Escape instructions in Document.queryselector () and Document.queryselectorall ()
We know that backslashes are used for escaping, such as in strings where we want to represent null characters using ' \b ' and line ' \ n '. Again, it is important to understand that the parameters provided to Queryselector and Queryselectorall also support escaping.
Let's take a look at an example, for example, we have a DIV whose style class is ' Foo:bar ', and of course I know you don't normally write that. When we need to select it, we need to escape the colon, or throw it wrong.
First, the browser complains that it is not a valid choice statement. At the same time, the interesting things come, perhaps you think the colon directly escaped to solve the problem. But it also means illegal. The reason is that the backslash in the string itself means to escape, it can not be combined with the colon to go out, and then throw the wrong. So the right thing to do is to escape the backslash after ' #container \\:test ' and then pass it to Queryselector, which, after receiving the ' #container \\:test ' parameter, the string escapes two backslashes into one, Then a backslash that is queryselector in front of you is escaped with a colon to get the correct result. That is , it goes through two escapes, one string at a time, and one for Queryselector parsing parameters.
Once you understand this, you can look at a more interesting example. For example, we want to select an element with a backslash inside the class name. Yes, we need to use four backslashes altogether! To work properly.
5. Compatibility of browsers
The API is now well supported by mainstream browsers.
HTML5 Queryselector () and Queryselectorall ()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
