Q&A
いつもありがとうございます!!
途端に難しくなりますね…
むむ！？
今回のコード（https://jsfiddle.net/3vhnktv6/）、なにやら動かない様子です。。
クラスtestの「全て」にjavascriptを適用したいのですが、[0]だと「順番」しか指定できないようです。
「全て」を指定する方法はございませんでしょうか(@_@)
javascript
1var sampleElement = document.getElementsByClassName('test')[0]; 2sampleElement.classList.add('neko1', 'neko2');
回答2件
0
こんにちは。
すでに yambejpさんのご回答が、BA に決まっておりますが、以下、追加情報です。
MDNドキュメントのNodeListの説明に、以下が書かれています。
NodeList は Array と異なりますが、forEach() メソッドで処理を順次適用
することは可能です。ただし、このメソッドは古いブラウザで実装されて
いない場合があります。
とのことで、新しめのブラウザなら、forEach()が使えるので、以下
https://jsfiddle.net/jun68ykt/pdefsLv9/2/ （※ES6構文を使っているので、新しめのブラウザで開いてください）
でもいけると思います。ちなみにMac用のChrome v.64と FireFox v.58 では意図通り動きました。
それと、stackoverflow で同様の質問を見つけました。
queryselectorall-manipulating-nodes
上記のコメントの中にも
Its interesting to me that the above works, but document.querySelectorAll('div.foo').forEach(function (e1) ... doesn't work. Any ideas why? – Rene Wooller Jan 29 '15 at 3:51
querySelectorAll returns a NodeList, which doesn't have forEach. See: developer.mozilla.org/en-US/docs/Web/API/… – seans Feb 24 '15 at 15:44
とあって、 「NodeList#forEach() が動かない」とコメントされていますが、
約3年前のコメントなので、メジャーどころのブラウザの今現在の最新版なら、
ほぼどれでも動くかもしれません。
最後に、document.querySelectorAll('.test') にメソッドをつなげて、
まとめて何かの処理をしたいのであれば、そのような関数をNodeList に
作ればよいと思います。
今の例であれば、NodeList の含む要素に、指定された複数のクラスを追加する
addClassesメソッドを作ってこれを使うコードは、たとえば、以下のようになります。
（以下では forループで回してます。）
https://jsfiddle.net/jun68ykt/pdefsLv9/3/ （※ES6構文を使っているので、新しめのブラウザで開いてください）
以上参考になれば幸いです。
投稿2018/02/02 22:36
編集2018/02/03 02:08
総合スコア9058
0
ベストアンサー
HTMLCollectionやNodeListは有効なメソッドをもっていないので
Arrayのprototypeを利用するのが手っ取り早いです
css
1.neko1{background-Color:yellow;} 2.neko2{color:red;}
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 Array.prototype.forEach.call(document.querySelectorAll('.test'),function(x){ 3 x.classList.add('neko1', 'neko2'); 4 }); 5}); 6</script>
html
1<div class="test">test1</div> 2<div class="test">test2</div> 3<div class="test">test3</div>
投稿2018/02/02 13:48
総合スコア117702
横から大変失礼いたします。m(_ _)m
https://jsfiddle.net/3vhnktv6/ を (1) JQueryを選ばないでNo-Libraryに (2) LOAD TYPE を onLoad に (3) jsFiddle に書く場合、外側のwindow.addEventListener('DOMContentLoaded', function(e){ ・・・ } に替わる部分は jsFiddle が自動で付加してくれるので削除
上記３点を修正したものが、これです。→ https://jsfiddle.net/jun68ykt/pdefsLv9/1/
jun68yktさん
こんばんはー★ありがとうございます。できました。
（2）LOAD TYPEというのは、どちらのことでしょうか??
（3）外側のやつは、jsfiddleだけじゃなくwordpressのphpファイルでも不要みたいですね。書いた方が正式？とか、、、？ま、なんでもいっか。笑
yambejpさん
というわけで、なんとかできました。<(_ _)>
せっかく正しく書いてくださったのに、変なjsfiddleを作ってしまってすみませんでした。笑
> （2）LOAD TYPEというのは、どちらのことでしょうか??
[JavaScript (jQuery 3.2.1)] をクリックして現れた画面にあります。
yambejp さんの意図はおそらく、[Load type] を [No wrap - in <head>] に変更することですね。
なな、なるほど!!←よくわかってない笑
どうもありがとうございます('◇')ゞ
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/03 08:33
2018/02/03 09:31 編集
退会済みユーザー
2018/02/03 16:26
2018/02/03 17:15 編集