KANTENNA.COM

Solarized

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

javascript Node プロパティ

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

Node プロパティ

Node プロパティ
  1.  attributes
  2.  childNodes
  3.  firstChild
  4.  lastChild
  5.  localName
  6.  namespaceURI
  7.  nextSibling
  8.  nodeName
  9.  nodeType
  10.  nodeValue
  11.  ownerDocument
  12.  parentNode
  13.  prefix
HTML
  1.  <div id="MyIdParent">
  2.  
  3.   <div id="MyId">
  4.   <p>Nodeテストエリア</p>
  5.   </div>
  6.  
  7.   <div id="MyIdNextSibling">
  8.   <p>MyIdのMyIdNextSibling内のP</p>
  9.   </div>
  10.  </div>
Nodeプロパティ テストコード
Javascript
  1.   var f = document.getElementById("MyId");
  2.  
  3.   /**
  4.   * 属性 NamedNodeMapオブジェクト
  5.   * 中身はAttrオブジェクト
  6.   */
  7.   var attributes = document.getElementById("attributes");attributes.onclick = function(){
  8.   alert(f.attributes + " : " + f.attributes[0].value);
  9.   };
  10.  
  11.   /**
  12.   * 子要素 NodeList
  13.   */
  14.   var childNodes = document.getElementById("childNodes");childNodes.onclick = function(){
  15.   alert(f.childNodes + " : " + f.childNodes.length);
  16.   var p = document.createElement("p");
  17.   p.innerHTML = "";
  18.   for (i=0; i<f.childNodes.length; i++) {
  19.   p.innerHTML += "[" + i + "]" + f.childNodes[i].nodeName;
  20.   }
  21.   f.appendChild(p);
  22.   };
  23.  
  24.   /**
  25.   * 最初の子要素
  26.   * childNodes[0]と同じ値が返る
  27.   */
  28.   var firstChild = document.getElementById("firstChild");firstChild.onclick = function(){
  29.   alert(f.firstChild);
  30.   // @todo 同じ参照先かを調べるにはどうすれば?
  31.   if (f.firstChild.nodeName === f.childNodes[0].nodeName) {
  32.   alert(f.firstChild.nodeName);
  33.   } else {
  34.   alert("NO");
  35.   }
  36.   };
  37.  
  38.   /**
  39.   * 最後の子要素
  40.   * childNodes[childNodes.length - 1]と同じ値が返る
  41.   */
  42.   var lastChild = document.getElementById("lastChild");lastChild.onclick = function(){
  43.   alert(f.lastChild);
  44.   // @todo 同じ参照先かを調べるにはどうすれば?
  45.   if (f.lastChild.nodeName === f.childNodes[f.childNodes.length - 1].nodeName) {
  46.   alert(f.lastChild.nodeName);
  47.   } else {
  48.   alert("NO");
  49.   }
  50.   };
  51.  
  52.   /**
  53.   * XML用?
  54.   * よくわからない
  55.   */
  56.   var localName = document.getElementById("localName");localName.onclick = function(){alert(f.localName);};
  57.  
  58.   /**
  59.   * XML用?
  60.   * よくわからない
  61.   */
  62.   var namespaceURI = document.getElementById("namespaceURI");namespaceURI.onclick = function(){alert(f.namespaceURI);};
  63.  
  64.   /**
  65.   * 次の要素を保持
  66.   * firefox は改行などあったりすると
  67.   * TextNodeが返ってくるので意外と邪魔だとおもった。
  68.   * でも仕様的には正しいんだろう。
  69.   */
  70.   var nextSibling = document.getElementById("nextSibling");nextSibling.onclick = function(){
  71.  
  72.   // textがあるのがわかってるので・・・
  73.   var getElementNode = function(node){
  74.   if (node.nodeType == 3) {
  75.   node = getElementNode(node.nextSibling);
  76.   }
  77.   return node;
  78.   }
  79.   var div = getElementNode(f.nextSibling);
  80.   alert(div.attributes[0].value);
  81.  
  82.   };
  83.  
  84.   /**
  85.   * nodeの名前を保持
  86.   * これはわかりやすい。
  87.   */
  88.   var nodeName = document.getElementById("nodeName");nodeName.onclick = function(){alert(f.nodeName)};
  89.  
  90.   /**
  91.   * nodeの種類を保持
  92.   * これもわかりやすい。
  93.   *
  94.   * http://www.w3schools.com/Dom/dom_nodetype.asp
  95.   *
  96.   * 1 ELEMENT_NODE
  97.   * 2 ATTRIBUTE_NODE
  98.   * 3 TEXT_NODE
  99.   * 4 CDATA_SECTION_NODE
  100.   * 5 ENTITY_REFERENCE_NODE
  101.   * 6 ENTITY_NODE
  102.   * 7 PROCESSING_INSTRUCTION_NODE
  103.   * 8 COMMENT_NODE
  104.   * 9 DOCUMENT_NODE
  105.   * 10 DOCUMENT_TYPE_NODE
  106.   * 11 DOCUMENT_FRAGMENT_NODE
  107.   * 12 NOTATION_NODE
  108.   *
  109.   */
  110.   var nodeType = document.getElementById("nodeType");nodeType.onclick = function(){alert(f.nodeType)};
  111.  
  112.   /**
  113.   * nodeの値
  114.   *
  115.   * わかりやすそうでわかりにくい。
  116.   * ろくな情報が入ってないイメージ
  117.   *
  118.   * http://allabout.co.jp/internet/javascript/closeup/CU20040317/
  119.   *
  120.   */
  121.   var nodeValue = document.getElementById("nodeValue");nodeValue.onclick = function(){alert(f.nodeValue)};
  122.  
  123.   /**
  124.   * https://developer.mozilla.org/ja/DOM/element.ownerDocument
  125.   * ownerDocument プロパティは、ノードが含まれるトップレベルのドキュメントオブジェクトを返します。
  126.   *
  127.   * ブラウザ環境だとほとんどの場合documentになる。
  128.   *
  129.   */
  130.   var ownerDocument = document.getElementById("ownerDocument");ownerDocument.onclick = function(){
  131.   alert(f.ownerDocument.nodeName + " : " + document.body.ownerDocument.nodeName);
  132.   /**
  133.   * docuementやDOMツリーに追加されてない要素はNULLかと
  134.   * 思ったけど違った。
  135.   */
  136.   alert(document.ownerDocument);
  137.   alert(document.createElement("p").ownerDocument);
  138.   };
  139.  
  140.   /**
  141.   * 親要素を保持
  142.   * これはわかりやすい
  143.   */
  144.   var parentNode = document.getElementById("parentNode");parentNode.onclick = function(){
  145.   alert(f.parentNode + " : " + f.parentNode.attributes[0].value);
  146.   };
  147.  
  148.   /**
  149.   * 接頭辞。コレもXML絡みっぽい
  150.   * 名前空間とか正直よくわかりません。
  151.   */
  152.   var prefix = document.getElementById("prefix");prefix.onclick = function(){alert(f.prefix)};
  153.  }













Nodeテストエリア

MyIdのMyIdNextSibling内のP


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

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

トラックバック(0)

コメント

コメントする
Name
Email Address
URL
TIME LINE
2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24
2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。