要求:编写一个JS函数将列表子元素的顺序反转。
<ul id="target">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
方法一:DOM操作
var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
var len=lists.length;
while(len--){
ul.appendChild(ul.children[len]);
//将新的元素树添加到DOM树
};
缺点:每次循环都会影响DOM生成,会损耗性能。
方法二:使用文档片段
优化: 尽量减少操作DOM树的次数, 从而减少重排重绘。
如果父元素已经在页面上了,要添加多个平级子元素,则应该使用文档片段。
文档片段 是内存中临时存储多个子元素的虚拟父元素。
只要向网页中同时添加多个平级子元素时,都可用文档片段。
var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
var fragment=document.createDocumentFragment();
//创建文档片段
for(var i=lists.length-1;i>=0;i--){
fragment.appendChild(lists[i]);
//将子元素添加到文档片段
};
ul.appendChild(fragment);
//将文档片段整体添加到DOM树
方法三:数组反转
var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
//类数组对象
var children=Array.prototype.slice.call(lists,0);
//将类数组对象复制为数组,并选取指定位置的剩余元素
var len=children.length;
var str="";
children.reverse();
for(var i=0;i<len;i++){
str+=children[i].outerHTML;
//outerHTML除了包含innerHTML的全部内容外, 还包含外层整个标签
//outerHTML为<li>x</li>
};
ul.innerHTML=str;
优点:性能较好。
方法四:字符串拼接
var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
var str="";
for(var i=lists.length-1;i>=0;i--){
str+="<li>"+lists[i].innerHTML+"</li>";
};
ul.innerHTML=str;
**优点:**innerHTML效率最优。
更多内容,欢迎关注微信公众号“让知识成为资产”。