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

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

ただいまの
回答率

90.75%

  • JavaScript

    15249questions

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

children()が使えない

解決済

回答 4

投稿

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

takane

score 22

こんにちは。私は今javascriptのchildren()を使ってulからliを抜き出そうとしています。

console.log(aplication.children("li"));


この部分です。
しかし、コンソールを見るとエラーがでてしまいます。
(childrenの括弧をとると一応li
が取り出せます)

どなたかいい解決法をご存じないでしょうか。

<!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;

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

      console.log(aplication.children("li"));
      //変数に入れた画像データをリストに格納し表示

            //スライド部分の配置をずらす(配列の先頭を出す)
            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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

+4

ネイティブDOMchildrenはプロパティで、全部の子エレメントを含んだHTMLCollectionです(MDN)。

同じ名前ですが、jQueryの.children()はセレクタを取れます。

jQueryなしが条件なら、「childrenプロパティからli要素だけ振り分ける」「querySelectorAllで抽出する」などの手段が必要となります。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+3

var aplication = document.getElementById('aplication');
console.log(aplication.children("li"));

という状況であれば

document.querySelectorAll('#aplication li');
(もしくは)
var aplication = document.querySelector('#aplication');
console.log(aplication.querySelectorAll("li"));


のようなセレクタの使い方をするとよいでしょう

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/04 18:23

    簡単なのは間違いないですが、リストの構造によっては、孫要素以降の<li>まで拾ってしまう、というのが欠点ですね。

    キャンセル

  • 2017/10/04 18:28

    maisumakunさん、ご指摘ありがとうございます。
    たしかにliは階層になることが多いですからね

    とりあえずaplication直下のliを抜きたいなら、こう書いたほうがよいかもしれません
    document.querySelectorAll('#aplication>li');

    キャンセル

  • 2017/10/04 18:30

    ありがとうございます。いろいろ複雑なんですね。
    皆さんの方法を一つずつ試してみようと思います。

    キャンセル

+3

var aplication = document.getElementById('aplication');

なので、「application」はElementオブジェクトですね。

Elementオブジェクトでは「children」というのはプロパティです。
ParentNode.children - MDN

プロパティなので末尾に「()」は使えません。

やりたいことから想像すると、「getElementsByTagName()」というメソッドを使うのがいいんじゃないすかね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/04 18:29

    ありがとうございます。
    Elementオブジェクトではプロパティ扱いになるんですね。
    皆さんの方法を一つずつ試してみようと思います。

    キャンセル

+2

ParentNode.children - Web API インターフェイス | MDN

childrenは参照用プロパティなので、メソッドのように使用したり、タグ名で直接絞り込むということはできません。
配列の要素からtagNameで判別するか、jQueryを使用する等での対応となるかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/04 18:32

    ありがとうございます。やはりjQeryが必要ですかね……
    皆さんの方法を一つずつ試してみようと思います。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15249questions

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