2016-01-08 5 views
0

Я использую плагин javascript для датчиков (http://bernii.github.io/gauge.js/).Как получить массив объектов Element с помощью javascript

Плагин работает отлично, но я могу только заставить его работать с помощью (getElementById) Я хочу иметь несколько экземпляров этого плагина на одной странице (без повторения кода для каждого), но все другие селекторы javascript (getElementByClass), (querySelectorAll) и т. д., возвращают список ОБЪЕКТОВ NODE вместо «ОБЪЕКТОВ ELEMENT», как это делает метод 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?


ответ

1

Ответ на этот вопрос очень прост и не имеет ничего общего с узлами и элементами.

  1. я писал «getelementbyclass» вместо «getelementbyclassname» (ошибка синтаксиса)
  2. «значение» был введен в виде строки в плагине и, следовательно, плагин не был введен правильно. Мне нужно было добавить parseInt, и это сработало.
+1

это на самом деле получить ** E ** lement ** зВ ** у ** C ** деваха ** N ** AME –

0

В вашем случае вы также можете использовать:

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