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

http://www.asahi-net.or.jp/~dp8t-asm/java/articles/XMLJava2/arti...

document.getElementById("list");

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

id = name [CS]

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

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

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

などです。この場合は

document.getElementById("hoge1_list")

として参照して下さい。

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属性が同じ要素が存在しているのはまずいのではないでしょうか？この場合には、classを使うべきです。

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

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

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

　　　／￣＼

　　　 　｜／￣￣￣￣＼

　 　(ヽノ//　/／V＼＼ ｜/)

　　(((i )//　（゜）　　（゜）| |( i)))　　 document.getElementById？　だめー

　／∠彡＼|　 ( _●_)｜|＿ゝ ＼　

( ＿＿＿､　　　 |∪|　　　　,＿＿ ）　フツーにだめー★

　　　　|　　　　 ヽノ　　 /´

　　　　|　　　　　　　　/

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

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

サンプル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

追記です。

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

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 とかでググってください。