The Difference and connection between querySelector and querySelectorAll-javascript skills

Source: Internet
Author: User
The two methods should be returned according to W3C specifications. Let's take a look at the official explanation first, and then choose to use them according to W3C specifications:
QuerySelector:

Return the first matching Element node within the node's subtrees. if there is no such node, the method must return null. (return the first child tree of the specified element node that matches the selector set. If no child tree matches the selector, return null)

QuerySelectorAll:

Return a NodeList containing all of the matching Element nodes within the node's subtrees, in document order. if there are no such nodes, the method must return an empty NodeList. (return the node set that matches the selector in the subtree of the specified element node, which adopts the depth-first pre-query. If no match exists, this method returns an empty set)

Usage:

The Code is as follows:


Var element = baseElement. querySelector (selectors );
Var elementList = baseElement. querySelectorAll (selectors );


When BaseElement is document, there is no problem. The implementations of various browsers are basically the same. However, when BaseElement is a common dom Node (dom Node that supports these two methods), it is a bit strange to implement the browser. For example:

The Code is as follows:



Test



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.