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>
我想这是个简单的任务,但我是新手,被卡住了。我想遍历网页的一些 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>