各ノードにアクセスする

DOM操作を行う場合、ID名やクラス名以外に位置関係を基準に各ノードにアクセスすることが出来る。

div id="contents">
<h3>お気に入りサイト</h3>
    <ul id="myLink">
        <li id="firstLink"><a href="http://www.MdN.co.jp/">MdN</a></li>
        <li><a href="http://www.w3.org/">W3C</a><li><a href="http://www.yahoo.co.jp/">Yahoo</a></li>
        <li><a href="http://www.google.co.jp/">Google</a></li>
    </ul>
</div>

window.onload = function(){
    var baseTag = document.getElementById("myLink");
    alert("1:基準："+baseTag.id);
    alert("2:親ノード(div)のID："+baseTag.parentNode.id);
    alert("3:最初の子ノードのID(li)："+baseTag.childNodes[0].id);
    alert("4:子ノード(li)内の子ノード(a)のhref属性値："+baseTag.childNodes[0].firstChild.href);
    alert("5:子ノード(li)内の子ノード(a)の種類："+baseTag.childNodes[0].firstChild.nodeType);
    alert("6:子ノード(li)内の子ノード(a)の子ノードの内容："+baseTag.childNodes[0].firstChild.firstChild.nodeValue);
    alert("7:子ノード(li)内の次のノードのhref属性値："+baseTag.childNodes[0].nextSibling.firstChild.href);
    alert("8:最後から2番目の子ノード(a)のhref属性値："+baseTag.lastChild.previousSibling.previousSibling.firstChild.href);
}

parentNode	親ノードの参照
childNodes[0]	0番目の子ノードの参照
firstChild	最初の子ノードの参照
lastChild	最後の子ノードの参照
childNodes.length	子ノードの総数
nextSibling	同じ階層内の次のノード
previousSibling	同じ階層内の前のノード
nodeType	アクセスしたノードの種類、１はタグ、３はテキスト
nodeValue	ノードの内容