javascriptでノードの内容について強化します.

7545 ワード

一、元素ノード
 
  
// , , ,
  var liElements=document.getElementsByTagName("li");
  for(var i=0;i     alert(liElements[i].nodeName);
     alert(liElements[i].nodeType);
     alert(liElements[i].nodeValue);
  }
二、属性ノード
 
  
[/c// , , ,
  var liElements=document.getElementsByTagName("li");
  for(var i=0;i      var attrElement=liElements[i].getAttributeNode("value")
      alert("attrElement.nodeName "+attrElement.nodeName);
      alert("attrElement.nodeType "+attrElement.nodeType);
      alert("attrElement.nodeValue "+liElements[i].getAttribute("value"));
  }ode]


[code]
 // , , ,
  var liElements=document.getElementsByTagName("li");
  for(var i=0;i   alert(liElements[i].childNodes[0].nodeName);
   alert(liElements[i].childNodes[0].nodeType);
   alert(liElements[i].childNodes[0].nodeValue);

   liElements[i].childNodes[0].nodeValue=" ";
   alert(liElements[i].childNodes[0].nodeValue);

   //
   alert(liElements[i].firstChild.nodeName);
   alert(liElements[i].firstChild.nodeType);
   alert(liElements[i].firstChild.nodeValue);
  }

四、置換ノード
replacceChild()は、与えられた親要素のうちの1つのサブノードを別のサブノードに置き換える. var reference=element.replacceChild(newChild,oldChild)戻り値は、置換されたサブノードを指す参照ポインタである.挿入されたサブノードがサブノードである場合、それらのサブノードもターゲットノードに挿入される.
 
  
 //
//  var cityElement=document.getElementById("city");
//  var loveElement=document.getElementById("love");
//  var cityChildElement=document.getElementById("beijing");
//  var loveChildElement=document.getElementById("fankong");
//  var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);
//  loveElement.appendChild(oldElement);
//  alert(oldElement.getAttribute("id"));

  var cityElement=document.getElementById("city");
         cityElement.onclick=function(){
         var cityChildElement=document.getElementById("beijing");
         var loveChildElement=document.getElementById("fankong");
         var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);
         loveElement.appendChild(oldElement);
         alert(oldElement.getAttribute("id"));
  }

五、属性ノードの検索
get Attribute()   与えられた要素の属性ノードの値を返します. var atributeValue=element.get Attribute(atributeName);与えられた属性の名前は、文字列で方法に伝えられます.属性の値が指定された文字列で返されます.指定された属性が存在しない場合、getAttribute()は空の文字列を返します.属性によって属性ノードを取得します.   get AttributeNode(属性の名前)--Node
  北京  //属性名で属性の値を取得します.     var  bjelement=document.getElement ById(「bj」)     var atributeValue=edue Element.get Attribute(“name”);     alert(「atributeValue」    "+atributeValue);  //属性名で属性を取得するノード   var  bjNode=eduElement.getAttributeNode("name")       alert(eduNode.nodeValue)       alert(eduNode.nodeType)       alert(eduNode.nodeName);
六、属性ノードの設定
setAttribute()は、所与の要素ノードに新しい属性値を追加したり、既存の属性の値を変更したりします.   element.set Attribute(atributeName、atributeValue)、属性の名前と値は必ず文字列でこの方法に伝えなければならない.この属性が既に存在すれば、その値は更新されます.存在しない場合、set Attribute()方法はまず作成してからその割当値にします. 
   北京  //要素の参照を取得   var bjelement=document.getElement ById(「bj」)  //属性値を設定   bjelement.setAttribute(「name」「beijing」)  //設定した属性値を取得します.   var nameValue=bjelement.get Attribute(“name”);   alert(「nameValue」+nameValue);
 
七、新しい元素ノードを作成する
createElement()は、与えられたラベル名に基づいて新しい要素ノードを作成します.方法はパラメータのみです.作成される要素の名前は、文字列です.  var reference=document.create Element;メソッドの戻り値:新規ノードへの参照ポインタです.戻り値は要素ノードです.したがって、nodeType属性値は1です.新しい要素ノードは自動的にドキュメントに追加されません.新しいノードはnodePart属性がありません.JavaScriptコンテキストに存在するオブジェクトです. var pElement=document.create Element("p")
  //新しい要素を作成します.  var pElement=document.creat Element(「li」); //属性値を設定  pElement.set Attribute(“id”、“pid”); //親要素を取得  var loveElement=document.getElement ById(「love」) //親要素にサブ要素を追加します.lovelement.apendChild(pElement)
 //作成したばかりの元素をidで取得します.  var pidElement=document.getElement ById(「pid」)  alert(pidElement.get Attribute(“id”);
 
