Javascript while 从 DOM 遍历 ElementIds 直到第一个空元素

Javascript while loop over ElementIds from DOM until first empty Element

我想这是个简单的任务,但我是新手,被卡住了。我想遍历网页的一些 ElementIds 以提取其中的文本。

我要找的ElementId是这样的:

"p000"、"p001"、"p002" 等(我猜会持续到 "p999")

这是我目前所拥有的。

var totalText=[]
while(text===""):
    var text=document.getElementById("p0003");
    totalText.push(text);
}

现在我想按照描述遍历 ElementIds 并在文本为空时停止,这意味着不再有元素 "p091" 并且循环停止并且直到 "p999" 才继续.

这将有助于获取所有元素并循环遍历它们!

var arrayofelements = [];
function getElements(){
  var lenght=document.getElementsByTagName("div").length;
    for(var a = 0;a <= lenght; a++){   
      if(a == 0){
        a = "000";
      }
      else if(a <= 9){
        a = "00"+a;
      }
      else if(a => 10 && a < 99){
        a = "0"+a;
      }
      var text = document.getElementById("p"+a);
      if(text == undefined || text == null){
       return;
      }  
      arrayofelements.push(text.innerHTML);
    }
}
getElements();
arrayofelements.forEach(foreachfunc);
function foreachfunc(item,index){
  document.write("Array Data:   "+item);
}
<div id="p000">0</div>
<div id="p001">1</div>
<div id="p002">2</div>
<div id="p003">3</div>
<div id="p004">4</div>
<div id="p005">5</div>
<div id="p006">6</div>
<div id="p007">7</div>
<div id="p008">8</div>
<div id="p009">9</div>
<div id="p010">10</div>
<div id="p011">11</div>
<div id="p012">12</div>
<div id="p013">13</div>
<div id="p014">14</div>
<div id="p015">15</div>

您可以通过向所有元素添加 class 属性来向每个元素(p000 到 p999)添加 class。然后使用document.getElementsByClassName()。查询 DOM 是一项开销很大的操作,因此尽量减少查询次数通常是个好主意。此外,document.getElementsByClassName() 会执行您所追求的逻辑,因此无需重新发明轮子。

举个例子:

var paragraphs = Array.from(document.getElementsByClassName('info-para'));
console.log(paragraphs);
<p class="info-para" id="p0">0</p>
<p class="info-para" id="p1">1</p>
<p class="info-para" id="p2">2</p>
<p class="info-para" id="p3">3</p>
<p class="info-para" id="p4">4</p>

注意:上面我用了一个叫Array.from(), which returns an array given an array-like collection. That's because getElementsByClassName() returns a HTMLCollection的方法,它很像一个数组,但不完全是.因此,为了将 HTMLCollection 变成一个实际的数组,您可以使用 Array.from().

编辑:

为了获得一个字符串数组,您可以遍历检索到的数组,并获得每个元素的 innerText,然后将其 .push() 放入一个新数组中,如下所示:

var paragraphs = Array.from(document.getElementsByClassName('info-para'));

var texts = [];

for(var elem of paragraphs) { // loop through each element in paragraphs array
  texts.push(elem.innerText); // get the text of the current element, and push it to the texts array
}
console.log(texts);
console.log(texts.join(', '));
console.log(paragraphs);
<p class="info-para" id="p0">0</p>
<p class="info-para" id="p1">1</p>
<p class="info-para" id="p2">2</p>
<p class="info-para" id="p3">3</p>
<p class="info-para" id="p4">4</p>

一旦你对 JS 更加熟悉,你可以通过提供一个映射到 Array.from() method and using destructuring assignment 的方法来更优雅地编写上面的代码,如下所示:

const texts = Array.from(document.getElementsByClassName('info-para'), ({innerText}) => innerText);
console.log(texts);
<p class="info-para" id="p0">0</p>
<p class="info-para" id="p1">1</p>
<p class="info-para" id="p2">2</p>
<p class="info-para" id="p3">3</p>
<p class="info-para" id="p4">4</p>

var totalText = [];
var num = 2;
var text = document.getElementById("p001").innerHTML;
while (!(text === "")) {
  totalText.push(text);
  var str = "" + num;
  str = str.padStart(3, "0");
  text = document.getElementById("p" + str).innerHTML;
  if (text === "" || text === undefined || text === null) break;
  num++;
}
console.log(totalText);
<div id="p001">1</div>
<div id="p002">2</div>
<div id="p003">3</div>
<div id="p004">4</div>
<div id="p005"></div>
<div id="p006"></div>

您可以查找以字符串开头的 id 并在其上循环,在找到第一个空文本时中断。我添加了一个 class 来说明找到的那个。这依赖于 "first" 的 DOM 序列。

var foundText=[];
var allPIdElements = document.querySelectorAll('*[id^="p"]');
for (let el = 0; el < allPIdElements.length; el++) {
  let item =allPIdElements[el];
  let t = item.innerText;
  foundText.push( t );
  if (t == '') {
    item.classList.add('found');
    foundText.pop();// remove empty
    break;
  }
}
console.log(foundText);
*[id^="p"] {
  border: solid 1px #777777;
  padding: 0.3em;
  margin: 0.5em;
}

.found {
  border: #77DD77 solid 2px;
}
<div id="p001">clear</div>
<div id="p002">tear</div>
<p id="p003">watch</p>
<div id="p004">goat</div>
<div id="p005"></div>
<p id="p06"></p>
<div id="p026"></div>
<p id="p095">cheer</p>
<p id="p096">cheer</p>
<p id="p999">cheer</p>