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

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

ただいまの
回答率

90.76%

  • JavaScript

    15307questions

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

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 477

takane

score 22

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ADOBEヘルプ</title>
    <style>
    body{
      padding: 0;
      margin: 0;
    }
      h1{
        text-align: center;
      }
      h2{
        margin: 0;
        padding: 0;
      }
      .explain{background-color: #000}
      li{
        list-style: none;
      }
      .mark {
        height: 330px;
      }
      .window{
      width: 200px;
      margin: 0 auto;
      overflow: hidden;
      }
      #aplication{
        display: flex;
        padding: 0;
      }
      #aplication li {
        margin-left: 20px;
      }
      #aplication li:first-child{
        margin-left: -440px;
      }
      #aplication li img{
        width: 200px;
        height:200px;
      }
      #back img,#next img{
        margin: 50% 0;
      }
      .slide{
        display: flex;
      }
      .next{
        transition: .8s;
        transform: translateX(-220px);
      }
      .back{
        transition: .8s;
        transform: translateX(220px);
      }
      .explain{
        padding: 30px;
        box-sizing: border-box;
      }
      .explain_tab{
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        box-sizing: border-box;
        display: none;
        transition: .4s;
      }
      .explain_tab h2{
        text-align: center;
      }
      .explain_tab.active{
        opacity: 0;
        display: block;
      }
      .explain_tab.sol{
        opacity: 1;
        transition: .4s;
      }
      .explain_tab.op{
        transition: .4s;
        opacity: 0;
      }

      /*--説明部分--*/
      .explain_tab ul {
        margin-top: 30px;
        padding: 0;
      }
      .explain_tab h2{
        margin-top: 20px;
      }
      .button{
        margin-bottom: 0px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 0;
        background-color: #ddd;
        padding: 15px;
        border-radius: 10px;
        border: 1px #000 solid;
        box-sizing: border-box;
        text-decoration:underline;
      }
      .explain_contents{
        padding: 20px 50px 0;
      }
      .explain_contents.active{

      }
      .ac{
        height: 59px;
        overflow:hidden;
        transition: .8s;
      }
      .button:hover{
        cursor: pointer;
      }
      .listMark li{
        list-style: disc;
      }
      /*--説明部分end--*/
    </style>
  </head>
  <body>
    <main>
      <div class="mark">
        <h1>ADOBEヘルプ</h1>
        <div class="slide" id="slide">
          <div id="back">
            <img src="images/back.png" alt="back">
          </div>
          <div id="middle">
            <div class="window">
              <ul id="aplication">

              </ul>
            </div>
          </div>

          <div id="next">
            <img src="images/next.png" alt="next">
          </div>
        </div>

      </div>



    </main>
    <script>
    (function () {
      var apli =
      [
      {'img':'images/ps_cc_app_RGB.svg','nunber':'tab_ps'},
      {'img':'images/ai_cc_app_RGB.svg','nunber':'tab_ai'},
      {'img':'images/Lr_cc_app_noshadow_RGB.svg','nunber':'tab_lr'},
      {'img':'images/st_app_RGB.svg','nunber':'tab_st'},
      {'img':'images/id_cc_app_RGB.svg','nunber':'tab_id'}
      ];

      var aplication = document.getElementById('aplication');
      var box = [];//変数の並びをかえるための一時格納ボックス
      var currentApli;//現在選択されているアプリケーションを記載しておく

      var sw = false;

      //アプリ画像をドラッグした時の挙動

      var touchList = aplication.getElementsByTagName('li');
      console.log(touchList);
      for (var i = 0; i < touchList.length; i++) {
        touchList[i].getElementsByTagName('img');

        touchList[i].addEventListener('mousedown',function () {
          console.log('ok');
        })
      }
      //変数に入れた画像データをリストに格納し表示

            //スライド部分の配置をずらす(配列の先頭を出す)
            for (var i = 0; i < 2; i++) {
              box.push(apli.pop());
              apli.unshift(box.shift());
            }

      for (var i = 0; i < 5; i++) {
      var li = document.createElement("li");
      var img = document.createElement("img");
      li.dataset.id = apli[i].nunber;
      var imagebox = aplication.appendChild(li).appendChild(img);
      imagebox.src = apli[i].img;
      }


      //スライド部分のwidth調整、explain部分の高さ調整
      window.onresize = ws;
      function ws() {
       var w =  window.innerWidth;
       document.getElementById('slide').style.width = w + "px";
       document.getElementById('middle').style.width = w - 200 + "px";
       var h = window.innerHeight;
       document.getElementsByClassName('explain')[0].style.minHeight = h - 360 + 'px';
     }
     ws();

     //スライド用
     document.getElementById('next').addEventListener('click',function functionName() {
       if (sw === false) {
         next();
         changeTab();
       }else if (sw = true) {
         return;
       }
     });
     document.getElementById('back').addEventListener('click',function functionName() {
       if (sw === false) {
         back();
         changeTab();
       }else if (sw = true) {
         return;
       }
     });

     function changeTab() {
       var deleteTab = document.getElementsByClassName('explain_tab');
       for (var i = 0; i < deleteTab.length; i++) {
         if (deleteTab[i].className === 'sol active explain_tab') {
           deleteTab[i].className = 'op active explain_tab';
         }
       };
       setTimeout(function () {
         for (var i = 0; i < deleteTab.length; i++) {
           deleteTab[i].className = 'op explain_tab';
           document.getElementById(currentApli).className = 'op active explain_tab';
         };
         setTimeout(function () {
           document.getElementById(currentApli).className = 'sol active explain_tab';
         }, 5);
       }, 395);
     };

     function next() {
      sw = true;
      aplication.className = 'next';
      box.push(apli.shift());
      apli.push(box.shift());
      currentApli = apli[2].nunber;
      setTimeout(function () {

        while (aplication.firstChild) {
          aplication.removeChild(aplication.firstChild);
        };
        aplication.className = '';
        for (var i = 0; i < 5; i++) {
        var li = document.createElement("li");
        var img = document.createElement("img");
          var imagebox = aplication.appendChild(li).appendChild(img);
          imagebox.src = apli[i].img;
        }
        sw = false;
      }, 800);
      initButton();
     };
     function back() {
       sw = true;
       aplication.className = 'back';
       box.push(apli.pop());
       apli.unshift(box.shift());
       currentApli = apli[2].nunber;

       setTimeout(function () {

         while (aplication.firstChild) {
           aplication.removeChild(aplication.firstChild);
         };
         aplication.className = '';
         for (var i = 0; i < 5; i++) {
         var li = document.createElement("li");
         var img = document.createElement("img");
           var imagebox = aplication.appendChild(li).appendChild(img);
           imagebox.src = apli[i].img;
         }
         sw = false;
       }, 800);
       initButton();
     };


     var buttonL = document.getElementsByClassName('button');
     var cont = document.getElementsByClassName('explain_contents');
     var ac = document.getElementsByClassName('ac');
     var acSw = [] ;//アコーディオン開閉のスイッチ

     for (var i = 0; i < buttonL.length; i++) {
       acSw.push(false);
       clickButton(i);
     }
     function clickButton(n) {
       buttonL[n].addEventListener('click',function () {
         if (acSw[n] === false) {
           var contH = cont[n].clientHeight;
           var acH = ac[n].clientHeight;
           ac[n].style.height = acH + contH + 'px';
           acSw[n] = true;
         }else if (acSw[n] === true) {
           ac[n].style.height = '59px';
           acSw[n] = false;
         }
       })
     };
     function initButton() {
       for (var i = 0; i < buttonL.length; i++) {
         ac[i].style.height = '59px';
         acSw[i] = false;
       };
     };
    })();

    </script>
  </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/10/05 10:06

    エラーが出た場合はエラー文(できれば全文)を質問本文に追記してください。 https://teratail.com/help/question-tips#questionTips3-4-2

    キャンセル

  • mts10806

    2017/10/05 10:09

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

    キャンセル

  • takane

    2017/10/05 10:11

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

    キャンセル

  • mts10806

    2017/10/05 10:12

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

    キャンセル

