電子書籍の厳選無料作品が豊富！

getElementsByClassについて

解決済

  • 質問者：a-6932
  • 質問日時：
  • 回答数：5件

こんにちは。
http://www.dustindiaz.com/top-ten-javascript/のgetElementsByClass関数を使って
指定したクラスのクラスを書き換えたいのですが
どのようにすればいいかわかりません。
-------------------------------------------------------------------
function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

function SwitchClass() {
getElementsByClass('show').className = 'hide';
}
-------------------------------------------------------------------
のような感じでクラスを書き換えたいです。
getElementsByIdでいいじゃないって思うかもしれませんが、どうしてもClassで指定したいんです。

どうかよろしくお願いします。m(_ _)m

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1ベストアンサー

  • 回答者： leap_day
  • 回答日時：

こんにちは



class名の取得は配列で格納されていますので

obj = document.getElementsByClassName("show");
for(i=0;i<obj.length;i++) {
obj[i].className = "hide";
}
※class名が一致するもの全部を"hide"に変える

document.getElementsByClassName("show")[2].className = "hide";
※3番目のclass="show"を"hide"に変える

ようになります

※因みにgetElementsByClass(node,searchClass,tag) をどのように動かしているのか分かりませんがうまく動かされませんでした（＞＜）

<script type="text/javascript"><!--
document.getElementsByClassName = function (className) {
var i, j, eltClass;
var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;
var objCN = new Array();
for (i = 0; i < objAll.length; i++) {
eltClass = objAll[i].className.split(/\s+/);
for (j = 0; j < eltClass.length; j++) {
if (eltClass[j] == className) {
objCN.push(objAll[i]);
break;
}
}
}
return objCN;
}

function SwitchClass() {
obj = document.getElementsByClassName("show");
for(i=0;i<obj.length;i++) {
obj[i].className = "hide";
}
}

//--></script>
<style type="text/css"><!--
.hide { display:none; }
--></style>


<input type="button" onclick="SwitchClass()" value="消去">
<div class="show">aa</div>
<div class="show">bb</div>
<div class="ee">cc</div>
<div class="show">dd</div>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ポイントは配列ですね。
大変助かりました。
ありがとうございました！

通報する
お礼日時：2008/03/16 16:20

No.5

  • 回答者： auty
  • 回答日時：

function getElementsByClass(searchClass,node,tag)をそのまま使ってみました。



function SwitchClass(cn1,cn2)の引数は、
　　　cn1:　変更前のクラス名
　　　cn2:　変更後のクラス名
また、対象は、デフォルトのdocument全体を利用しています。

--------------------------------------------------------------------------------
<html>
<head>
<title>getElementsByClass</title>
<script type="text/javascript">
<!--

function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

function SwitchClass(cn1,cn2) {
classes = getElementsByClass(cn1);
for(i=0;i<classes.length;i++) {
classes[i].className = cn2;
}
}

//-->
</script>

<style type="text/css">
<!--
.show { display:block; }
.hide { display:none; }
-->
</style>

<body>
<input type="button" onclick="SwitchClass('show','hide')" value="showクラスの消去"/>
<input type="button" onclick="SwitchClass('hide','show')" value="showクラスの表示"/>
<hr/>
<div class="show">111111111111</div>
<div class="show">222222222222</div>
<div class="other">33333333333333</div>
<div class="hide">hidehidehide</div>
<div class="show">4444444444444</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
大変参考になるサンプルありがとうございました。
おかげさまでばっちり出来ました！

通報する
お礼日時：2008/03/16 16:35

No.4

  • 回答者： steel_gray
  • 回答日時：

試してませんが、その関数は配列を返すようですから、


対象が一つとわかっているなら#0を操作してみては？
getElementsByClass(document,'show','*')[0].className = 'hide';


また、ちょっとソレた回答かもしれませんがgetElementsByClassが使いたいと思ったなら
jQueryとか使ってみては？スクリプトをシンプルに書けるようになります。
http://www.mikage.to/jquery/


＝＝スクリプト＝＝
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){//ロード時の処理
$('#switch').click(function(){//#switchクリック時の処理
$('.show').toggleClass('hide');//.show のclassのトグル(切替)
});
});
</script>

＝＝HTML＝＝
<input type="button" value="switch" id="switch">
<p class="show">あああ</p>
<p class="aaa">AAAA</p>
<p class="show">いいい</p>
    • good
    • 0
    • 件
通報する
この回答へのお礼

配列操作でうまく行きました！
jquery含めたライブラリにも親しんでいこうと思いますので
その時は上のソース参考にさせてもらいます！
とてもシンプルですね。
ありがとうございました。

通報する
お礼日時：2008/03/16 16:29

No.3

  • 回答者： arexis
  • 回答日時：

あ、書き忘れ^^;


質問者さんの書いてるコードは、そのリンク先のと違いますので、リンク先の方に対してって事で。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： arexis
  • 回答日時：

その関数を呼び出して戻ってくるのは配列ですので



function SwitchClass() {
var els = getElementsByClass('show');
for(var i=0; i<els.length; i++){ els[i].className = 'hide'; }
}

で、大丈夫かなと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

arexisさん、ご回答ありがとうございました。
おかげさまで出来ました！

通報する
お礼日時：2008/03/16 16:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報