PHP & JavaScript Room :: 設置サンプル

• YAHOO検索
• Google検索

<ul id="searchLists2">
    <li><a href="http://www.yahoo.co.jp" title="YAHOO! JAPAN">YAHOO検索</a></li>
    <li><a href="http://www.google.co.jp" title="Google">Google検索</a></li>
</ul>
<form action="#">
    <input type="button" value="a要素の属性値を取得" onclick="fGetAttribute()" />
</form>
<p id="resGetAttribute"></p>

<script type="text/javascript">
function fGetAttribute(){
    var s="";
    /* 親ノード */
    var parentObj=document.getElementById("searchLists2");
    for(var i in parentObj.childNodes){
        var childObj=parentObj.childNodes[i];
        if(childObj!=undefined){
            /* LI要素 */
            if(childObj.nodeName=="LI"){
                for(var j in childObj.childNodes){
                    /* A要素 */
                    var aObj=childObj.childNodes[j];
                    if(aObj!=undefined && aObj.nodeName=="A"){
                        s+="<p>";
                        /* href属性取得 */
                        s+="href: "+aObj.getAttribute("href")+"<br \/>";
                        /* title属性取得 */
                        s+="title:"+aObj.getAttribute("title")+"<br \/>";
                        /* リンクテキスト取得 */
                        s+="テキスト:"+aObj.firstChild.nodeValue;
                        s+="<\/p>\n";
                    }
                }
            }
        }
    }
    document.getElementById("resGetAttribute").innerHTML=s;
}
</script>