document.getElementById(id)の質問です。


<div id="hoge1">
<div id="list"></div>
</div>
<div id="hoge2">
<div id="list"></div>
</div>

id=hoge2の中のid=listの内容を取得したい場合はどうかけばいいのでしょうか?

document.getElementById(hoge2.list)
document.getElementById(hoge2 list)
document.getElementById(#hoge2 #list)
document.getElementById(hoge2[list])

回答の条件
  • 1人2回まで
  • 登録:2006/12/26 00:31:55
  • 終了:2007/01/02 00:35:03

回答(7件)

id:kilrey No.2

kilrey回答回数16ベストアンサー獲得回数02006/12/26 00:51:43

ポイント23pt

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/global....

id = name [CS]

この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。

というようにHTMLの仕様では一つの文書中で同じidを2回使わないことになっています。なので文書の方を変えた方が良いと思います。例えば

<div id="hoge1">
<div id="hoge1_list"></div>
</div>
<div id="hoge2">
<div id="hoge2_list"></div>
</div>

などです。この場合は

document.getElementById("hoge1_list")

として参照して下さい。

id:openseed No.3

openseed回答回数51ベストアンサー獲得回数62006/12/26 01:10:30

ポイント22pt

ID って、重複許されなかったような・・・。

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/global....

なので、 id="list" が複数あるのは規約違反です...




<div id="hoge1">

<div id="hoge1_list" class="list"></div>

</div>

<div id="hoge2">

<div id="hoge2_list" class="list"></div>

</div>

として、

document.getElementById("hoge2_list");

というように取得するのが良いと思います。

DOMの仕様とCSSの指定方法には互換性はないです。




あとは、・・・

<script>

function getElementChildById(parentId, childId){

  var elem = document.getElementById(parentId);

    for(var child = elem.firstChild;child != null;child = child.nextSibling){

        if(child.id == childId){

            return child;

        }

    }

//var child = elem.children ? elem.children : elem.childNodes;

//for(var i=0;i<child.length;i++){

//    if(child[i].id == childId){

//        return child;

//    }

//}

    return undefined;

}

</script>

と、関数を作ったうえで、

var elem = getElementChildById('hoge2', 'list');

とするか・・・

※ これは、ブラウザの互換性確認が必要です。


あとは・・・

document.getElementsByTagName

などを利用して、複数のエレメントを指定し、ループしながら探索するしかないのではないでしょうか。

参考まで

id:keisukefukuda No.4

keisukefukuda回答回数14ベストアンサー獲得回数02006/12/26 06:31:16

ポイント22pt

一般論としては、id属性が同じ要素が存在しているのはまずいのではないでしょうか?この場合には、classを使うべきです。

idとは「identifier」ですので、あるひとつのタグが特定できないとまずいと思われます。

このケースの場合、方法はいくつかあります

  • 現在のタグの状態を維持したいなら、地味にhoge2の子供のid属性を調べる
  • HTMLを修正するという方針なら、id='list'を class='list'として、各種ライブラリが提供している getElementsByClassName的な関数を使用する(お使いのライブラリのドキュメントを参照してください)。※この例はMochikitのものだったと思いますが、記憶があまり定かではありません。
id:aerith No.5

aerith回答回数33ベストアンサー獲得回数12006/12/26 02:10:41

ポイント10pt

   / ̄\

     |/ ̄ ̄ ̄ ̄\

   (ヽノ// //V\\ |/)

  (((i )// (゜)  (゜)| |( i)))   document.getElementById? だめー

 /∠彡\|  ( _●_)||_ゝ \ 

( ___、    |∪|    ,__ ) フツーにだめー★

    |     ヽノ   /´

    |        /

id はドキュメント中一意という仕様があります。

id:openseed No.6

openseed回答回数51ベストアンサー獲得回数62006/12/27 05:14:07

ポイント10pt

ネストして探索するように改良してみました・・・。


サンプルHTML:

    <div id="hoge1">

        <div id="list">a</div>

    </div>

    <div id="hoge4">

        <div id="list">d</div>

    </div>

    <div id="hoge2">

        <div id="hoge3">

            <div id="list">b</div>

        </div>

        <div id="hoge4">

            <div id="list">c</div>

        </div>

    </div>


スクリプト:

<script>

function getElementChildById(parentId, childId, level){

    var parent = undefined;

    if(typeof(parentId) != "string" && parentId.length > 0){

        parent = document.getElementById(parentId[0]);

        for(var i=1;i<parentId.length;i++){

            parent = findNestedNode(parent, parentId[i], level);

        }

    }else{

        parent = document.getElementById(parentId);

    }

    return findNestedNode(parent, childId, level);

}

function findNestedNode(parent, findId, level){

    if(parent != undefined && findId != undefined && level != 0){

        for(var child = parent.firstChild;child != null;child = child.nextSibling){

            if(child.id == findId){

                return child;

            }else{

                c = findNestedNode(child, findId, level-1);

                if(c != undefined){

                    return c;

                }

            }

        }

    }

    return undefined;

}

alert(getElementChildById(new Array('hoge1'), 'list').innerHTML); // = a

alert(getElementChildById('hoge2', 'list').innerHTML); // = b

alert(getElementChildById(new Array('hoge2', 'hoge4'), 'list').innerHTML); // = c

alert(getElementChildById('hoge4', 'list').innerHTML); // = d


</script>

気分転換に、書いては見たものの・・・自己満足かもしれませんm(_ _)m

id:aerith No.7

aerith回答回数33ベストアンサー獲得回数12006/12/26 02:24:48

ポイント10pt

追記です。

なので、複数の要素で同じグループ付けをしたい場合は

classを使用したほうがいいと思われます。

document.getElementById("hoge1").getElementsByTagName('div')

のように記述することで、idがhoge1以下にあるdiv要素を取得することができますので、今回の場合でしたら

document.getElementById("hoge2").getElementsByTagName('div')[0]

のようにすれば取得できると思います。

list という文字列を用いて条件付けを行いたい場合は

上記

document.getElementById("hoge1").getElementsByTagName('div')

で取得した、複数のエレメントをfor文で個別に処理して if 文でclassNameがlistだったら、等の記述をかけば取得できるはずです。

詳しくは DOM javascript とかでググってください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません