欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

巧用 firstElementChild

程序员文章站 2022-07-12 16:40:19
...

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();

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

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

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

这样一改,就只会渲染出我们需要的按钮了,不会在外面包裹div;
巧用 firstElementChild
看清楚思路了么?先生成带div的DOM对象,然后利用firstElementChild再把我们需要的对象取出来即可;