質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

247閲覧

jsでのlengthの扱い

takane

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/18 05:54

編集2018/12/18 06:59

こんにちは。javascriptのlengthでわからないことがあります。
cssのクラスをつけた数を取得したいのですが、HtmlCollectionのため、配列ではなく、取得できません。

しかし,for文の中では配列とみなされるようで、lengthが使えます。

js

1for (var i = 0; i < classes.length; i++) { 2console.log(classes.length);//3 3}

これはなぜでしょうか?

classesには、単なるブロックがついているだけです。

js

1// JavaScript Document 2 3(function(){ 4 var classes = document.getElementsByClassName('historyBox'); 5 6 var wh = window.innerHeight; 7 8 9 10 function fadeIn(){ 11 12 13 for (var i = 0; i < classes.length; i++) { 14 var thisBox = classes[i]; 15 var thisDt = thisBox.children[1].children[0]; 16 17 var thisSize = thisBox.getBoundingClientRect().top; 18 if(thisSize > 0 && thisSize <= wh/2){ 19 20 thisDt.classList.add("fadein_new"); 21 22 var furstDd = thisBox.children[1].children[1]; 23 var secondDd = thisBox.children[1].children[2]; 24 25 26 setTimeout 27 28 var timeDelay = function(){ 29 furstDd.classList.add("fadein_new"); 30 secondDd.classList.add("fadein_new"); 31 } 32 33 setTimeout (timeDelay,400); 34 console.log(1); 35 36 } 37 } 38 39 40 41 42 43 } 44 45 //fadeIn(); 46 47 window.onscroll = fadeIn; 48 49 function changeSize(){ 50 var wh = window.innerHeight; 51 //console.log(ww + wh); 52 } 53 54 window.onresize = changeSize; 55 56 57 58 59 60 61})();

html

1<div class="historyBox box1955"></div> 2

すみません。仕事なのでできるところだけしかかけないことを謝ります。

一応動きは再現できて、その間にあれ?となったところをお聞きしているので、
多分法的には問題ないはずですが・・・。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mather

2018/12/18 06:10

classes の定義部分も含めてコードを提示してください。
Lhankor_Mhy

2018/12/18 07:12

ご提示のコードで classes.length が取得できなかった場所を教えてください。 また、「取得できなかった」とは具体的には何が起きていますか? エラーが出ているということでしょうか?
guest

回答4

0

HtmlCollectionのため、配列ではなく、取得できません。

いえ、.lengthはループの中だろうが外だろうが関係なくあるかと思うのですが。

投稿2018/12/18 05:59

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2018/12/18 06:07

本当ですか? なんかループの外に出すとlengthのあたいが0になってしまうのです・・・。
yambejp

2018/12/18 06:11

質問内容が矛盾してますね ループのときに参照できるからループが発生しているのであって 参照できなければループは回転しないでしょう
takane

2018/12/18 06:55

うう・・・すみません。確かにそのとおりなのですが・・・。 自分でも何がなんだかわからなくなってしまいました。
guest

0

ベストアンサー

HTML DOM 内の HTMLCollection は生きて (live) います。それらは元になった document が変更された時点で自動的に更新されます。

HTMLCollection | MDN

とあるとおり、要素に対して何らかの変更を加えた場合、HTMLCollectionは現在の値を示します。
そういうことでは?

js

1var x = document.getElementsByClassName('test'); 2console.log(x.length); //1 3x[0].classList.remove('test'); 4console.log(x.length); //0

投稿2018/12/18 06:25

編集2018/12/18 06:26
Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2018/12/18 06:53

なんででしょうね? 私がなにか書きミスしているのでしょうか・・・
Lhankor_Mhy

2018/12/18 07:18

解決していないのにBAつけないで欲しいのですが……
takane

2018/12/18 07:31

あ、解決していなかったのですね。 ちょっとこのサイトの使い方がわかっていなかったようです・・・。
Lhankor_Mhy

2018/12/18 07:53

ご質問者が回答に納得しているならそれでいいのですが、そうではないのですよね?
takane

2018/12/19 07:50

いろいろなご意見を頂いたので、一旦自分で消化しようと思いました。 なんとなく、これは自分が何かに気づいていなくてこのようになっているのだと思います・・・。 答えになっていなくてすみません。
guest

0

classesには何が入っているのでしょうか ? それを取得する部分のコードも示していただけるとわかるかもしれません。
HTMLCollectionならlengthは参照可能だと思いますが、(HTMLCollection(MDN))

投稿2018/12/18 06:08

mks

総合スコア80

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2018/12/18 06:53

一応コードを書きましたが、初心者ですのでちょっと汚いかもしれません・・・
guest

0

for (var i = 0; i < classes.length; i++) {

console.log(classes.length);//3
}

ちょっと意味がわかりません

javascript

1for (var i = 0; i < classes.length; i++) { 2console.log(classes[i]); 3}

ではないのですか?

sample

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var n1=document.getElementsByTagName('div');//HTMLCollection 4 for(var i=0;i<n1.length;i++){ 5 console.log(n1[i].textContent); 6 } 7 [].forEach.call(n1,function(x){ 8 console.log(x.textContent); 9 }); 10 if(!n1.forEach) console.log('n1 not have function "forEach"');//n1は直接forEachできない 11 12 var n2=document.querySelectorAll('div');//NodeList 13 [].forEach.call(n2,function(x){ 14 console.log(x.textContent); 15 }); 16}); 17</script> 18<div>1</div> 19<div>2</div> 20<div>3</div>

投稿2018/12/18 06:00

編集2018/12/18 06:07
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2018/12/18 06:53

私がなにか書きミスしているのでしょうか・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問