getElementsByClassName使い方

質問

getElementsByClassName を使って記述コードの tag2、tag3 の style="color: #cccccc;" を
削除するには、どのようにすれば良いのでしょうか?
自身のスクリプトは残念ながら動作せず。仮に動作してもnode指定はしません。

<div class="abc" style="color: #cccccc;">tag1</div>
<div class="abc" style="color: #cccccc;">tag2.</div>
<div class="abc" style="color: #cccccc;">tag3.</div>

<script>
var hoge = Array.filter( document.getElementsByClassName( this.attr ),
function( elements ){ return elements[0].nodeName == this.tag; });

hoge.removeAttribute( 'style' );
</script>

回答No.1

fujillin · ベストアンサー

getElementsByClassName()はnodeListを返すメソッドです。
ご提示のコードで、this.attrは何を示しているおつもりでしょうか？
filterを使えるブラウザを対称にするなら、querySelector()を利用した方が使いやすいかも。

コードの内容がよくわかりませんが、標題が「getElementsByClassName()」なので、abcをクラスに持つ要素からfilterでtag2、tag3を選んでstyle属性を削除するというのであればこんな感じ？
var hoge = function(cls){
[].filter.call(document.getElementsByClassName(cls), function(e){
return /^tag[23]$/.test(e.textContent);
}).map(function(e){ e.removeAttribute( 'style' ) });
}
hoge("abc");
(fxにて動作を確認。最初に書きましたように、nodeListなので、filterメソッドを直接には使えません。)

テキストの「tag2」、「tag3」を見るのではなく、2番目以降の要素を対象とするのでよければ
　function(_, i){ return i>0; }
のようなcallbackにすればよろしいかと。

＞style="color: #cccccc;" を削除するには～～
このコードが実行されるまでに他のスタイル属性が設定されている「かも知れない」ことを考慮するなら、style属性そのものを削除してしまうというご提示の方法は考え物のような気もしますが…

お礼

回答ありがとうございます。

ブラウザはスマートフォンものが主な対象です。
style 属性そのものを削除する感じで問題ありません。

当初は class 属性を持つ全てを対象にと、考えてました。
しかし、class は複数種のタグにかかることもあるので、
タグによっても絞込みしないととおもい、
最後に同タグの中からも絞り込みたいと最終的に考えました。

js 難しいですね。いろいろ調べましたが、特に記述が様々。
>>[].filter
>>nodeListなので、filterメソッドを直接には使えません。
というのも初めて知りました。