八、新しいテキストノードを作成する
createText Node()は、与えられたテキストを含む新しいテキストノードを作成します.この方法の戻り値は、新しいテキストノード参照ポインタを指します.  var text Node=document.create Text Node(text)しか方法がない.新規テキストノードに含まれるテキスト文字列方法の戻り値は、新規ノードを指す参照ポインタです.テキストノードなので、nodeType属性は3に等しくなります.新しい要素ノードは自動的にドキュメントに追加されず、新しいノードにnodePartent属性がありません.      var pElement Text=document.creat Element(「li」);  var textElement=document.create Text Node(南京);  pElement Text.apendChild(textElement)
九、ノードを挿入する(1)
apendChild()は、与えられた要素のためのサブノードを追加します.                                      var newreference=element.apendChild(newChild)                 固定子ノードnewChildには、所与の要素ノードelementの最後のサブノードとなります.方法の戻り値は、新規サブノードを指す参照ポインタです.この方法は、通常、createelement()createText Nodeと協力して、新しいノードを使用して、ドキュメント内の任意の要素に追加することができます.
 
  
 var newliElement=document.createElement("li");
 var textNode=document.createTextNode(" ");
 newliElement.appendChild(textNode);
 document.body.appendChild(newliElement);

 var liElement=document.getElementsByTagName("li");
 var textValue=liElement[0].firstChild.nodeValue;
 alert(textValue);
十、ノードの削除
removeChild()は与えられた要素からサブノードを削除します.   var reference=element.removeChild;戻り値は削除されたサブノードを指す参照ポインタであり、あるノードがremoveChild()方法によって削除されると、このノードに含まれるすべてのサブノードは同時に削除される.
 
  
 
     

 var ulElement=document.getElementById("city");
 var liElement=document.getElementById("beijing");
 ulElement.removeChild(liElement);
ノードを削除したいのですが、親ノードがどれなのかは分かりません.
 
  
 
     

   var liElement=document.getElementById("beijing");
   var parentElement=liElement.parentNode;
   parentElement.removeChild(liElement);
十一、ノードツリーを巡回します.
ChildNodes:与えられた要素ノードのサブノードからなる配列を返します. var nodeList=node.childNodes;テキストノードと属性ノードは、もうどのサブノードも含まれていないので、ChildNodes属性は常に空の配列に戻ります.サブノードがあるかどうかを知りたいなら、hasChild Nodes方法を使ってもいいです.いくつかの要素にサブノードがあるかを知りたいなら、childNodes配列のlength属性を使ってもいいです.des属性は読み取り専用の属性です.
十二、第一サブノードを取得する
firstChild:属性は、所与の要素ノードの第1のサブノードに戻り、このノードオブジェクトのポインタを返す.    var reference=node.first Child;テキストノードと属性ノードはいずれのサブノードをも含むことができないので、それらのfirst Child属性は永遠にnullに戻ります.ある要素のfirst Child属性はこの要素のchild Nodesノードセットの最初のノードに相当します.  var reference=node.Child Nodes[0];first Child属性は読み取り専用の属性です.
十三、最後のサブノードを取得する
lastChild:first Childの属性に対応しています.nextSibling:与えられたノードの次の兄弟ノードに戻ります.parent Node:与えられたノードの親ノードに戻ります.parent Node属性が戻ってくるノードは、常に要素ノードです.要素ノードのみがサブノードを含むことができます.documentノードの親ノードがありません.previousSibling:1つに戻ります.ノードを決める前の兄弟ノード
14、inners HTML属性
ブラウザはほとんどこの属性をサポートしていますが、DOM標準の構成部分ではありません.innerHTML属性は、所与の要素の中のHTMLコンテンツを読むために使用できます.
 
var divElement=document.getElementById("city"); 
divElement.innerHTML="
  • ";