JS get HTML DOM element method

There are many ways to get the elements in JS, can select a suitable method according to the actual

A, JS acquisition element method

　　　　 1 ) The label element acquires ID
             var DIV1 = document.getElementById ( "DIV1" );

         2 ) obtaining tag list by tag name
                var divs = document.getElementsByTagName ( "div" )
        
         . 3 ) The tag list acquired className
             var DIV0 = Document. getElementsByClassName ( "div0" ); 
        console.log (div0)

         4 ) get id must document calling getElementById
             var Diva = document.getElementById ( "Diva" );
             var div1 = diva.getElementById ( "div1") // error writing,
             
        5) The following two methods to obtain a list of all HTMLCollection HTML, getElementByTagNames can use this method for processing document, it also can be used to call the elements, use the element if called, refers to a child element of this element of the current label is the name of the div
           var = document.getElementById Diva ( "Diva" );
           var divs = diva.getElementsByTagName ( "div" );
           var divs = document.getElementsByTagName ( "div"); // this than the above multi 
          the console.log (divs)

         . 6 ) may be according to the acquired element is a child element of the class of all elements div0, may be used if the entire document is to obtain document.getElementsByClassName class is the div0
             var Diva = document.getElementById ( "Diva" );
             var div0 = diva.getElementsByClassName ( "div0" ); 
            the console.log (DIV0)

         . 7) Get the node name list according to, NodeList node list, getElementByName not acquired by the parent element
             var Form1 = document.getElementById ( "Form1" );
             var Sex = document.getElementsByName ( "Sex" ); 
            the console.log (Sex)

The following method is suitable for the following IE8

        8) obtained according to the elements of the first selector Found
             var div = document.querySelector ( "div"); // acquired all div The selector 
            var DIV1 = document.querySelector ( "# DIV1" );
             var DIV0 document.querySelector = ( "DIV0." );
             var DIV0 = document.querySelector ( "# Diva> .div0" );
             var PS = document.querySelector ( "[name = password]" ) 
            the console.log (PS)

Second, the acquisition sub-elements and child nodes

      9) sub-node and child elements
         var Diva = document.querySelector ( "# Diva" ); 
        the console.log (diva.childNodes); // child node is a NodeList, comprising text nodes, comment nodes, etc. 
        console.log (diva. Children); // sub-elements are HTMLCollection, containing only the elements
 
      10 ) and the parent node of the parent element of 
        the console.log (diva.parentNode); // parent node 
        the console.log (diva.parentElement) // parent element
     
      11 ) a first child node and the first child element of 
        the console.log (diva.firstChild); // first child node 
        the console.log (diva.firstElementChild); // first child
 
      12 is  ) and finally the last child of a child element
        the console.log (diva.lastChild); //Last child of 
        the console.log (diva.lastElementChild); // last child element
 
      13 ) next sibling node and the next sibling 
        the console.log (diva.nextSibling); // next sibling node 
        console.log (diva .nextElementSibling); // next sibling element
 
      14 on) and a sibling node on a sibling of 
        the console.log (diva.previousSibling); // a sibling 
        the console.log (diva.previousElementSibling); // previous sibling element