HTML5 and JavaScript Selection Options

Of the many new features in HTML5, the innovations with the most far-reaching potential are in the additions to JavaScript available in modern browsers. JavaScript is usually used to interact with the web page. HTML5 incorporates some new ways to select elements from the page:

• document.getElementsByClassName(): When you want to apply code to all elements in a particular class, the getElementsByClassName() function returns an array of all the elements in a particular class. For example, this code creates an array of all of the elements on the current page with the class special. It then steps through each element of that array and alerts the content of that element:

  
  

    function init(){
      specP = document.getElementsByClassName("special");
      alert(specP.length);
      for(i = 0; i < specP.length; i++){
        alert(specP[i].innerHTML);
      } // end for
    } // end function

  
  

  Note that getElementsByClassName() does not return a single element like getElementById(). Instead, it returns an array. Generally, you'll use a for loop to step through the array and do something to each element.

  
  

  The class does not need to have any CSS associated with it. This can be an easy way to mark a set of elements you'll want to do something with.

  
  



• document.getElementsByTagName(): Using this tag allows you to quickly retrieve all the elements with a given tag name. For example, you could use this mechanism to get access to all of the input elements of a form. You need to use array syntax (usually with a for loop) to work with the members of the array. This code alerts the content of every paragraph of the current page:

  
  

    function init(){
      paras = document.getElementsByTagName("p");
      for(i = 0; i < paras.length; i++){
        alert(paras[i].innerHTML);
      } // end for
    } // end function

  
  



• document.querySelector(): A number of JavaScript libraries (notably jQuery) have added the ability to select DOM elements through the same syntax used to define elements in CSS. JavaScript now includes this capability natively through the querySelector() method. This extremely powerful mechanism makes it very easy to select any element. For example, the following code selects the second paragraph on the page:

  
  

      para2 = document.querySelector("p + p");
      alert(para2.innerHTML);

  
  

  Note that this method retrieves only the first element that matches the query. If the query might match more than one element, use the document.querySelectorAll() method instead. The querySelector() method can also be used to select elements by tag name, class, or id.

  
  



• document.querySelectorAll(): This method works just like document.querySelector(), except it retrieves all elements of the page that match the given query. The following function asks for a CSS selector and displays the contents of any page elements matched by that selector:

  
  

  function init(){
    paras = document.getElementsByTagName("p");
    alert(specP.length);
    for(i = 0; i < paras.length; i++){
      alert(paras[i].innerHTML);
    } // end for
  } // end function

The querySelectorAll() method returns an array of elements, even if only a single element is returned. Use array syntax (normally with a for loop) to step through each element of the array.

dummies

Source:http://www.dummies.com/how-to/content/html5-and-javascript-selection-options.html