如何使用javascript获取元素对象数组答案

【问题标题】：How to get an array of Element objects with javascript如何使用javascript获取元素对象数组
【发布时间】：2016-01-08 14:01:24
【问题描述】：

我正在使用用于仪表的 javascript 插件 (http://bernii.github.io/gauge.js/)。

该插件完美运行，但我只能通过使用 (getElementById) 使其工作我希望能够在同一页面上拥有此插件的多个实例（无需为每个实例重复代码），但所有其他 javascript 选择器（getElementByClass）、（querySelectorAll）等都返回节点对象列表，而不是"ELEMENT OBJECTS" 就像 (getElementById) 方法一样。

var opts ={
  lines: 12,
  angle: 0.15,
  lineWidth: 0.44,
  pointer: {
    length: 0.9,
    strokeWidth: 0.035,
    color: '#000000'
  },
  limitMax: 'false',
  colorStart: '#6FADCF',
  colorStop: '#8FC0DA',
  strokeColor: '#E0E0E0',
  generateGradient: true
};

// this works
/*
var target = document.getElementById('gauge1');
var value = target.getAttribute('data-level');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 1000; 
gauge.animationSpeed = 32;
gauge.set(value);

*/

// this does not work
var target = document.getElementsByClassName('gauge');
for(var i=0; i<target.length; i++)
{
  var value = target[i].getAttribute('data-level');
  var gauge = new Gauge(target[i]).setOptions(opts);
  gauge.maxValue = 1000; 
  gauge.animationSpeed = 32; 
  gauge.set(value);
}

<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas class='gauge' id="gauge1" data-level='900'></canvas>
    <canvas class='gauge' id="gauge2" data-level='800'></canvas>
    <canvas class='gauge' id="gauge3" data-level='700'></canvas>
  </body>
</html>

所以我的问题是：有没有办法在不使用 Id 的情况下获取“ELEMENT OBJECTS”数组？

【问题讨论】：

标签： javascript nodes getelementbyid getelementsbyclassname

【解决方案1】：

这个问题的答案很简单，和节点和元素没有任何关系。

我写的是“getelementbyclass”而不是“getelementbyclassname”（语法错误）
“值”作为字符串输入到插件中，因此插件输入不正确。我需要添加 parseInt 并且它有效。

【讨论】：

其实是得到ElementsByClassName

【解决方案2】：

在你的情况下，你也可以使用：

var target = document.getElementsByTagName('canvas');

【讨论】：