반응형
getElementsByClassName의 배열에서 forEach를 사용하면 "TypeError : undefined is not a function"이 발생합니다.
내 JSFiddle 에서는 단순히 요소 배열을 반복하려고합니다. 로그 문이 증명 하듯이 배열은 비어 있지 않습니다. 그러나 호출 forEach은 나에게 (그다지 도움 이되지 않음 )“Uncaught TypeError: undefinedis not a function”오류를 제공합니다.
나는 어리석은 짓을하고있는 것 같다. 내가 뭘 잘못하고 있죠?
내 코드 :
var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
console.log(v);
});.myClass {
background-color: #FF0000;
}<div class="myClass">Hello</div>이는 배열이 아닌 HTMLCollection을document.getElementsByClassName 반환 하기 때문 입니다.
다행히도 이것은 "배열과 같은"객체 ( 객체 인 것처럼 write-되는 이유와 표준 for루프로 반복 할 수있는 이유를 설명 )이므로 다음과 같이 할 수 있습니다.
[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {
ES6 (최신 브라우저 또는 Babel)을 사용하면 배열과 배열을 빌드 하는 것을 사용할 수도 있습니다 .Array.from
Array.from(document.getElementsByClassName('myClass')).forEach(v=>{
또는 배열과 배열을 배열로 배열 :
[...document.getElementsByClassName('myClass'))].forEach(v=>{
작동해야합니다.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="myClass">Hello</div>
<div class="myClass">Hello</div>
<script type="text/javascript">
var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr = [].slice.call(arr); //I have converted the HTML Collection an array
arr.forEach(function(v,i,a) {
console.log(v);
});
</script>
<style type="text/css">
.myClass {
background-color: #FF0000;
}
</style>
</body>
</html>
특정 클래스의 각 요소 ID에 액세스하려는 경우 다음을 수행 할 수 있습니다.
Array.from(document.getElementsByClassName('myClass')).forEach(function(element) {
console.log(element.id);
});
반응형
'IT' 카테고리의 다른 글
| jQuery는 DIV를 다른 DIV로 복제합니다. (0) | 2020.09.03 |
|---|---|
| 컨트롤러에 매개 변수없는 공개 생성자 오류가 있는지 확인 (0) | 2020.09.03 |
| PNG에 JPG와 같은 EXIF 데이터가 포함되어 있습니까? (0) | 2020.09.03 |
| Data.Void의 터무니없는 기능은 무엇에 유용합니까? (0) | 2020.09.03 |
| python NameError : 전역 이름 '__file__'이 정의되지 않습니다. (0) | 2020.09.03 |