遍历修改dom遇到的坑

需求:RNApp项目中加载别人的网页,加载完毕通过注入script的方式修改html内容和事件。

坑的原因:document.getElementsByClassName 是动态获取的,并不是一个数组,每次改变都会重新获取

填坑前:

var mediaPlayList = document.getElementsByClassName('mediadetail_play');
        for (var i = 0; i < mediaPlayList.length; i++) {
          console.log(i);
          const mediaPlayItem = mediaPlayList[i];
          var willReplaceNode = null;
          var allBrotherNode = null;
          if (mediaPlayItem.parentNode.nodeName == 'A') {
            willReplaceNode = mediaPlayItem.parentNode.parentNode;
          } else {
            willReplaceNode = mediaPlayItem.parentNode;
          }
          allBrotherNode = willReplaceNode.children;


          const dataId = mediaPlayItem.dataset.id;
          var dataTitle = '';
          for (var j = 0; j < allBrotherNode.length; j++) {
            var brotherNode = allBrotherNode[j];
            if (brotherNode.nodeName == 'SPAN' && brotherNode.className.length == 0) {
              dataTitle += brotherNode.innerText;
            }
          }
          dataTitle = dataTitle.slice(1, dataTitle.length - 1);

          const willReplaceParentNode = willReplaceNode.parentNode;
          var newNode = document.createElement('div');
          newNode.dataset.id = dataId;
          newNode.innerHTML = "<div\n" +
            "      style=\"position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; margin: 10px 0; padding: 0 20px; background-color: #4273C4; width: 100%; height: 210px;\">\n" +
            "      <div style=\"display: flex; align-items: center; align-self: flex-start; margin-top: -30px;\">\n" +
            "        <img src=\"https://store.51yxxg.com/%E7%BF%BC%E4%BC%B4%E5%AD%A6logo.png\" style=\"width: 60px; height: 60px;\">\n" +
            "        <span style=\"font-family:宋体; font-size:16px; color: #ffffff;margin-left: 10px;\">翼麦优学同步课程视频</span>\n" +
            "      </div>\n" +
            "      <span style=\"font-family:宋体; font-size:20px; color: #f6c73d; margin-top: 5px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;\">" + dataTitle + "</span>\n" +
            "      <img src=\"https://store.51yxxg.com/%E6%92%AD%E6%94%BE.png\" style=\"width: 44px; height: 44px; margin-top: 10px;\">\n" +
            "    </div>";

          newNode.onclick = function () {
            window.postMessage('' + dataId);
          };

          willReplaceParentNode.replaceChild(newNode, willReplaceNode);
        }

问题:遍历的dom只修改一半,也就是奇数项

填坑中:

var originmediaPlayList = document.getElementsByClassName('mediadetail_play');
        var mediaPlayList = [];
        for (var i = 0; i < originmediaPlayList.length; i++) {
          mediaPlayList.push(originmediaPlayList[i]);
        }
        for (var i = 0; i < mediaPlayList.length; i++) {
          console.log(i);
          const mediaPlayItem = mediaPlayList[i];
          var willReplaceNode = null;
          var allBrotherNode = null;
          if (mediaPlayItem.parentNode.nodeName == 'A') {
            willReplaceNode = mediaPlayItem.parentNode.parentNode;
          } else {
            willReplaceNode = mediaPlayItem.parentNode;
          }
          allBrotherNode = willReplaceNode.children;


          const dataId = mediaPlayItem.dataset.id;
          var dataTitle = '';
          for (var j = 0; j < allBrotherNode.length; j++) {
            var brotherNode = allBrotherNode[j];
            if (brotherNode.nodeName == 'SPAN' && brotherNode.className.length == 0) {
              dataTitle += brotherNode.innerText;
            }
          }
          dataTitle = dataTitle.slice(1, dataTitle.length - 1);

          const willReplaceParentNode = willReplaceNode.parentNode;
          var newNode = document.createElement('div');
          newNode.dataset.id = dataId;
          newNode.innerHTML = "<div\n" +
            "      style=\"position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; margin: 10px 0; padding: 0 20px; background-color: #4273C4; width: 100%; height: 210px;\">\n" +
            "      <div style=\"display: flex; align-items: center; align-self: flex-start; margin-top: -30px;\">\n" +
            "        <img src=\"https://store.51yxxg.com/%E7%BF%BC%E4%BC%B4%E5%AD%A6logo.png\" style=\"width: 60px; height: 60px;\">\n" +
            "        <span style=\"font-family:宋体; font-size:16px; color: #ffffff;margin-left: 10px;\">翼麦优学同步课程视频</span>\n" +
            "      </div>\n" +
            "      <span style=\"font-family:宋体; font-size:20px; color: #f6c73d; margin-top: 5px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;\">" + dataTitle + "</span>\n" +
            "      <img src=\"https://store.51yxxg.com/%E6%92%AD%E6%94%BE.png\" style=\"width: 44px; height: 44px; margin-top: 10px;\">\n" +
            "    </div>";

          newNode.onclick = function () {
            window.postMessage('' + dataId);
          };

          willReplaceParentNode.replaceChild(newNode, willReplaceNode);
        }

