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

本文探讨了一个奇葩需求:如何在不修改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;
    }

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

ok  至此彻底打完收工

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值