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

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

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

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

Q&A

解決済

2回答

2966閲覧

大きさが取得できない

aaaaaaaa

総合スコア501

JavaScript

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

0グッド

0クリップ

投稿2016/09/02 10:40

下記のソースは、複数の<li>の大きさを取得しようとしている所です。しかし大きさを取得できないのです。
tagnameやclassnameだとundefinedが表示されてしまいます。idだと無事取得できます。
さらに、ulやpで試したところ同じくidでは、取得できたのですがclassnameやtagnameでは、取得できませんでした。

なぜ、classname、tagnameで取得できないのでしょうか。

javascript

1//スライダーの大きさを取得するためliを取得。 2var slider_li = document.getElementsByTagName("li"); 3var slider_li2 = document.getElementById("idli"); 4var slider_li3 = document.getElementsByClassName("li"); 5 6 var slider_li_size = slider_li.offsetWidth ; 7 var slider_li_size2 = slider_li2.offsetWidth ; 8 var slider_li_size3 = slider_li3.offsetWidth ; 9 console.log("大きさ",slider_li_size);//undefined 10 console.log("大きさ",slider_li_size2);//300px 11 console.log("大きさ",slider_li_size3);//undefined

html

1<ul class="cf"> 2<li class="li">スライダー画面1</li> 3<li id="li">スライダー画面2</li> 4<li class="li">スライダー画面3</li> 5</ul>

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

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

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

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

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

guest

回答2

0

ベストアンサー

kei344さんの回答に便乗で恐縮ですがコメントします。

javascript

1var slider_li = document.getElementsByTagName("li"); 2var slider_li2 = document.getElementById("idli"); 3var slider_li3 = document.getElementsByClassName("li");

このコードですが、getElementByIdは「文書中に存在するidは常にユニークである」という大前提に則って単一の要素を返します。関数名も単数です。
一方でgetElementsByTagNamegetElementsByClassNameはコレクションを返します。こちらも関数名が複数になっています。
aaaaaaaaさんも認識されている通り、配列に似たオブジェクトなので、添字を付けることで要素にアクセスできます。
従って、

javascript

1var slider_li = document.getElementsByTagName("li")[0]; 2var slider_li2 = document.getElementById("idli"); 3var slider_li3 = document.getElementsByClassName("li")[0];

であれば正しく大きさを取ることができるはずです。

投稿2016/09/02 14:41

htsign

総合スコア870

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

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

0

NodeList が返っているからです。

【document.getElementsByTagName - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

【document.getElementsByClassName - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

【NodeList - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/NodeList

投稿2016/09/02 10:45

kei344

総合スコア69364

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

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

aaaaaaaa

2016/09/02 11:01

ご回答有難うございます。 自信が無いのですがtagnameやclassnameが返すものは、HTMLCollectionと習いました。またこれらは、配列に似たオブジェクトですが、それが理由でundefinedなのでしょうか。 書籍などでライブオブジェクトは、誤作動のもとなので上手くいかないときは、配列に、との記述があったので、配列なら返ってくるかと思いArray.prototype.slice.call(document.getElementsByTagName("li");)をしてみたのですが上手くいきませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問