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

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

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

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

Q&A

解決済

4回答

1903閲覧

getElementbyTagNameの二重使いってできますか?

takane

総合スコア63

JavaScript

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

0グッド

0クリップ

投稿2017/10/05 01:00

編集2017/10/05 01:10

こんにちは。
今jsの勉強をしているのですが、
下記のようなプログラムを書いてエラーがでます。

js

1var touchList = aplication.getElementsByTagName('li').getElementsByTagName('img');

getElementsBytagNameを二回使うことはできないのでしょうか?
aplicationはulのidで、その下のliのさらに下のimgを取り出したいです。

何かよ方法はないでしょうか?
---追加--

すみません。
全体のコードを記載いたします。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ADOBEヘルプ</title> 6 <style> 7 body{ 8 padding: 0; 9 margin: 0; 10 } 11 h1{ 12 text-align: center; 13 } 14 h2{ 15 margin: 0; 16 padding: 0; 17 } 18 .explain{background-color: #000} 19 li{ 20 list-style: none; 21 } 22 .mark { 23 height: 330px; 24 } 25 .window{ 26 width: 200px; 27 margin: 0 auto; 28 overflow: hidden; 29 } 30 #aplication{ 31 display: flex; 32 padding: 0; 33 } 34 #aplication li { 35 margin-left: 20px; 36 } 37 #aplication li:first-child{ 38 margin-left: -440px; 39 } 40 #aplication li img{ 41 width: 200px; 42 height:200px; 43 } 44 #back img,#next img{ 45 margin: 50% 0; 46 } 47 .slide{ 48 display: flex; 49 } 50 .next{ 51 transition: .8s; 52 transform: translateX(-220px); 53 } 54 .back{ 55 transition: .8s; 56 transform: translateX(220px); 57 } 58 .explain{ 59 padding: 30px; 60 box-sizing: border-box; 61 } 62 .explain_tab{ 63 background-color: #fff; 64 border-radius: 10px; 65 padding: 15px; 66 box-sizing: border-box; 67 display: none; 68 transition: .4s; 69 } 70 .explain_tab h2{ 71 text-align: center; 72 } 73 .explain_tab.active{ 74 opacity: 0; 75 display: block; 76 } 77 .explain_tab.sol{ 78 opacity: 1; 79 transition: .4s; 80 } 81 .explain_tab.op{ 82 transition: .4s; 83 opacity: 0; 84 } 85 86 /*--説明部分--*/ 87 .explain_tab ul { 88 margin-top: 30px; 89 padding: 0; 90 } 91 .explain_tab h2{ 92 margin-top: 20px; 93 } 94 .button{ 95 margin-bottom: 0px; 96 font-size: 18px; 97 font-weight: bold; 98 text-align: center; 99 padding: 0; 100 background-color: #ddd; 101 padding: 15px; 102 border-radius: 10px; 103 border: 1px #000 solid; 104 box-sizing: border-box; 105 text-decoration:underline; 106 } 107 .explain_contents{ 108 padding: 20px 50px 0; 109 } 110 .explain_contents.active{ 111 112 } 113 .ac{ 114 height: 59px; 115 overflow:hidden; 116 transition: .8s; 117 } 118 .button:hover{ 119 cursor: pointer; 120 } 121 .listMark li{ 122 list-style: disc; 123 } 124 /*--説明部分end--*/ 125 </style> 126 </head> 127 <body> 128 <main> 129 <div class="mark"> 130 <h1>ADOBEヘルプ</h1> 131 <div class="slide" id="slide"> 132 <div id="back"> 133 <img src="images/back.png" alt="back"> 134 </div> 135 <div id="middle"> 136 <div class="window"> 137 <ul id="aplication"> 138 139 </ul> 140 </div> 141 </div> 142 143 <div id="next"> 144 <img src="images/next.png" alt="next"> 145 </div> 146 </div> 147 148 </div> 149 150 151 152 </main> 153 <script> 154 (function () { 155 var apli = 156 [ 157 {'img':'images/ps_cc_app_RGB.svg','nunber':'tab_ps'}, 158 {'img':'images/ai_cc_app_RGB.svg','nunber':'tab_ai'}, 159 {'img':'images/Lr_cc_app_noshadow_RGB.svg','nunber':'tab_lr'}, 160 {'img':'images/st_app_RGB.svg','nunber':'tab_st'}, 161 {'img':'images/id_cc_app_RGB.svg','nunber':'tab_id'} 162 ]; 163 164 var aplication = document.getElementById('aplication'); 165 var box = [];//変数の並びをかえるための一時格納ボックス 166 var currentApli;//現在選択されているアプリケーションを記載しておく 167 168 var sw = false; 169 170 //アプリ画像をドラッグした時の挙動 171 172 var touchList = aplication.getElementsByTagName('li'); 173 console.log(touchList); 174 for (var i = 0; i < touchList.length; i++) { 175 touchList[i].getElementsByTagName('img'); 176 177 touchList[i].addEventListener('mousedown',function () { 178 console.log('ok'); 179 }) 180 } 181 //変数に入れた画像データをリストに格納し表示 182 183 //スライド部分の配置をずらす(配列の先頭を出す) 184 for (var i = 0; i < 2; i++) { 185 box.push(apli.pop()); 186 apli.unshift(box.shift()); 187 } 188 189 for (var i = 0; i < 5; i++) { 190 var li = document.createElement("li"); 191 var img = document.createElement("img"); 192 li.dataset.id = apli[i].nunber; 193 var imagebox = aplication.appendChild(li).appendChild(img); 194 imagebox.src = apli[i].img; 195 } 196 197 198 //スライド部分のwidth調整、explain部分の高さ調整 199 window.onresize = ws; 200 function ws() { 201 var w = window.innerWidth; 202 document.getElementById('slide').style.width = w + "px"; 203 document.getElementById('middle').style.width = w - 200 + "px"; 204 var h = window.innerHeight; 205 document.getElementsByClassName('explain')[0].style.minHeight = h - 360 + 'px'; 206 } 207 ws(); 208 209 //スライド用 210 document.getElementById('next').addEventListener('click',function functionName() { 211 if (sw === false) { 212 next(); 213 changeTab(); 214 }else if (sw = true) { 215 return; 216 } 217 }); 218 document.getElementById('back').addEventListener('click',function functionName() { 219 if (sw === false) { 220 back(); 221 changeTab(); 222 }else if (sw = true) { 223 return; 224 } 225 }); 226 227 function changeTab() { 228 var deleteTab = document.getElementsByClassName('explain_tab'); 229 for (var i = 0; i < deleteTab.length; i++) { 230 if (deleteTab[i].className === 'sol active explain_tab') { 231 deleteTab[i].className = 'op active explain_tab'; 232 } 233 }; 234 setTimeout(function () { 235 for (var i = 0; i < deleteTab.length; i++) { 236 deleteTab[i].className = 'op explain_tab'; 237 document.getElementById(currentApli).className = 'op active explain_tab'; 238 }; 239 setTimeout(function () { 240 document.getElementById(currentApli).className = 'sol active explain_tab'; 241 }, 5); 242 }, 395); 243 }; 244 245 function next() { 246 sw = true; 247 aplication.className = 'next'; 248 box.push(apli.shift()); 249 apli.push(box.shift()); 250 currentApli = apli[2].nunber; 251 setTimeout(function () { 252 253 while (aplication.firstChild) { 254 aplication.removeChild(aplication.firstChild); 255 }; 256 aplication.className = ''; 257 for (var i = 0; i < 5; i++) { 258 var li = document.createElement("li"); 259 var img = document.createElement("img"); 260 var imagebox = aplication.appendChild(li).appendChild(img); 261 imagebox.src = apli[i].img; 262 } 263 sw = false; 264 }, 800); 265 initButton(); 266 }; 267 function back() { 268 sw = true; 269 aplication.className = 'back'; 270 box.push(apli.pop()); 271 apli.unshift(box.shift()); 272 currentApli = apli[2].nunber; 273 274 setTimeout(function () { 275 276 while (aplication.firstChild) { 277 aplication.removeChild(aplication.firstChild); 278 }; 279 aplication.className = ''; 280 for (var i = 0; i < 5; i++) { 281 var li = document.createElement("li"); 282 var img = document.createElement("img"); 283 var imagebox = aplication.appendChild(li).appendChild(img); 284 imagebox.src = apli[i].img; 285 } 286 sw = false; 287 }, 800); 288 initButton(); 289 }; 290 291 292 var buttonL = document.getElementsByClassName('button'); 293 var cont = document.getElementsByClassName('explain_contents'); 294 var ac = document.getElementsByClassName('ac'); 295 var acSw = [] ;//アコーディオン開閉のスイッチ 296 297 for (var i = 0; i < buttonL.length; i++) { 298 acSw.push(false); 299 clickButton(i); 300 } 301 function clickButton(n) { 302 buttonL[n].addEventListener('click',function () { 303 if (acSw[n] === false) { 304 var contH = cont[n].clientHeight; 305 var acH = ac[n].clientHeight; 306 ac[n].style.height = acH + contH + 'px'; 307 acSw[n] = true; 308 }else if (acSw[n] === true) { 309 ac[n].style.height = '59px'; 310 acSw[n] = false; 311 } 312 }) 313 }; 314 function initButton() { 315 for (var i = 0; i < buttonL.length; i++) { 316 ac[i].style.height = '59px'; 317 acSw[i] = false; 318 }; 319 }; 320 })(); 321 322 </script> 323 </body> 324</html>

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

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

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

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

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

m.ts10806

2017/10/05 01:09

ソースコードもhtml含めてjavascriptもなるべく全文ご提示ください。(再現確認や回答のために重要な素材となります)
takane

2017/10/05 01:11

すみません。htmlとjsを追加しました。初心者のため、すべてhtmlにべた書きになっています・・・
m.ts10806

2017/10/05 01:12

すみません。最初のコメントに書いたようにエラー内容もお願いします・・・。
guest

回答4

0

document.querySelectorAllを使えば一発です。cssのセレクタ記法と同様の書き方で、elementのリストが取得できます。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

javascript

1var touchList = document.querySelectorAll("#application li img");

投稿2017/10/05 01:16

編集2017/10/05 01:19
masaya_ohashi

総合スコア9206

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

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

masaya_ohashi

2017/10/05 01:20

すみません、最初querySelectorと書いてましいたが、querySelectorAllに修正しました。
m.ts10806

2017/10/05 01:25 編集

質問タイトルと内容からgetElementsByTagName利用前提で回答しましたが、この方が一発スッキリですね。
takane

2017/10/05 01:34

あ、querySelectorAllも使えるんですね。 いくつか試してみます。 ありがとうございます。
guest

0

勉強中ということなのでせっかくなので拡張方法をつけておきます
querySelector系の処理でほとんど賄われるのであまり使う機会はないと思いますが
あくまでも勉強の一環だと思って下さい

考え方

getElementsByTagNameで得られる値はHTMLCollectionなので
それをprototypeで拡張すると結果を展開できるようになります。
ただし戻り値はあくまでも配列です。

javascript

1HTMLCollection.prototype.getElementsByTagName=function(i){ 2 var ret=[]; 3 Array.prototype.map.call(this,function(j){ 4 Array.prototype.push.apply(ret, Array.prototype.map.call(j.getElementsByTagName(i),function(k){ 5 return k; 6 })); 7 }); 8 return ret; 9};

sample

上記を含むソースがこんな感じ

javascript

1<script> 2HTMLCollection.prototype.getElementsByTagName=function(i){ 3 var ret=[]; 4 Array.prototype.map.call(this,function(j){ 5 Array.prototype.push.apply(ret, Array.prototype.map.call(j.getElementsByTagName(i),function(k){ 6 return k; 7 })); 8 }); 9 return ret; 10}; 11window.onload=function(){ 12var touchList = document.getElementById('aplication').getElementsByTagName('li').getElementsByTagName('img'); 13console.dir(touchList); 14} 15</script> 16<ul id="aplication"> 17<li>test1</li> 18<li><img src="test2.jpg" alt="test2"></li> 19<li><img src="test3.jpg" alt="test3"></li> 20<li><img src="test4.jpg" alt="test4"><img src="test5.jpg" alt="test5"></li> 21<li>test6</li> 22</ul> 23<img src="test7.jpg" alt="test7">

sampleの結果、id=aplication内のli内のimgなので4つのオブジェクトが拾えているのが
わかると思います。

投稿2017/10/05 03:52

yambejp

総合スコア114583

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

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

0

ベストアンサー

追記ありがとうございます。

getElementsBytagNameを二回使うことはできないのでしょうか?

理解としては正しいと思います。
正確にはgetElementsBytagName()は結果を配列として返すため、返却されたelement情報配列のどれにアクセスするかを決めないと、getElementsBytagName()を重ねることはできない 、というのが正解です。
「Elements」と複数形になっているのは配列という形で返すためです。
※この辺りはご提示ソースで使われているgetElementsByClassName()と概念は同じです。

「何番目」というのが決まっているのであれば、下記のように記述すれば取得可能です。

javascript

1var touchList = aplication.getElementsByTagName('li')[0].getElementsByTagName('img');

決まっていないのであればいったんliを受け、forなどでループして取り出してあげると良いです。

javascript

1var touchList = aplication.getElementsByTagName('li'); 2var imgList = []; 3for(i=0;i<touchList.length;i++){ 4 imgList[i] = touchList[i].getElementsByTagName('img'); 5} 6console.log(imgList);

※imgも配列で取得されるので利用する際は注意が必要です

投稿2017/10/05 01:22

編集2017/10/05 01:27
m.ts10806

総合スコア80765

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

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

takane

2017/10/05 01:33

なるほど!配列でとるのですか。たしかに複数あるものですから 何番目かを指定してあげなくてはとりだせないですね。 ありがとうございます。
m.ts10806

2017/10/05 01:44 編集

私のほうがちょっと編集途中で投稿してしまっていますが、 「ご提示ソースで使われているgetElementsByClassName() と概念的には同じ」 というところですね。
guest

0

解決済ですがご参考まで記載します。

getElementsByTagNameの処理結果はHTMLCollectionという配列(のようなもの)になり、getElementsByTagNameが続けて使用できない理由はmts10806さんの回答の通りです。

masaya_ohashiさんのquerySelectorAllと同じような結果をgetElementsByTagNameで取得しようとした場合として、下記のように考えてみました。

javascript

1var application = document.getElementById('application'); 2var touchList = Array.prototype.slice.call( 3 application.getElementsByTagName('li') 4) 5.map(elm => Array.prototype.slice.call(elm.getElementsByTagName('img'))) 6.reduce((result, elms) => result.concat(elms), []);

上記処理では HTMLCollection が Array オブジェジクトとは異なることから、取得結果を都度 Array オブジェクトに変換しています。
きちんと使えているかは分かりませんが、MapReduceという考え方で配列を処理しています。

投稿2017/10/05 02:47

編集2017/10/05 03:56
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

takane

2017/10/05 04:18

はっ!今配列に変換するためにどうするか悩み中だったのでとても助かります! まだ消化し切れていないのですが、 ひとつずつ調べてつかってみますね。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問