获取数组中的所有span innerHTML

Get all span innerHTML in an array

本文关键字：span innerHTML 数组 获取      更新时间：2023-11-16

所以我正在努力理解JS，一直在做一个小的JS项目来学习它。试图用javascript.html制作一个简单的计算器，但已经被卡住了。

我想从数组中的所有跨度中获取innerHTML，但我不知道如何做到这一点。（我想使用纯JavaScript）。我尝试的是：

var allSpans = document.getElementsByTagName('span');
var arrayNumbers = [];
for (var i = 0; i <= allSpans.length; i++) {
   arrayNumbers.push(allSpans[i].innerHTML);
}

还有我的html:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <div id="calculator">
    <span class="numb">1</span>
    <span class="numb">2</span>
    <span class="numb">3</span>
    <span class="calc">x</span><br />
    <span class="numb">4</span>
    <span class="numb">5</span>
    <span class="numb">6</span>
    <span class="calc">/</span><br />
    <span class="numb">7</span>
    <span class="numb">8</span>
    <span class="numb">9</span>
    <span class="calc">√</span><br />
    <span class="numb">0</span>
    <span class="calc">+</span>
    <span class="calc">-</span>
    <span class="calc">=</span><br />
    <input type="text" >
  </div>
</body>
</html>

什么是最好的方法，为什么？试着用正确的方式学习：）非常感谢！

您的代码很好。只需将i <= allSpans.length替换为i < allSpans.length即可。

参见jsfiddle。

Array.length返回数组中元素的数量。但请记住，数组索引从0开始（不仅在JS中，而且在大多数语言中）。因此，在您的示例中，长度为16的数组将只具有最多15的索引。访问array[16]会使代码崩溃。

为了防止出现这样的错误，您可以使用jQuery.each（但我建议您先学习标准JS）。

var array = [];
$('span').each(function () {
    array.push(this.innerHTML);
});

参见jsfiddle。

您几乎做到了，只是一个小错误：在for循环中使用<而不是<=：

for (var i = 0; i < allSpans.length; i++) {
   arrayNumbers.push(allSpans[i].innerHTML);
}

当使用数组索引时，它们从0变为length - 1（相当于length元素的数量），因此在循环中必须确保不超过这个范围。

您的循环中有<=。allSpans有16个元素（0-15）。当您尝试访问第16个元素时，它是undefined；CCD_ 14抛出错误；并且您的代码停止。

解决方案：将<=替换为<。

此外：在这种特殊情况下，这并不重要，但如果你有一个按钮>或&，你会得到糟糕的结果。我建议在这里使用.textContent而不是.innerHTML。

尝试类似的东西

    var allSpans = document.getElementsByTagName('span');
    var arrayNumbers = [];
    for (var i = 0; i < allSpans.length; i++) {
       arrayNumbers.push(allSpans.item(i).innerHTML);
    }

getElementsByTagName（）方法返回具有指定标记名的元素的子元素的集合，作为NodeList对象。

参考

https://studio.tellme.com/dom/ref/methods/getelementsbytagname.html

几周前，我用与您类似的方法编写了一个非常简单的计算器。。。

它适用于移动设备和现代浏览器。

这是css

body,html{
 height:100%;
 margin:0;
 padding:0;
 background-color:#666;
}
*{
 box-sizing:border-box;
}
.clc{
 width:256px;
 height:320px;
 clear:both;
}
.clc>*{
 border:4px solid #666;
 border-radius:4px;
 font:normal normal bold 20px/56px Arial,Helvetica,sans-serif;
 border-radius:10px;
}
.clc>input{
 width:100%;
 height:20%;
 text-align:right;
 padding:0 20px;
}
.clc>div{
 width:25%;
 height:20%;
 background-color:#5a5a5a;
 color:#fff;
 text-align:center;
 float:left;
}
.clc>div:nth-child(4n+1){
 background-color:#f36573;
}
.clc>div:nth-last-child(1){
 width:100%;
 background-color:#ffb343;
}

这是为做这项工作的非常短的javascript代码

function calc(e){
 var a=e.target.innerText,b=this.firstChild;
 b.value=a=='='?eval(b.value):a=='C'?'':b.value+a;
}
var gui=document.createElement('div');
gui.className='clc';
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>';
gui.addEventListener('click',calc,false);
window.onload=function(){
 document.body.appendChild(gui);
}

这是的一个实例

http://jsfiddle.net/trjsJ/

如果你不明白什么，就去问吧！

更新

计算解释

function calc(event){
 var clickedText=event.target.innerText,// this is the clicked element inner Text
 inputBox=this.firstChild; // this is the input box
 if(clickedText=='='){// if the clicked text is equal symbol
  inputBox.value=eval(inputBox.value); // calculate the input string by evulating it
 }else{
  if(clickedText=='C'){ // if clicked text is C 
   inputBox.value='';// clear the input box
  }else{
   inputBox.value=inputBox.value+clickedText; // add the clicked text
  }
 }
}

您可以使用Array.prototype.map()将span元素的innerHTML存储在数组中：

var span = document.getElementsByTagName('span');
var span_array = [].map.call(span, function (element) {
  return element.innerHTML;
});

您可以使用ECMAScript 6（ES6）：优化此过程

const span = document.getElementsByTagName('span');
let span_array = Array.from(span, element => element.innerHTML);

注意：如果您试图访问标签中的非HTML内容，我个人建议您将textContent与trim()函数结合使用，而不是使用innerHTML。

相关文章：