JAvascriptシリーズのDOM(一)

はのサブノードであり,の孫ノードまたは子孫(descendant)ノードである.
DOMノードオブジェクト
HTMLドキュメントの各ノードは、異なるタイプのノード(node)オブジェクトであり、各ノードには独自の属性と方法があります.これらのプロパティと方法を使用すると、ドキュメントツリー全体を巡り、プロパティを含む要素を取得するなど、DOMの操作を開始できます.もちろんDOMには多くのタイプのノードがありますが、どのように区別されていますか?答えはnodeTypeです.次に、どのようなタイプのノードがあるかを見てみましょう.
インタフェース
nodeType値
コメント
element
1
要素ノード
text
3
テキストノード
attr
2
ノードのプロパティ
comment
8
アノテーションノード
document
9
document
documentFragment
11
ドキュメントの断片化
これらのノードタイプの中で、最も多く使われているのは要素ノードとテキストノードです.JavascriptがHTMLドキュメントを操作する場合、documentはドキュメント全体を指し、、などのノードタイプはElementとなります.このnodeTypeについては,ノードタイプを検出するために用いることができる.
前述したように、異なるノードには異なる属性と方法が提供されていますが、各ノードタイプについて説明します.documentノードでは、主にドキュメントに挿入できるさまざまなタイプのノードを作成するための一般的なファクトリメソッドが用意されています.詳細は、次の表を参照してください.
方法
説明
createElement
要素ノードの作成
createTextNode
テキストノードの作成
createAttribute
属性ノードの作成
getElementById
ドキュメントでidを指定した要素ノードを取得
getElementsByTagName
ドキュメントで指定したラベルの要素ノードを取得
getElementByName
ドキュメントで指定した名前の要素ノードを取得
 
要素ノードには、要素のラベル名(すべて大文字)を取得するためのtagNameプロパティがあり、主に要素の挿入と削除、クエリー、設定に使用されます.詳しくは以下の表を参照してください.
getAttribute
指定した属性の値を文字列で返す
getAttributeNode
指定した属性をAttrノードとして返します
hasAttribute
ノードに指定した名前のプロパティがあるかどうかを判断します.
removeAttribute
指定した名前の属性を削除
setAttribute
指定した名前のプロパティを設定し、ない場合は追加します.
 setAttributeNode
指定した名前の属性ノードの設定
Attrオブジェクトはドキュメント要素の属性を表し、name、valueなどの属性があり、Nodeインタフェースのattributes属性またはElementインタフェースのgetAttributeNode()メソッドを呼び出すことで取得できます.ただし、ほとんどの場合、Element要素のプロパティを使用する最も簡単な方法は、AttrオブジェクトではなくgetAttribute()とsetAttribute()の2つの方法です.
これらのノードタイプはいずれもノードオブジェクトであり、ノードオブジェクトはDOMドキュメントの操作を容易にするために共通の属性と方法を定義します.parentNodeとchildrenNodes[]でドキュメントを上下に移動し、nextSiblingでドキュメントを左右に移動します.firstChildおよびlastChildは、指定されたノードのサブノードを列挙し、childNodes[](ここでchildNodes[]はnodeListオブジェクトである)配列を巡回してこれらのサブノードを操作し、再帰的にドキュメントツリー内のすべてのノードを列挙しないことができる.一方、appendChild()、insertBefore()、removeChild()、replaceChild()メソッドを呼び出すと、ノードのサブノードを変更してドキュメントツリーを変更できます.以下に、ノードオブジェクトの一般的なプロパティとメソッドを示します.
ノードオブジェクトの共通プロパティ:
attributes
ノードがelementである場合、要素のプロパティを返します.
childNodes
現在の要素のサブノードを返し、ない場合null
firstChild
現在のノードの最初のサブノードを返します.なければnull
lastChild
現在のノードの最後のサブノードを返します.なければnull
nextSibling
現在のノードの次の兄弟ノードを返します.
nodeName
現在のノードの名前を返します.elementはタグ名です.
parentNode
現在のノードの親ノード
previousSibling
現在のノードの前の兄弟ノードを返します.
ノードオブジェクトの一般的な方法:
appendChild()
現在のノードのchildNodes[]にノードを追加します.
cloneNode()
現在のノードをコピーし、パラメータがtrueの場合、現在のノードとそのすべての子孫ノードをコピーします.
hasChildNodes()
現在のノードにサブノードがあるかどうかを判断
insertBefore()
指定したノードと現在のノードの間に新しいノードを挿入
removeChild()
ドキュメントから削除して指定したサブノードに戻る
replaceChild()
ドキュメントから削除して指定したサブノードに戻り、別のノードで置き換えます.
 
上記の一般的なノードオブジェクトのプロパティとメソッドは、DOMを操作するのに最も有用なツールです.次に、上記のプロパティとメソッドを使用して、日常的に見られるDOM動作を操作します.
DOM操作
A:DOMフラグメント(フラグメント)を作成します.次のようになります.
                  

 1 var fragment=document.createDocumentFragment();//      

 2 var oDiv=document.createElement("div");//  div    

 3 oDiv.setAttribute("id","example");// div    id   

 4 var oP=document.createElement("p");//  p    

 5 oP.setAttribute("class","slogan");// p    class  

 6 var oText=document.createTextNode(" ！   ")//      

 7 oP.appendChild(oText);// p          

 8 oDiv.appendChild(op);

 9 fragment.appendChild(oDiv)

10 document.body.appendChild(fragment);

 1 var elementName="";//            

 2 function countTotalElement(node){

 3     var total=0;

 4     if(node.nodeType==1){//         

 5             total++//    1

 6             elementName=elementName+node.tagName+"
";//     

 7             }

 8             var oChild=node.childNodes;//            

 9             for(var i=0,l=oChild.length;i<l;i++){

10                 countTotalElement(oChild[i]);//       

11     }

12     return total;

13 }