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
  14.  

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>
  11.  
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. }
  154.  

' . "\n", $value, $value); } ?>

Nodeテストエリア

MyIdのMyIdNextSibling内のP


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

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

コメント

コメントする
Name
Email Address
URL

KANTENNA.COM

Solarized

PAGE RANK

384 PV約 68 秒/1PV

[Ubuntu]動画ダウンロードと検索が簡単にできるGMediaFinder | 情報備忘録

814 PV約 68 秒/1PV

[PHP]MySQLを利用した画像の保存と出力 | WEBプログラム覚書

173 PV約 66 秒/1PV

jQuery PageSlide.js | KANTENNA.COM

630 PV約 61 秒/1PV

表示内容の切り替え(JavaScript) | WEBプログラム覚書

166 PV約 52 秒/1PV

[WordPress]投稿タイプ、タクソノミー、タームについて | WEBプログラム覚書

170 PV約 52 秒/1PV

jQuery slider | KANTENNA.COM

207 PV約 45 秒/1PV

[WordPress]XML-RPCを利用して外部から投稿したりする。 | WEBプログラム覚書

1045 PV約 37 秒/1PV

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

1055 PV約 35 秒/1PV

jQueryによる表示、非表示切り替え | WEBプログラム覚書

161 PV約 35 秒/1PV

[jQuery]closest()とparents() | WEBプログラム覚書

404 PV約 28 秒/1PV

[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 | WEBプログラム覚書

132 PV約 28 秒/1PV

基本的な光の作り方2 | KANTENNA.COM

584 PV約 25 秒/1PV

Dreamweaverで文字コードを変換する手順 | 情報備忘録

398 PV約 25 秒/1PV

Excel VBA の改行コード | WEBプログラム覚書

248 PV約 25 秒/1PV

javascript 子要素取得のメモ | WEBプログラム覚書

131 PV約 23 秒/1PV

コマンドプロンプト(cmd.exe)が芸術的すぎる件 | 情報備忘録

161 PV約 23 秒/1PV

渦っぽい光が美しいPhotoshop効果 | KANTENNA.COM

144 PV約 11 秒/1PV

ウェブデザイン・ホームページ制作 KANTENA.COM

394 PV約 9 秒/1PV

MySQLエラー「Column 'カラム名' in field list is ambiguous」 | WEBプログラム覚書

TIME LINE

2018 11.15

webpack、babelでreactのビルド環境構築

node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。

2018 06.05

[CakePHP3.7]LayoutでCellを使ったら memory size エラー出る場合

layoutファイルの中でcellをrender()するとViewでmemory size エラー出る場合がある。

どうやらViewでsetLayout()とか使ってると無限ループのようになってメモリエラーになるっぽい？？ 下手なlayout設定は命取りになる模様。

Tag