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

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

新規登録して質問してみよう
ただいま回答率
85.50%
オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

3回答

1926閲覧

なぜ、添え字目の文字が返ってくるのか

aaaaaaaa

総合スコア501

オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2016/09/08 11:14

編集2016/09/09 11:44

下記のソースでforin文で宣言した変数liに添え字を与えるとHTMLCollectionが持つメンバであるlengthやitem、namedItemの添え字目の文字が返ってくる現象に理解が及ばず質問しました。
なぜ、liに添え字を与えると添え字目の文字が返ってくるのでしょうか。

html

1<ulclass="cf"> 2<li></li><!-- 300px--> 3<li></li> 4<li></li> 5</ul>

javascript

1var slider_li = document.getElementsByTagName("li"); 2console.log("li",document.getElementsByTagName("li")); 3 4for(var li in slider_li) {//slider_li内のプロパティ名を代入している。 5 6 if(typeof(count) === "undefined") { 7 var count= 0; 8 } else if(count == 0) { 9 count += 1; 10 } else { 11 count += 1; 12 } 13 14 //スライダー(li)の大きさを取得。offsetWidthは、ボーダーとパディングを含んでいる。 15 var slider_li_size = slider_li[count].offsetWidth; 16 17 console.log("★count回数",count,"★プロパティ名",li[count],"★slider_li",slider_li); 18} 19 20//★count回数 0 ★プロパティ 0 ★slider_li [object HTMLCollection] 21//★count回数 1 ★プロパティ undefined ★slider_li [object HTMLCollection] 22//★count回数 2 ★プロパティ undefined ★slider_li [object HTMLCollection] 23 24//lengthプロパティには、li[3]という処理がなされ、lengthという文字の三文字目にあたる「g」が返ってきた。 25//★count回数 3 ★プロパティ g ★slider_li [object HTMLCollection] 26//item()には、li[4]という処理がなされ、itemという文字の四文字目を探したが、文字数を超過したのでundefinedが返ってきた。 27//★count回数 4 ★プロパティ undefined ★slider_li [object HTMLCollection] 28//namedItem()には、li[5]という処理がなされ、namedItemという文字の五文字目にあたる「I」が返ってきた。 29//★count回数 5 ★プロパティ I ★slider_li [object HTMLCollection]

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

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

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

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

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

guest

回答3

0

配列化の有無は全く関係がありません。
変数 li はプロパティ名なので li === "0" なら li[0] === "0" であり、li[1] === undefined です。

JavaScript

1var slider_li = document.getElementsByTagName('li'); 2 3for (var li in slider_li) { 4 console.log('li = ', li); 5 console.log('li[0] = ', li[0]); 6} 7 8var array_li = Array.prototype.slice.call(document.getElementsByTagName('li')); 9 10for (var li in array_li) { 11 console.log('li = ', li); 12 console.log('li[0] = ', li[0]); 13}

for-in 文を誤解しているので複雑なコードを書く前にもっと単純なコードでトライアンドエラーを繰り返して for-in 構文を習得する事から始めてください。

ちなみにこの手の構文でスマートに疑似配列を回すなら for-in ではなく、 for-of を使います。
for-in は列挙順を保証しないので順番が重要な配列では使いません。

Re: aaaaaaaa さん

投稿2016/09/08 12:24

編集2016/09/08 12:27
think49

総合スコア18156

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

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

aaaaaaaa

2016/09/09 11:45

ご回答有難うございました。仰る通り配列化は、意味がなかったみたいですね。たまたま何かの手違いで有効に見えていたのでしょう。
guest

0

getElementsByTagName()で得た配列は
for inではなく普通のforで回してください

javascript

1<script> 2window.onload=function(){ 3var slider_li = document.getElementsByTagName("li"); 4for(var i=0;i<slider_li.length;i++){ 5 console.log("★プロパティ",i,"★内容",slider_li[i].innerHTML); 6} 7} 8</script> 9<ulclass="cf"> 10<li></li><!-- 300px--> 11<li></li> 12<li></li> 13</ul> 14

投稿2016/09/08 11:28

yambejp

総合スコア114583

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

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

aaaaaaaa

2016/09/09 11:44

ご回答有難うございました。試行錯誤の結果うすうすfor文じゃないとダメだ、というのには気づいていたのですがforin文で変数liに添え字を与えるとlengthなどのメンバの添え字目の文字が返ってくる現象に理解が及ばず質問をしたのです。
guest

0

ベストアンサー

数値インデックスでStringの文字へアクセスできることを知らなかった、ってことでしょうか?

String#文字へのアクセス - JavaScript | MDN

JavaScript

1var str = "abcdefg"; 2alert(str[0]); //=> "a" 3alert(str[3]); //=> "d"

投稿2016/09/10 02:19

YsMana

総合スコア257

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問