children()が使えない

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

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

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

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

js
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      console.log(aplication.children("li"));
173      //変数に入れた画像データをリストに格納し表示
174
175            //スライド部分の配置をずらす（配列の先頭を出す）
176            for (var i = 0; i < 2; i++) {
177              box.push(apli.pop());
178              apli.unshift(box.shift());
179            }
180
181      for (var i = 0; i < 5; i++) {
182      var li = document.createElement("li");
183      var img = document.createElement("img");
184      li.dataset.id = apli[i].nunber;
185      var imagebox = aplication.appendChild(li).appendChild(img);
186      imagebox.src = apli[i].img;
187      }
188
189
190      //スライド部分のwidth調整、explain部分の高さ調整
191      window.onresize = ws;
192      function ws() {
193       var w =  window.innerWidth;
194       document.getElementById('slide').style.width = w + "px";
195       document.getElementById('middle').style.width = w - 200 + "px";
196       var h = window.innerHeight;
197       document.getElementsByClassName('explain')[0].style.minHeight = h - 360 + 'px';
198     }
199     ws();
200
201     //スライド用
202     document.getElementById('next').addEventListener('click',function functionName() {
203       if (sw === false) {
204         next();
205         changeTab();
206       }else if (sw = true) {
207         return;
208       }
209     });
210     document.getElementById('back').addEventListener('click',function functionName() {
211       if (sw === false) {
212         back();
213         changeTab();
214       }else if (sw = true) {
215         return;
216       }
217     });
218
219     function changeTab() {
220       var deleteTab = document.getElementsByClassName('explain_tab');
221       for (var i = 0; i < deleteTab.length; i++) {
222         if (deleteTab[i].className === 'sol active explain_tab') {
223           deleteTab[i].className = 'op active explain_tab';
224         }
225       };
226       setTimeout(function () {
227         for (var i = 0; i < deleteTab.length; i++) {
228           deleteTab[i].className = 'op explain_tab';
229           document.getElementById(currentApli).className = 'op active explain_tab';
230         };
231         setTimeout(function () {
232           document.getElementById(currentApli).className = 'sol active explain_tab';
233         }, 5);
234       }, 395);
235     };
236
237     function next() {
238      sw = true;
239      aplication.className = 'next';
240      box.push(apli.shift());
241      apli.push(box.shift());
242      currentApli = apli[2].nunber;
243      setTimeout(function () {
244
245        while (aplication.firstChild) {
246          aplication.removeChild(aplication.firstChild);
247        };
248        aplication.className = '';
249        for (var i = 0; i < 5; i++) {
250        var li = document.createElement("li");
251        var img = document.createElement("img");
252          var imagebox = aplication.appendChild(li).appendChild(img);
253          imagebox.src = apli[i].img;
254        }
255        sw = false;
256      }, 800);
257      initButton();
258     };
259     function back() {
260       sw = true;
261       aplication.className = 'back';
262       box.push(apli.pop());
263       apli.unshift(box.shift());
264       currentApli = apli[2].nunber;
265
266       setTimeout(function () {
267
268         while (aplication.firstChild) {
269           aplication.removeChild(aplication.firstChild);
270         };
271         aplication.className = '';
272         for (var i = 0; i < 5; i++) {
273         var li = document.createElement("li");
274         var img = document.createElement("img");
275           var imagebox = aplication.appendChild(li).appendChild(img);
276           imagebox.src = apli[i].img;
277         }
278         sw = false;
279       }, 800);
280       initButton();
281     };
282
283
284     var buttonL = document.getElementsByClassName('button');
285     var cont = document.getElementsByClassName('explain_contents');
286     var ac = document.getElementsByClassName('ac');
287     var acSw = [] ;//アコーディオン開閉のスイッチ
288
289     for (var i = 0; i < buttonL.length; i++) {
290       acSw.push(false);
291       clickButton(i);
292     }
293     function clickButton(n) {
294       buttonL[n].addEventListener('click',function () {
295         if (acSw[n] === false) {
296           var contH = cont[n].clientHeight;
297           var acH = ac[n].clientHeight;
298           ac[n].style.height = acH + contH + 'px';
299           acSw[n] = true;
300         }else if (acSw[n] === true) {
301           ac[n].style.height = '59px';
302           acSw[n] = false;
303         }
304       })
305     };
306     function initButton() {
307       for (var i = 0; i < buttonL.length; i++) {
308         ac[i].style.height = '59px';
309         acSw[i] = false;
310       };
311     };
312    })();
313
314    </script>
315  </body>
316</html>
317

行動規範の内容に同意します

回答4件

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

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

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

投稿2017/10/04 09:16

編集2017/10/04 09:17

maisumakun

総合スコア145183

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

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

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

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

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

投稿2017/10/04 09:21

tkturbo

総合スコア5572

takane

2017/10/04 09:29

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

行動規範の内容に同意します

ベストアンサー

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

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

という状況であれば

javascript
1document.querySelectorAll('#aplication li');
2(もしくは)
3var aplication = document.querySelector('#aplication');
4console.log(aplication.querySelectorAll("li"));
5