WEBプログラム覚書::javascript Node プロパティ

2009年04月28日 13:50

javascript Node プロパティ

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/458

javascriptというかDOMのNodeインターフェイスに定義されてるプロパティを覗いてみる。

Node プロパティ


attributes
childNodes
firstChild
lastChild
localName
namespaceURI
nextSibling
nodeName
nodeType
nodeValue
ownerDocument
parentNode
prefix


<div id="MyIdParent">

    <div id="MyId">
    <p>Nodeテストエリア</p>
    </div>
	
    <div id="MyIdNextSibling">
    <p>MyIdのMyIdNextSibling内のP</p>
    </div>
</div>

Nodeプロパティテストコード


    var f = document.getElementById("MyId");
    
    /**
     * 属性 NamedNodeMapオブジェクト
     * 中身はAttrオブジェクト
     */
    var attributes = document.getElementById("attributes");attributes.onclick = function(){
        alert(f.attributes + " : " + f.attributes[0].value);
    };

    /**
     * 子要素 NodeList
     */
    var childNodes = document.getElementById("childNodes");childNodes.onclick = function(){
        alert(f.childNodes + " : " + f.childNodes.length);
        var p = document.createElement("p");
        p.innerHTML = "";
        for (i=0; i<f.childNodes.length; i++) {
            p.innerHTML += "[" + i + "]" + f.childNodes[i].nodeName;
        }
        f.appendChild(p);
    };

    /**
     * 最初の子要素
     * childNodes[0]と同じ値が返る
     */
    var firstChild = document.getElementById("firstChild");firstChild.onclick = function(){
        alert(f.firstChild);
        // @todo 同じ参照先かを調べるにはどうすれば？
        if (f.firstChild.nodeName === f.childNodes[0].nodeName) {
            alert(f.firstChild.nodeName);
        } else {
            alert("NO");
        }
    };

    /**
     * 最後の子要素
     * childNodes[childNodes.length - 1]と同じ値が返る
     */
    var lastChild = document.getElementById("lastChild");lastChild.onclick = function(){
        alert(f.lastChild);
        // @todo 同じ参照先かを調べるにはどうすれば？
        if (f.lastChild.nodeName === f.childNodes[f.childNodes.length - 1].nodeName) {
            alert(f.lastChild.nodeName);
        } else {
            alert("NO");
        }
    };

    /**
     * XML用？
     * よくわからない
     */
    var localName = document.getElementById("localName");localName.onclick = function(){alert(f.localName);};

    /**
     * XML用？
     * よくわからない
     */
    var namespaceURI = document.getElementById("namespaceURI");namespaceURI.onclick = function(){alert(f.namespaceURI);};

    /**
     * 次の要素を保持
     * firefox は改行などあったりすると
     * TextNodeが返ってくるので意外と邪魔だとおもった。
     * でも仕様的には正しいんだろう。
     */
    var nextSibling = document.getElementById("nextSibling");nextSibling.onclick = function(){
        
        // textがあるのがわかってるので・・・
        var getElementNode = function(node){            
            if (node.nodeType == 3) {
                node = getElementNode(node.nextSibling);
            }
            return node;
        }
        var div = getElementNode(f.nextSibling);
        alert(div.attributes[0].value);
    
    };
    
    /**
     * nodeの名前を保持
     * これはわかりやすい。
     */    
    var nodeName = document.getElementById("nodeName");nodeName.onclick = function(){alert(f.nodeName)};

    /**
     * nodeの種類を保持
     * これもわかりやすい。
     *
     * http://www.w3schools.com/Dom/dom_nodetype.asp
     *
     * 1  ELEMENT_NODE 
     * 2  ATTRIBUTE_NODE 
     * 3  TEXT_NODE 
     * 4  CDATA_SECTION_NODE 
     * 5  ENTITY_REFERENCE_NODE 
     * 6  ENTITY_NODE 
     * 7  PROCESSING_INSTRUCTION_NODE 
     * 8  COMMENT_NODE 
     * 9  DOCUMENT_NODE 
     * 10 DOCUMENT_TYPE_NODE 
     * 11 DOCUMENT_FRAGMENT_NODE 
     * 12 NOTATION_NODE 
     *
     */    
    var nodeType = document.getElementById("nodeType");nodeType.onclick = function(){alert(f.nodeType)};

    /**
     * nodeの値
     *
     * わかりやすそうでわかりにくい。
     * ろくな情報が入ってないイメージ
     * 
     * http://allabout.co.jp/internet/javascript/closeup/CU20040317/
     *
     */    
    var nodeValue = document.getElementById("nodeValue");nodeValue.onclick = function(){alert(f.nodeValue)};

    /**
     * https://developer.mozilla.org/ja/DOM/element.ownerDocument
     * ownerDocument プロパティは、ノードが含まれるトップレベルのドキュメントオブジェクトを返します。 
     *
     * ブラウザ環境だとほとんどの場合documentになる。
     *
     */    
    var ownerDocument = document.getElementById("ownerDocument");ownerDocument.onclick = function(){
        alert(f.ownerDocument.nodeName + " : " + document.body.ownerDocument.nodeName);
        /**
         * docuementやDOMツリーに追加されてない要素はNULLかと
         * 思ったけど違った。
         */
        alert(document.ownerDocument);
        alert(document.createElement("p").ownerDocument);
    };
    
    /**
     * 親要素を保持
     * これはわかりやすい
     */        
    var parentNode = document.getElementById("parentNode");parentNode.onclick = function(){
        alert(f.parentNode + " : " + f.parentNode.attributes[0].value);
    };

    /**
     * 接頭辞。コレもXML絡みっぽい
     * 名前空間とか正直よくわかりません。
     */    
    var prefix = document.getElementById("prefix");prefix.onclick = function(){alert(f.prefix)};
}