将dom元素转为字符串(已排除一个坑，但不知道原理)

最新推荐文章于 2023-02-01 15:55:01 发布

天堂小助手

最新推荐文章于 2023-02-01 15:55:01 发布

阅读量1.8k

点赞数

分类专栏：笔记 js

本文链接：https://blog.youkuaiyun.com/weixin_42262795/article/details/103695458

版权

笔记同时被 2 个专栏收录

18 篇文章

订阅专栏

2 篇文章

订阅专栏

本文探讨了一个奇葩需求：如何在不修改DOM或JS文件的情况下，将含JavaScript事件的DOM元素转换为字符串。作者通过示例展示了获取DOM对象并尝试转换时遇到的问题——循环执行次数仅为总数量的一半，并导致元素神秘消失。经过探索，作者找到了临时解决方案，即复制元素以避免原始元素消失，成功将所有元素转换为字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嗯。。很奇葩的要求哈

举个栗子：<img id="nidaye" src="nidaye.com" οnclick="javascript:xx(xx)">

假如我不想改变这个标签也不想改原有的js文件怎么能获取到这个onclick

第一步：获取dom对象

var nidaye= document.getElementsByTagName("img");

nidaye.innerHTML 你猜会出现什么

嗯。。。

所以我采用了这种方法

  function toInnerHTML(duixiang){
        const div = document.createElement("div")
        div.appendChild(duixiang);
        var a=div.innerHTML;

        return a;
    }

然后亲测，好用。

但是这篇博客还没结束，就抛出了解决办法？

嗯。。。

亲测，有bug

执行过后的img会神秘消失。或许说不是神秘消失，是故意给他消失的

而且哈，最神奇的是执行次数多了，会消失一半

举个栗子：

有304个img标签，我要转字符串

很好，长度304，没问题，循环是这样的

//上面所知nidaye是一堆img
//假如现在长度为 304
for(var i=0;i<nidaye.length;i++){

toInnerHTML(nidaye[i]);
}

执行后就会发现循环只执行了 152次？然后

在上面 toInnerHTML里面的 div.appendChild(duixiang);就会报错？

这是什么鬼?我试了好多次，发现不管执行多少条，都是只执行一半然后剩下一半就报错？

然后看页面？好神奇，每隔一个图片消失一个，就是图1234 消失图 2 4 这种

难道不应该一个一个的挨着消失吗？

改为这样：

    function toInnerHTML(duixiang){
        const div = document.createElement("div")
        div.appendChild(duixiang.cloneNode(true));//多了个 .cloneNode(true)
        var a=div.innerHTML;

        return a;
    }

原来的图片还让他在哪里呆着吧，老子复制一个