回答 4

+6

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/05 10:20

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

    キャンセル

  • 2017/10/05 10:24 編集

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

    キャンセル

  • 2017/10/05 10:34

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

    キャンセル

+4

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

 考え方

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

HTMLCollection.prototype.getElementsByTagName=function(i){
  var ret=[];
  Array.prototype.map.call(this,function(j){
    Array.prototype.push.apply(ret, Array.prototype.map.call(j.getElementsByTagName(i),function(k){
      return k;
    }));
  });
  return ret;
};

 sample

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

<script>
HTMLCollection.prototype.getElementsByTagName=function(i){
  var ret=[];
  Array.prototype.map.call(this,function(j){
    Array.prototype.push.apply(ret, Array.prototype.map.call(j.getElementsByTagName(i),function(k){
      return k;
    }));
  });
  return ret;
};
window.onload=function(){
var touchList = document.getElementById('aplication').getElementsByTagName('li').getElementsByTagName('img');
console.dir(touchList);
}
</script>
<ul id="aplication">
<li>test1</li>
<li><img src="test2.jpg" alt="test2"></li>
<li><img src="test3.jpg" alt="test3"></li>
<li><img src="test4.jpg" alt="test4"><img src="test5.jpg" alt="test5"></li>
<li>test6</li>
</ul>
<img src="test7.jpg" alt="test7">


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+3

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

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

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

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

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


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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/05 10:33

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

    ありがとうございます。

    キャンセル

  • 2017/10/05 10:43 編集

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

    キャンセル

+2

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/05 13:18

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

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15307questions

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