巧用 firstElementChild

firstElementChild：是用于返回DOM对象的第一个子元素。

举个小例子了解一下：

  <div>
      <p>123</p>
      <p>456</p>
  </div>

  var oDiv=document.getElementsByTagName("div")[0];
  console.log(oDiv.firstElementChild)  //<p>123</p>

我们平时可能都会用到jq的append( )或者原生的innerHTML方法，就是将字符串变成html语言，渲染在页面上，我经常用在写插件的地方。
例如我想渲染一个按钮到页面上：

  function renderBtn(){
           var str="<button id='btn'>按钮</button>";
           var dom=createDOMFromString(str);
           document.body.appendChild(dom)
   }

   function createDOMFromString (str) {
           var tmpDiv = document.createElement('div');
           tmpDiv.innerHTML = str;
           return tmpDiv ;
   }

   renderBtn();

我们可以发现虽然我们按钮已经渲染到页面上了，但是外面包裹了一个div，这样带来的不便之处在于我们不好给按钮绑定click事件了，因为createDOMFromString这个函数返回的才是dom对象，我绑定事件需要在它上面绑定，但是它除了我们想要的按钮外还加了一个div。然后还有就是如果我们想渲染行内元素呢？比如span这样的，但是它如果外面包裹了一个div，那么我们得到的就会是一个块级元素，与我们预期不符。

所以针对上述问题，我们可以用firstElementChild来解决，修改代码后的代码为：

function createDOMFromString(str){
        var tempDiv=document.createElement('div');
        tempDiv.innerHTML=str;
        return tempDiv.firstElementChild || null;
}

这样一改，就只会渲染出我们需要的按钮了，不会在外面包裹div；

看清楚思路了么？先生成带div的DOM对象，然后利用firstElementChild再把我们需要的对象取出来即可；