KANTENNA.COM

Solarized

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

javascript Node プロパティ

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

Node プロパティ

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

HTML

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

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

Javascript

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)};
}

Nodeテストエリア

MyIdのMyIdNextSibling内のP

ブラウザによってもっとプロパティ持っていたり返す値が違ったりするので注意しなければならない。

Webサイト制作者のための JavaScript入門講座: 作者:安藤建一 | 価格:￥ 3,024

投稿日	2009年4月28日 13:50
カテゴリ	JavaScript
タグ	DOM \| テストコード \| 言語仕様
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1156