Dom extension-selectors API (Selector API)

Dom Extension

The two major extensions to the DOM are SELECTORSAPI (Selector API) and HTML5

Selectorsapi (Selector API) is a standard developed by the Web, committed to the browser natively support CSS query, Selectorsapilevel 1 core is two methods:Queryselector () and Queryselectorall (), which can be called through an instance of document and element type.

The Queryselector () method takes a CSS selector, returns the first element that matches the pattern, and returns null if no matching element is found.

1     //Get BODY element2     varBODY = document.queryselector (' body ');3     //get an element with id "mydiv"4     varMydiv = Document.queryselector (' #myDiv ');5     //gets the first element of class "selected"6     varSelected = Document.queryselector ('. Selected '));7     //get the first image element of class "button"8     varimg = document.body.querySelector (' Img.button ');

When the Queryselector () method is called through the document type, a matching element is found within the scope of the documentation element. When you call the Queryselector () method by using the element type, the matching element is found in the descendant elements of the elements.

Queryselectorall (), the accepted argument is a CSS selector that returns all matching elements and not just one element. This method returns an instance of the nodelist.

 1  //  2  var  em = document.getElementById (' mydiv '). Queryselectorall (' em ' );  3   Get all elements of Class "selected"  4  var  Selected = Document.queryselectorall ('. Selected '  5   Get all <strong> elements in all <p> elements  6   var  strongs = Document.queryselectorall (' P strong '); 

To get each element of the returned nodelist, you can use the item () method, or you can use the square bracket syntax, for example:

1     var I,len,strong; 2      for (i=0,len=strong.length;i<len;i++) {3         // or Strong.item (i) 4         Strong.chassname = ' important '; 5     }

matchesselector (), which takes a parameter, the CSS selector, that returns true if the calling element matches the selector, or false otherwise. This is a new method for the selectors API Level 2 specification for element type.

But now this method has not been supported by all browsers, so to use this method, it is best to write a wrapper function.

1     functionMatchesselector (element,selector) {2         if(element.matchesselector) {3             returnElement.matchesselector (selector);4}Else if(Element.msmatchesselector) {//IE + +5             returnElement.msmatchesselector (selector);6}Else if(Element.mozmatchesselector) {//Firefox 3.6+7             returnElement.mozmatchesselector (selector);8}Else if(Element.webkitmatchesselector) {//Safari 5+ and Chrome9             returnElement.webkitmatchesselector (selector);Ten}Else { One             Throw NewError ("not supported.")); A         } -     } -  the     if(Matchesselector (Document.body, "Body.page1")){ -         //Perform Actions -}

For spaces between elements, IE9 and versions do not return text nodes, and other browsers return text nodes. This results in inconsistent behavior when using attributes such as ChildNodes and FirstChild. To compensate for this difference while keeping the DOM specification intact, the Element traversal specification defines a new set of attributes.

Childelementcount: Returns the number of child elements
Firstelementchild: Point to first child element; FirstChild element version
Lastelementchild: Point to the last child element; LastChild element version
Previorselementsibling: Point to previous sibling element; previoussibling element version
Nextelementsibling: Point to the latter sibling element; NextSibling element version

These elements make it easier to find DOM elements without worrying about blank text nodes.

In the past, to traverse all child elements of an element across browsers, you would need to write code like this

 1  var   I,  2   Len,  3  child = Element.firstchild;  4  while  (Child!= Element.lastchild) { 5  if  (Child . NodeType = = 1) {  Processchlid (child);  7   8
      child = child.nextsibling;  9 } 

And with element traversal new elements, the code will be more concise.

1     var I, 2         Len,3Child         = element,firstelementchild; 4      while (Child! = element.lastelementchild) {5        processchild (child); 6         Child = child.nextelementsibling; 7     }

Dom extension-selectors API (Selector API)