동일한 클래스의 요소 배열 javascript

Question

동일한 클래스를 갖는 요소 값의 배열은 어떻게 얻을 수 있습니까? 나는이 작업을 수행 할 때

나는 첫 번째 요소를 얻을,하지만 전체 배열을 원하는 :

var classes = document.querySelector(".klass").value; 
alert(classes); //Outputs only the first element 

을 그리고 입력 값의 전체 배열 싶어 :

<input type="text" class="klass" /> 
<input type="text" class="klass" /> 
<input type="text" class="klass" /> 

을

그게 가능합니까?

Answer 1

요소 배열을 반복하고 각각의 값을 가져와야합니다. 이 [].map를 사용하는 것만 큼 깨끗하지만 good deal faster입니다하지 않을 수

는

var classes = document.querySelectorAll(".klass").value, 
    values = []; 

for(var i = 0; i < classes.length; i++) { 
    values.push(classes[i].value); 
} 

참고.

Answer 2

NodeList (see also the section "How can I convert NodeList to Array?")을 검색 한 다음 배열로 캐스팅하고 map 각 요소의 값을 반환하는 함수를 사용하십시오.

var classesNodeList = document.querySelectorAll(".klass"); 
var classes = Array.prototype.slice.call(classesNodeList).map(function(element) { 
    return element.value; 
}); 

업데이트Ginden에 의해 주석에 명시된 바와 같이

---

,이 작업을 수행하는 짧은 방법은 당신이 사용할 수있는 Function.prototype.call

var classesNodeList = document.querySelectorAll(".klass"); 
var classes = Array.prototype.map.call(classesNodeList, function(element) { 
    return element.value; 
}); 

Answer 3

를 사용 Array.prototype.map에 노드 목록을 전달하는 것입니다 먼저 querySelectorAll 메소드를 사용한 다음 배열의 map functio를 사용하십시오. 이러한 간단한 CSS 셀렉터 식의 경우

var elements = document.querySelectorAll('.klass'); 
var values = [].map.call(elements, function(e) { 
    return e.value; 
}); 

Answer 4

나는 getElementsByClassName를 사용하지 않고 querySelectorAll보다, 그것을 클래스 이름을 줄 것입니다 : n은 결과를 검색 할 수 있습니다. getElementsByClassName은 일반적으로 querySelectorAll을 사용하는 것보다 몇 배 큰 숫자보다 빠릅니다. 이 jsperf을 참조하십시오.

var classes = document.getElementsByClassName("klass"); // Do not use a period here! 
var values = Array.prototype.map.call(classes, function(el) { 
    return el.value; 
}); 

getElementsByClassName는 querySelectorAll보다 일반적으로 더 빠르다. 브라우저는 이미 CSS 변환 속도를 최적화하기 위해 요소를 클래스 이름별로 색인화합니다. getElementsByClassName은 HTMLCollection 요소를 반환하므로 Array 메서드가 없으므로 여기에서도 Array.prototype...을 사용해야합니다.