遍歷修改dom遇到的坑

需求：RNApp項目中加載別人的網(wǎng)頁，加載完畢通過注入script的方式修改html內(nèi)容和事件。

坑的原因：document.getElementsByClassName 是動態(tài)獲取的，并不是一個數(shù)組，每次改變都會重新獲取

填坑前：

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;\">翼麥優(yōu)學(xué)同步課程視頻</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只修改一半，也就是奇數(shù)項

填坑中：

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;\">翼麥優(yōu)學(xué)同步課程視頻</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;\">翼麥優(yōu)學(xué)同步課程視頻</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()
      }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 27,632評論 1贊 45
  • 歡迎關(guān)注個人微信公眾賬號：byodian個人博客：Byodian's Blog JavaScript 基礎(chǔ)知識總結(jié)...
    工具速遞閱讀 771評論 0贊 3
  • 概述 document節(jié)點是文檔的根節(jié)點，每張網(wǎng)頁都有自己的document節(jié)點。window.document屬...
    許先生__閱讀 666評論 0贊 2
  • 一、DOM概述 D: Document 文檔 一份文檔就是一棵節(jié)點樹，每個節(jié)點都是一個對象 O:Object 對象...
    紫陌蘭溪閱讀 353評論 0贊 1
  • 本文整理自《高級javascript程序設(shè)計》 DOM(文檔對象模型)是針對HTML和XML文檔的一個API（應(yīng)用...
    SuperSnail閱讀 594評論 0贊 1