javascriptでノードの内容について強化します.
// , , ,
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=" ";