问题:iOS和web端完美解决,Android只修改了第一项。。。。

填坑后:

const yiclass_weclass_detaill_replace = function() {
        var mediaPlayList = document.getElementsByClassName('mediadetail_play');
          if (mediaPlayList.length == 0) return
          const mediaPlayItem = mediaPlayList[0];
          var willReplaceNode = null;
          var allBrotherNode = null;
          if (mediaPlayItem.parentNode.nodeName == 'A') {
            willReplaceNode = mediaPlayItem.parentNode.parentNode;
          } else {
            willReplaceNode = mediaPlayItem.parentNode;
          }
          allBrotherNode = willReplaceNode.children;


          const dataId = mediaPlayItem.dataset.id;
          var dataTitle = '';
          for (var j = 0; j < allBrotherNode.length; j++) {
            var brotherNode = allBrotherNode[j];
            if (brotherNode.nodeName == 'SPAN' && brotherNode.className.length == 0) {
              dataTitle += brotherNode.innerText;
            }
          }
          dataTitle = dataTitle.slice(1, dataTitle.length - 1);

          const willReplaceParentNode = willReplaceNode.parentNode;
          var newNode = document.createElement('div');
          newNode.dataset.id = dataId;
          newNode.innerHTML = "<div\n" +
            "      style=\"position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; margin: 10px 0; padding: 0 20px; background-color: #4273C4; width: 100%; height: 210px;\">\n" +
            "      <div style=\"display: flex; align-items: center; align-self: flex-start; margin-top: -30px;\">\n" +
            "        <img src=\"https://store.51yxxg.com/%E7%BF%BC%E4%BC%B4%E5%AD%A6logo.png\" style=\"width: 60px; height: 60px;\">\n" +
            "        <span style=\"font-family:宋体; font-size:16px; color: #ffffff;margin-left: 10px;\">翼麦优学同步课程视频</span>\n" +
            "      </div>\n" +
            "      <span style=\"font-family:宋体; font-size:20px; color: #f6c73d; margin-top: 5px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;\">" + dataTitle + "</span>\n" +
            "      <img src=\"https://store.51yxxg.com/%E6%92%AD%E6%94%BE.png\" style=\"width: 44px; height: 44px; margin-top: 10px;\">\n" +
            "    </div>";

          newNode.onclick = function () {
            window.postMessage('' + dataId);
          };

          willReplaceParentNode.replaceChild(newNode, willReplaceNode);
      }

      var originmediaPlayList = document.getElementsByClassName('mediadetail_play');
      var timesArr = []
      for (var i = 0; i < originmediaPlayList.length; i++) {
        timesArr.push(i)
      }
      for (var i = 0; i < timesArr.length; i++) {
        yiclass_weclass_detaill_replace()
      }

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 24,863评论 1 45
  • 欢迎关注个人微信公众账号:byodian个人博客:Byodian's Blog JavaScript 基础知识总结...
    工具速递阅读 445评论 0 3
  • 概述 document节点是文档的根节点,每张网页都有自己的document节点。window.document属...
    许先生__阅读 338评论 0 2
  • 一、DOM概述 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象 O:Object 对象...
    紫陌兰溪阅读 167评论 0 1
  • 本文整理自《高级javascript程序设计》 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用...
    SuperSnail阅读 347评论 0 1
  • 前天晚上 和瞿大爷聊天 他说他想晚点结婚,可是家里逼的紧,女友已经27 他说那你呢,咋整,也不小了 我说咋咧,怕啥...
    小明哥哥呐阅读 165评论 0 0
  • 胡同里有只猪 为理想下山还了俗 昂首阔步身怀抱负 全身只有一卷家书 风餐露宿 贱入贵出 无惧世人评头论足 胡同里有...
    王雨果阅读 622评论 0 5
  • 希望我不会把自己给诅死
    记仇的疯子阅读 45评论 0 0
  • 抽到了姜精油!带着它去旅行! 因这几日要带着婆婆去海边!临行之前抽取了这几日要带的精油!依次抽到了姜,马郁兰… 在...
    上官亦如阅读 225评论 0 1