「JavaScript DOMプログラミング芸術」(第二版)読書ノート(二)

これから本格的にDOMの勉強に入ります.
第三章DOM
Dはdocument(ドキュメント)を表し、Oはobject(オブジェクト)を表し、Mはmodel(モデル)を表し、簡単にDOMは一つの文書を「ツリー」と表します.
ノードは、ネットワークの接続点を表しています.一つのネットワークは、いくつかのノードによって構成される集合である.DOMも同様の場合、ドキュメントはノードで構成される集合である.
1.要素ノード(element node)
<>、、、

、

などのラベルの名前は元素の名前で、たとえばテキストの段落の元素の名前は“p”です.
2.テキストノード(text node) 一般的なテキストノードは要素ノードに含まれています.
3.属性ノード(atribute node) 属性ノードも要素ノードに含まれています.例えば、最も一般的なクラス、idなどです.
各ノードは一つのオブジェクトです.
要素の取得方法
1.Dcument.getElemenntById
2.Dcument.getElements ByTagName
3.Dcument.getElements ByClass Name
第一の方法は比較的簡単で、第二の方法は注目すべき結果は配列で、第三の方法は比較的新しいです.古いブラウザバージョンはサポートされていませんが、既存の方法で実現できます.コードは以下の通りです.

function getElementsByClassName(node,classname){ if(node.getElementsByClassName){                               //            ，         

        return node.getElementsByClassName(classname); }else{ var results = new Array(); var elems = node.getElementsByTagName("*"); for(var i = 0; i < elems.length; i++){ if(elems[i].className.indexOf(classname)!=-1){ results[results.length]=elems[i]; } } return results; 
}

tips:indexOf()メソッドは、指定された文字列値が文字列で最初に現れる位置を返します.なければ-1です
属性の取得と設定(両方は要素ノードのみとなります)
1.get Attributeの使用方法:object.get Attribute(atribute)
2.set Attributeの使用方法:object.set Attribute(atribute、value)
 
第四章 実例研究:javascriptギャラリー
1.setAttributeは他の方法で代替できます.直接設定:element.value=「the new value」はelement.set Attribute(「value」、「the new value」)に相当します.
2.childNodes属性
1つのノードツリーにおいて、childNodes属性は、任意の要素のすべてのサブ要素を取得するために使用されてもよく、この要素のすべてのサブ要素を含む配列である.
childNodes属性によって要素のすべてのタイプのノードが返されるのは、要素ノードだけではない.ほとんどのものが一つのノードになり、スペースや改行もノードとして解釈されます.
3.nodetype属性
ノードのnodeType属性をnode.nodeTypeで取得できます.
要素ノードのnodetype属性値は1で、属性ノードのnodetype属性値は2で、テキストノードのnodetype属性値は3で、コメントノードのnodetype属性値は8で、ドキュメントノードのnodetype属性値は9です.
4.nodevalue属性
テキストノードの値を変えたいなら、nodeValue属性で、方法node.nodeValue
5.first ChildとlastChildの属性
childNodes[0]とchildNodes[childNodes.length-1]にそれぞれ対応しています.
 
第5章 ベストな実践
主にJSコードを書くいくつかの注意事項を説明しました.
安定退化、漸進強化、後方互換性、性能向上.
よく読んで、普段プロジェクトをする時に使います.