巧用 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();
我们可以发现虽然我们按钮已经渲染到页面上了,但是外面包裹了一个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再把我们需要的对象取出来即可;
上一篇: STL 常用