利用文档碎片，改变dom元素的值

最新推荐文章于 2024-07-24 11:13:53 发布

一只燕仔

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量165

点赞数 3

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/Z_hai_yan/article/details/116020887

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="liBox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    /* 获取父节点 */
let liBox=document.getElementById('liBox');
/* 打印父节点中所有节点 */
console.dir(liBox.childNodes);
/* 创建fragment */
let fragment=document.createDocumentFragment();
/* 循环li里面所有的子节点 */
for(let i=0;i<liBox.childNodes.length;i++){
    /* 赋值 */
    let child=liBox.childNodes[i];
    /* 向fragment里面添加li里的每一项 */
    fragment.appendChild(child)
}
/* 死循环，条件为ul里的最后一个子节点 */
while(liBox.firstChild){
    fragment.appendChild(liBox.firstChild)
}
/* 将fragment转换成数组并使用map遍历 */
Array.prototype.slice.call(fragment.childNodes).map(nodeltem => {
    console.log(nodeltem.nodeType);
    /* 如果节点是元素节点，则 nodeType 属性将返回 1 */
    if(nodeltem.nodeType===1){
        /* 给里面的内容替换 */
        nodeltem.innerHTML='替换成功'
    }
});
/* 将切割好的只剩li节点的数组添加到ul中 */
liBox.appendChild(fragment);
</script>
</html>

效果如下：

在这里插入图片描述

一只燕仔

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
利用文档碎片，改变dom元素的值

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul
复制链接

扫一扫

专栏目录