vue中将某个标签全部替换为另外一个标签为什么只有第一个标签会被替换？

wwwwuj

已于 2024-08-01 16:10:22 修改

阅读量502

点赞数 10

文章标签： javascript 前端 vue.js

于 2024-02-20 01:04:13 首次发布

本文链接：https://blog.csdn.net/weixin_52068519/article/details/136180436

版权

文章讲述了在JavaScript中，如何使用getElementsByTagName获取所有span标签并逐个替换为div标签的问题。作者发现由于替换操作导致遍历列表长度减少，影响了后续元素的处理。解决方案是先复制span标签的DOM节点再进行替换，确保所有span被正确转换。

摘要由CSDN通过智能技术生成

将所有的span标签转换为div标签：

changeTag(){
  const list = document.getElementsByTagName('span');
  for(const dom of list){
    const attrs = dom.attributes;
    const newDom = document.createElement('div');
    for(let index=0; index<attrs.length; index++){
      let nodeName = attrs[index].nodeName;  //属性名称
      newDom.setAttribute(nodeName, dom.getAttribute(nodeName));
    }
    // 将span标签替换为div标签
    dom.parentNode.replaceChild(newDom, dom);
  }
}

但是结果是span标签会隔一个被替换，像<div>...<span>...<div>...<span>...这样。

原因：

因为每次替换后list的长度就少1，那么替换一个后，原本要替换的第2个元素变成了第1个元素，它就被跳过了，此时替换的就是原本的第3个元素，所以才会出现隔一个替换一个的情况。

解决：

复制所有span标签的dom节点，保证遍历的节点列表不会变化

const changeTag = ()=>{
    const list = document.getElementsByTagName('span');
    // 复制list下所有节点 
    const list1 = [...list];
    for(const dom of list1){
        const attrs = dom.attributes;
        const newDom = document.createElement('div');
        for(let index=0; index<attrs.length; index++){
            let nodeName = attrs[index].nodeName;  //属性名称
            newDom.setAttribute(nodeName, dom.getAttribute(nodeName));
        }
        // 将span标签替换为div标签
        dom.parentNode.replaceChild(newDom, dom);
     }
}