『JavaScript高級プログラム設計』ノート:DOM(10)

12559 ワード

ノードのタイプ
nodeType以下は重要なnodeTypeの値です.1:要素element 2:属性atr 3:テキストtext 8:コメントcomments 9:ドキュメントdocument
nodeName,nodeValue
ノード関係
childNodes:各ノードには、一つのNodeListオブジェクトが保存されているchildNodes属性があります.
first Child:child Nodes[0]に等しい.
lastChild:child Nodes.length-1に等しい
同時に、リスト内の各ノードのprevious SiblingとnextSibling属性を使用することにより、同じリスト内の他のノードにアクセスすることができる.
操作ノード
apendChild()apendChild()メソッドは、child Nodesリストの末尾にノードを追加するために使用される.ノードを追加すると、childNodesの新規ノード、親ノード、および以前の最後のサブノードの関係ポインタがそれぞれ更新される.
insertBefore()insertBefore()この方法は、挿入するノードと参照するノードとの2つのパラメータを受け入れる.

//             
returnedNode = someNode.insertBefore(newNode,null);

//           
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

//             
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

repaceChild()repaceChild()は二つのパラメータを受け入れ、挿入するノードと置換するノード

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

RemoveChild()は、代替ノードではなく、除去されるだけです.

var formerFirstChild = someNode.removeChild(someNode.firstChild);

clone Node()

<ul>
  <li>item 1li>
  <li>item 2li>
  <li>item 3li>
ul>

var deepList = myList.cloneNode(true);
console.log(deepList.length); // 3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

Dockmentタイプ
Dcumentノードは、以下の特徴を有する.nodeTypeの値は9である.nodeNameの値は22123;documentです.nodeValueの値はnullです.parent Nodeの値はnullです.owner Dcumentの値はnullです.
ドキュメントのサブノード

var html = document.documentElement; //       
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

文書情報

//        
var originalTitle = document.title; 

//       
document.title = "New page title";

//      url
var url = document.URL;
//     
var domain = document.domain;
//        url
var referrer = document.referrer;

//      p2p.wrox.com 
document.domain = "wrox.com"; //   
document.domain = "nczonline.net"; //

IE 7でdocument.getElement ById(「myElement」)を呼び出します.結果は元素に戻ります.次のようになります.最も良い方法は、フォームフィールドのname特性が他の要素のIDと同じでないようにすることです.

<input type="text" name="myElement" value="text field">
<div id="myElement">a divdiv>

特殊集合
document.anchorrsは、ドキュメント内のすべてのname特性を持つa要素を含む.document.formsは、ドキュメント中のすべてのform要素を含み、document.getElements ByTagName(「form」)から得られた結果と同じである.document.imagsは、ドキュメント内の全ての要素を含み、document.getElements ByTagName(“img”)と同じ結果を得た.Dcument.linksは、ドキュメント内のhref特性を持つすべてのa要素を含む.
ドキュメントの書き込み

<html>
<head>
      <title>document.write() Example 3title>
head>
<body>
     <script type="text/javascript">
          document.write("") + "");
     script>
body>
html>

はスクリプトタグのじたタブとしてわれませんので、ページにながされません.
Elementタイプ
Elementノードは、nodeTypeのが1であるというをする.nodeNameのはのラベルです.nodeValueのはnullです.parent NodeはDockmentまたはElementかもしれません.
のラベルにアクセスするには、nodeName をってもいいし、tagName をってもいいです.

<div id="myDiv">div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV

if (element.tagName=="div") { //       ，     
}

if (element.tagName.toLowerCase =="div") { //     （       ）
}

をる
のDOM はにget Attribute()、set Attribute()、removeAttribute()のつがあります.なお、getAttribute()にすは、のとじである.クラスのをるためには「クラス」ではなく「クラスName」にるべきだというがあります.

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

を
document.creat Element()をして、しいをすることができます.
のサブノード
あるをするに、ノーマルタイプのをチェックします. ののように、

for (var i=0; len = element.childNodes.length; i){
    if (element.childNodes[i].nodeType ==1) {
        //       
    }
}

Textタイプ
Textノードはのをっています.nodeTypeのは3です.nodeNameのは「𞃳text」です.nodeValueのはノードにまれるテキストです.parent NodeはElementです.
テキストノードを document.createTextNode()をいてしいテキストノードをすることができる.
テキストノードをする
normalize()
テキストノードを
split Text()
Commentsタイプ
コメントノードはのをっています.nodeTypeのは8です.nodeNameのは「𞏆comment」です.nodeValueのはコメントのです.parent NodeはDockmentまたはElementかもしれません. のをしません.
DOM
テーブル

    //    table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//   tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//      
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));


//      
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

document.body.appendChild(table);

js拡張Date時間を「yyy-M-dd hh:mm:ss」形式の文字列にフォーマットします.