最も一般的なJavaScript DOM方法の実戦-ドキュメント遍歴
58467 ワード
Nodeインターフェースで定義されているノードのタイプは全部含まれる特性と方法です.
特性と方法の後の「コロン」に続く単語は「戻り値タイプ」です.
Node
属性
巡回ノード(短距離旅行):
parent Node:Node
first Child:Node
lastChild:Node
next Sibling:Node
previous Sibling:Node
childNodes:NodeList
ノード情報:
nodeName:String
nodeType:number
nodeValue:String
ノードのルート要素(ドキュメントオブジェクト)を返します.
owner Dcument:Dcument
要素の特性を表すAttrオブジェクトが含まれています.Elementノードのみに使用します.
atributes:NamedNodeMap
オブジェクトレベルの親オブジェクトを取得:
parentElement[IE]:Node
方法
文書ツリーを変更する:
apped Child(Node newChild):Node
insertBefore(Node newChild,Node refChild):Node
removeChild(Node oldChild):Node
replacceChild(Node newChild,Node refChild):Node
ノードをクローン:
clone Node:Node
サブノードを削除:
removeNode:Node
childNodesがノードを含むかどうかを判断する:
has Child Nodes():bollan
Node
Dcument
属性
自分の
documentElement:Element
ノードを継承:
atributes、childNodes、first Child、lastChild、nextSibling、nodeName、nodeType、nodeValue、owner Dcument、parentElement、parent Node、previous Sibling
方法
自分の
要素を作成:
createElement(Stering tagName):Element
createText Node(String data):Text
要素を検索:
getElement ById(Stering element Id):Element
getElements ByTagName:NodeList
ノードを継承:
apendChild、clone Node、has ChildNodes、insertBefore、removeChild、removeNode、replace Child
Element
属性
自分の
tagName:String
ノードを継承:
atributes、childNodes、first Child、lastChild、nextSibling、nodeName、nodeType、nodeValue、owner Dcument、parentElement、parent Node、previous Sibling
方法
自分の
属性の読み書き:
get Attribute(String name):String
set Attribute(String name,String value):void
その他:
getElements ByTagName String name Stub:NodeList
normalize()Stub:void
removeAttribute(String name):void
ノードを継承:
apendChild、clone Node、has ChildNodes、insertBefore、removeChild、removeNode、replace Child
アクセスに関するノード
私たちはやはりHTMLページの最も基本的な構成要素から討論します.
HTML DOMの中の特有な属性のdocument.body、それはよく直接元素にアクセスすることに用います.
ノード間の関係図
複雑なノードが巡回します.
上の学習の中で私達は大きな障害に遭遇したことがないようです.次は私のナビゲーションバーを例にして討論会を行います.
点遍歴
まず、ナビゲーションバーの下にいくつのサブノードがあるかを見たいです.最初に思いついたのは前で習った元素を探す2つの方法です.
getElemenntById()菗はID属性で要素を検索します.
この方法は、所与のid属性値を有する要素ノードに対応するオブジェクトを返す.
getElements ByTagName()菗はラベル名で要素を検索します.
この方法はオブジェクトの配列を返します.各オブジェクトはそれぞれドキュメント内に指定されたラベルを持つ要素に対応しています.
これから、私達が欲しいものかどうか測ってみます.
私は一つのテーマの中で特に各種window.onloadの解決策を紹介しました.
どうぞご覧ください window.onloadについての様々な解決策の日誌編.
まず最初の方法を見てください.私たちはIEの中に問題がないようです.それはFirefoxの中で見てもいいですか?
IE中のDOMエルゴード:
FF中のDOM遍歴:
上のテストを通して、深刻な問題を発見しました.
それは、異なるブラウザが、Textノードとは何かの違いを判断しています.例えば、A級ブラウザのFFとIEには大きな違いがあります.
FFは元素間の空白、改行、tabはTextノードであり、
IEの下で空白を全部無視します.インライン要素(em、spanなど)だけが後の改行、スペース、tabはTextとみなされます.
問題が発生した以上、私達は問題を解決しなければなりません.問題の根源は私達も知っています.それに応じた解決策がいいです.
私は3つの方法を整理して、皆さんの参考にします.
方法1:
より一般的な方法
上で習った知識点をもう一回熟知させてください.実践は真理を検証する唯一の基準です.始めましょう
元素ノードのDOM属性でDOMツリーを巡回しました.
ここに書いてください.標準のprevious Sibling、nextSibling、first Child、lastChild、parent Node遍歴方法はブラウザの互換性がない問題があります.上記の解決策は元素を遍歴した相関空を除去することです.良い解決策ですが、使うのは不便です.私達は標準のprevious Sibling、nextSibling、first Child、lastChild、parent Nodeの代わりに自分でいくつかの遍歴ノードの方法を書いたらどうですか?
私達の考えは元素がnodeType属性で元素がノードタイプの中のあのようなノードタイプであることを判断するので、DOMノードの中で私の最も常用したのは元素のノードで、テキストのノード、属性のノード、対応するタイプの値は元素のノードのnodeType=1 or ELLENT_です.NODE、テキストノードnodeType=2 or ATTRIBUTE_NODE、属性ノードnodeType=3 or TEXT_NODEですが、IEではネーミング定数がサポートされていませんので、数値を使ってください.標準のエルゴード属性に合わせてください.標準的なエルゴード方式の代わりに、いくつかの補助関数を自分で生産することができます.
以下の一連の補助関数は、標準のprevious Sibling、nextSibling、first Child、lastChild、parent Nodeを置き換えることができます.
特性と方法の後の「コロン」に続く単語は「戻り値タイプ」です.
Node
属性
巡回ノード(短距離旅行):
parent Node:Node
first Child:Node
lastChild:Node
next Sibling:Node
previous Sibling:Node
childNodes:NodeList
ノード情報:
nodeName:String
nodeType:number
nodeValue:String
ノードのルート要素(ドキュメントオブジェクト)を返します.
owner Dcument:Dcument
要素の特性を表すAttrオブジェクトが含まれています.Elementノードのみに使用します.
atributes:NamedNodeMap
オブジェクトレベルの親オブジェクトを取得:
parentElement[IE]:Node
方法
文書ツリーを変更する:
apped Child(Node newChild):Node
insertBefore(Node newChild,Node refChild):Node
removeChild(Node oldChild):Node
replacceChild(Node newChild,Node refChild):Node
ノードをクローン:
clone Node:Node
サブノードを削除:
removeNode:Node
childNodesがノードを含むかどうかを判断する:
has Child Nodes():bollan
Node
Dcument
属性
自分の
documentElement:Element
ノードを継承:
atributes、childNodes、first Child、lastChild、nextSibling、nodeName、nodeType、nodeValue、owner Dcument、parentElement、parent Node、previous Sibling
方法
自分の
要素を作成:
createElement(Stering tagName):Element
createText Node(String data):Text
要素を検索:
getElement ById(Stering element Id):Element
getElements ByTagName:NodeList
ノードを継承:
apendChild、clone Node、has ChildNodes、insertBefore、removeChild、removeNode、replace Child
Element
属性
自分の
tagName:String
ノードを継承:
atributes、childNodes、first Child、lastChild、nextSibling、nodeName、nodeType、nodeValue、owner Dcument、parentElement、parent Node、previous Sibling
方法
自分の
属性の読み書き:
get Attribute(String name):String
set Attribute(String name,String value):void
その他:
getElements ByTagName String name Stub:NodeList
normalize()Stub:void
removeAttribute(String name):void
ノードを継承:
apendChild、clone Node、has ChildNodes、insertBefore、removeChild、removeNode、replace Child
アクセスに関するノード
私たちはやはりHTMLページの最も基本的な構成要素から討論します.
1 2 3 4 5 6 7 8 <!--<html> <head> <title>DOM Examlie</title> </head> <body> <p>Hello World !</p> </body> </html>-->1 2 3 var oHtml=document.documentElement;// <html> alert(" : "+oHtml.nodeName);// alert(" : "+oHtml.nodeType);// 11 2 var oHead=oHtml.firstChild;//HEAD var oBody=oHtml.lastChild;//BODY 1 2 3 4 var oHead=oHtml.childNodes.item(0);//HEAD //var oHead=oHtml.childNodes[0];// , HEAD var oBody=oHtml.childNodes.item(1);//BODY //var oBody=oHtml.childNodes.item(1);// , BODY HTML DOMの中の特有な属性のdocument.body、それはよく直接元素にアクセスすることに用います.
1 var oBody=document.body;1 2 3 4 5 alert(oHead.parentNode==oHtml);//HEAD BODY ， true alert(oBody.parentNode==oHtml);//BODY BODY ， true alert(oBody.previousSibling==oHead);//BODY HEAD ， true alert(oHead.nextSibling==oBody);//HEAD BODY ， true alert(oHead.ownerDocument==document); // (Document),HEAD ， trueノード間の関係図
複雑なノードが巡回します.
上の学習の中で私達は大きな障害に遭遇したことがないようです.次は私のナビゲーションバーを例にして討論会を行います.
点遍歴
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="menu"> <h1> </h1> <ul id="nav"> <li><a href="#">HOME</a></li> <li><a href="#">(X)Html / Css</a></li> <li><a href="#">Ajax / RIA</a></li> <li><a href="#">GoF</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">JavaWeb</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">MooTools</a></li> <li><a href="#">Python</a></li> <li><a href="#">Resources</a></li> </ul> </div>まず、ナビゲーションバーの下にいくつのサブノードがあるかを見たいです.最初に思いついたのは前で習った元素を探す2つの方法です.
getElemenntById()菗はID属性で要素を検索します.
この方法は、所与のid属性値を有する要素ノードに対応するオブジェクトを返す.
getElements ByTagName()菗はラベル名で要素を検索します.
この方法はオブジェクトの配列を返します.各オブジェクトはそれぞれドキュメント内に指定されたラベルを持つ要素に対応しています.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <script type="text/javascript"> /* ID ， getElementById() ， , childNodes ， 。 */ function queryElementsId(){ var elemensArray,nav,nav_list; elemensArray=[]; nav=document.getElementById("nav"); /* IE FF Text */ nav_list=nav.childNodes; for(var i=0;i<nav_list.length;i++){ elemensArray[elemensArray.length]=nav_list[i]; //elemensArray.push(nav_list[i]); // } return elemensArray; } /* ， ， <ul> ； getElementsByTagName() ， ， 。 */ function queryElementsTagName(){ var elemensArray,nav,nav_list; elemensArray=[]; var nav=document.getElementById("nav"); var nav_list=nav.getElementsByTagName("li");// for(var i=0;i<nav_list.length;i++){ elemensArray[elemensArray.length]=nav_list[i]; //elemensArray.push(nav_list[i]); // } return elemensArray; } </script>これから、私達が欲しいものかどうか測ってみます.
1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> window.onload=function(){ /* */ var list= queryElementsId(); /* */ //var list= queryElementsTagName(); var s=""; for(var i=0;i<list.length;i++){ s+=list[i].nodeName+"
"; } alert(s); } </script>私は一つのテーマの中で特に各種window.onloadの解決策を紹介しました.
どうぞご覧ください window.onloadについての様々な解決策の日誌編.
まず最初の方法を見てください.私たちはIEの中に問題がないようです.それはFirefoxの中で見てもいいですか?
IE中のDOMエルゴード:
FF中のDOM遍歴:
上のテストを通して、深刻な問題を発見しました.
それは、異なるブラウザが、Textノードとは何かの違いを判断しています.例えば、A級ブラウザのFFとIEには大きな違いがあります.
FFは元素間の空白、改行、tabはTextノードであり、
IEの下で空白を全部無視します.インライン要素(em、spanなど)だけが後の改行、スペース、tabはTextとみなされます.
問題が発生した以上、私達は問題を解決しなければなりません.問題の根源は私達も知っています.それに応じた解決策がいいです.
私は3つの方法を整理して、皆さんの参考にします.
方法1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <script type="text/javascript"> /* 《 javascript》 ， xm ， ， ， 。 */ function cleanWhitespace(element){ // ， HTML element = element || document; // var cur = element.firstChild; // while (cur != null){ // ， if ( cur.nodeType == && ! /\S/.test(cur.nodeValue)){ // element.removeChild( cur ); // ， } else if (cur.nodeType == 1){ // cleanWhitespace( cur ); } cur = cur.nextSibling;// } } </script>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript"> /* ， ， dom ， ， childNodes 。 ， 。 ， ， . */ function cleanWhitespaces(elem){ // ， HTML var elem = elem || document; var parentElem = elem.parentNode; // var childElem = parentElem.childNodes; // var childElemArray = new Array; for (var i=0; i<childElem.length; i++){ if (childElem[i].nodeType==1){// childElemArray.push(childElem[i]); } } return childElemArray; } </script>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript"> /* 。 ， （nodeType = 1）， ， ； （nodeType = 3）， ， ， xml 。 */ function removeWhitespace(xml){ var loopIndex; for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++){ var currentNode = xml.childNodes[loopIndex]; if (currentNode.nodeType == 1){ removeWhitespace(currentNode); } if (((/^\s+$/.test(currentNode.nodeValue))) &&(currentNode.nodeType == 3)){ xml.removeChild(xml.childNodes[loopIndex--]); } } } </script>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> function queryElementsId(){ var elemensArray,nav,nav_list; elemensArray=[]; nav=document.getElementById("nav"); /* #Text */ removeWhitespace(nav); /* IE FF Text */ nav_list=nav.childNodes; for(var i=0;i<nav_list.length;i++){ elemensArray[elemensArray.length]=nav_list[i]; //elemensArray.push(nav_list[i]); // } return elemensArray; } </script>より一般的な方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> function text(elem){ var t=""; // ， // elem=elem.childNodes || elem; // for(var i=0; i<elem.length;i++){ // ， // ， t+=elem[i].nodeType !=1?elem[i].nodeValue:text(elem[i].childNodes); } // return t; } </script>上で習った知識点をもう一回熟知させてください.実践は真理を検証する唯一の基準です.始めましょう
元素ノードのDOM属性でDOMツリーを巡回しました.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <script type="text/javascript"> window.onload=function(){ /* */ var nav=document.getElementById("nav"); /* */ var p_n=nav.parentNode; alert(" ："+p_n.nodeName); /* FF #Text */ removeWhitespace(nav);// Text /* */ var c_n_f=nav.firstChild;// //var c_n_f=nav.childNodes[0];// var c_n_l=nav.lastChild;// //var c_n_l=nav.childNodes[nav.childNodes.length-1];// alert(" ："+c_n_f.nodeName+" "+" ："+c_n_l.nodeName); /* */ /* nextSibling PreviousSibling ， */ var c_n_s=c_n_f.nextSibling;// alert(" ："+c_n_s.innerHTML+ "
" + " HTML ： "+c_n_s.nodeName); } </script>ここに書いてください.標準のprevious Sibling、nextSibling、first Child、lastChild、parent Node遍歴方法はブラウザの互換性がない問題があります.上記の解決策は元素を遍歴した相関空を除去することです.良い解決策ですが、使うのは不便です.私達は標準のprevious Sibling、nextSibling、first Child、lastChild、parent Nodeの代わりに自分でいくつかの遍歴ノードの方法を書いたらどうですか?
私達の考えは元素がnodeType属性で元素がノードタイプの中のあのようなノードタイプであることを判断するので、DOMノードの中で私の最も常用したのは元素のノードで、テキストのノード、属性のノード、対応するタイプの値は元素のノードのnodeType=1 or ELLENT_です.NODE、テキストノードnodeType=2 or ATTRIBUTE_NODE、属性ノードnodeType=3 or TEXT_NODEですが、IEではネーミング定数がサポートされていませんので、数値を使ってください.標準のエルゴード属性に合わせてください.標準的なエルゴード方式の代わりに、いくつかの補助関数を自分で生産することができます.
以下の一連の補助関数は、標準のprevious Sibling、nextSibling、first Child、lastChild、parent Nodeを置き換えることができます.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <script type="text/javascript"> //---------DOM ， null---------// //--- ---// function prev(elem){ do{ elem=elem.previousSibling; }while(elem && elem.nodeType!=1); return elem; } //--- ---// function next(elem){ do{ elem=elem.nextSibling; }while(elem && elem.nodeType!=1); return elem; } //--- ---// function first(elem){ elem=elem.firstChild; return elem && elem.nodeType!=1 ?next(elem):elem; } //--- ---// function last(elem){ elem=elem.lastChild; return elem && elem.nodeType!=1 ?prev(elem):elem; } //--- ---// //num ，parent(elem,2) function parent(elem,num){ num=num||1; for(var i=0; i<num; i++){ if(elem!=null){ elem=elem.parentNode; } } return elem; } </script>