遍历修改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()
      }
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,626评论 1赞 45
  • JavaScript 基础知识总结(二)
    欢迎关注个人微信公众账号：byodian个人博客：Byodian's Blog JavaScript 基础知识总结...
    工具速递阅读 770评论 0赞 3
  • document节点
    概述 document节点是文档的根节点，每张网页都有自己的document节点。window.document属...
    许先生__阅读 664评论 0赞 2
  • dom
    一、DOM概述 D: Document 文档 一份文档就是一棵节点树，每个节点都是一个对象 O:Object 对象...
    紫陌兰溪阅读 353评论 0赞 1
  • DOM
    本文整理自《高级javascript程序设计》 DOM(文档对象模型)是针对HTML和XML文档的一个API（应用...
    SuperSnail阅读 594评论 0赞 1