Case 1- node operation and the first child node of the last child

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
  < Meta charset = "UTF-. 8" > 
  < title > the Document </ title > 
</ head > 
< body > 
  < div ID = "Box" > 
    < div > this is an ad pictures </ div > 
    < ul > 
      < li > this is a list </ li >
    </ul>
    < Span > descriptive text </ span > 
  </ div > 

  < Script > 
    // box.firstChild obtain a first child node 
    // box.firstElementChild acquires first child, there are compatibility problems, since the support IE9 
    / /  
    // box.lastChild acquired last child 
    // box.lastElementChild acquired last child, there are compatibility problems, since the support IE9 
    var Box = document.getElementById ( ' Box ' );
     // the console.log (Box .firstChild); 

    // the console.log (box.firstElementChild); 


    var ELE =  getFirstElementChild (Box);
    the console.log (ELE); 

    // 处理浏览器兼容性
    function getFirstElementChild(element) {
        var node, nodes = element.childNodes, i = 0;
        while (node = nodes[i++]) {
            if (node.nodeType === 1) {
                return node;
            }
        }
        return null;
    }
  </script>
</body>
</html>