JavaScriptにおけるノードコンテンツの拡張について

1. 要素ノード

//テスト要素ノード、出力ノード名、ノード タイプ、ノード値
 var liElements=document.getElementsByTagName("li");
 for(var i=0;ialert(liElements[i].nodeName);
alert(liElements[i].nodeType);
alert(liElements[i].nodeValue);
 }

2. 属性ノード

コードをコピーしますコードは次のとおりです:

[/c//テスト属性ノード、出力属性ノード名、ノードタイプ、ノード値
var liElements=document.getElementsByTagName("li");
for(var i=0;i< liElements .length;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]

3. テキストノード
[code]
//テスト要素ノード、出力ノード名、ノードタイプ、ノード値
var liElements=document.getElementsByTagName(" li" );
for(var i=0;ialert(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);

//メソッドを読み取る別の方法
アラート(liElements[i].firstChild.nodeName);
アラート(liElements[i].firstChild.nodeType);
アラート(liElements[i].firstChild.nodeValue);
}

4. ノードを置き換えます

replaceChild()
指定された親要素の子ノードを別の子ノードに置き換えます
varreference = element.replaceChild(newChild,oldChild);
戻り値は、参照へのポインタです置換される子ノードのポインタ。
挿入された子ノードにも子ノードがある場合、それらの子ノードもターゲットノードに挿入されます

コードをコピーコードは次のとおりです:

//方法 1
// 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");

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

5. 属性ノードを検索します

getAttribute()
指定された要素の指定された属性ノードの値を返します
varattributeValue = element.getAttribute(attributeName);
指定された属性の名前は、次の形式で渡す必要があります。文字列メソッドを指定します。
指定された属性の値は文字列の形式で返されます。指定された属性が存在しない場合、getAttribute() は空の文字列を返します。
属性
getAttributeNode を通じて属性ノードを取得します。 (属性の名前) --Node

北京

//属性名から属性の値を取得します
var bjElement= document.getElementById("bj");
varattributeValue=eduElement.getAttribute("name");
alert("attributeValue "attributeValue);

// を通じて属性のノードを取得します属性名
var bjNode=eduElement.getAttributeNode("name");
alert(eduNode.nodeValue);
alert(eduNode.nodeType);
alert(eduNode.nodeName);

6. 属性ノードを設定します

setAttribute()
指定された要素ノードに新しい属性値を追加するか、既存の属性の値を変更します。
element.setAttribute(attributeName,attributeValue);
属性の名前と値は文字列の形式でこのメソッドに渡される必要があります。
この属性が既に存在する場合、その値は更新されます。 🎜>If 存在しない場合、setAttribute() メソッドは最初にそれを作成し、次にそれに値を割り当てます。

北京

//要素の参照を取得します

var bjElement=document.getElementById("bj");
//属性値を設定します
bjElement.setAttribute("name","beijing") ;
//設定された属性値を取得します
var nameValue=bjElement.getAttribute("name");
alter("nameValue " nameValue);

7. 新しい要素ノードを作成します

createElement()

指定されたタグ名に従って新しい要素ノードを作成します。このメソッドのパラメータは 1 つだけです。作成される要素の名前です。
varreference = document.createElement(element);
メソッドの戻り値は、以下を指す参照ポインタです。新しく作成されたノード。戻り値は要素ノードであるため、そのnodeType属性値は1に等しくなります。
新しい要素ノードはドキュメントに自動的に追加されません。新しいノードには、JavaScript コンテキストに存在する単なるオブジェクトです。
var pElement = document.createElement("p");

//新しい要素を作成します

var pElement=document.createElement("li");
//属性値を設定します
pElement.setAttribute("id","pid");

//親要素を取得します
var loveElement=document.getElementById("love");
//親要素に子要素を追加します
loveElement.appendChild(pElement);

//新しく作成された要素を id で取得します

var pidElement=document.getElementById("pid");
alert(pidElement.getAttribute("id"));

8. 新しいテキストノードを作成します

createTextNode()

指定されたテキストを含む新しいテキストノードを作成します。このメソッドの戻り値は、新しいテキストノードへの参照ポインタです。
var textNode = document.createTextNode(text);
メソッドのパラメータは 1 つだけです: 新しいテキストノードに含まれるテキスト文字列です。
メソッドの戻り値は、新しいノード。これはテキストノードであるため、nodeType 属性は 3 に等しくなります。
新しい要素ノードはドキュメントに自動的に追加されず、新しいノードには nodeParent 属性がありません

var pElementText=document.createElement( "li") ;
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);

9. ノードを挿入します (1)

appendChild()

指定された要素に子ノードを追加します:要素の最後の子ノード。
メソッドの戻り値は、新しく追加された子ノードへの参照ポインターです。
このメソッドは通常、createElement() createTextNode() と組み合わせて使用されます
ドキュメント内の任意の要素に新しいノードを追加できます

コードをコピーコードは次のとおりです:

 var newliElement=document.createElement("li");
 var textNode=document.createTextNode("Beijing");
 newliElement.appendChild(textNode);
 document.body。 appendChild(newliElement);

 var liElement=document.getElementsByTagName("li");
 var textValue=liElement[0].firstChild.nodeValue;
alert(textValue);

10. ノードを削除します

removeChild()
指定された要素から子ノードを削除します
varreference = element.removeChild(node);
戻り値は、削除された子ノードへの参照ポインタです。
removeChild() メソッドによってノードが削除されると、このノードに含まれるすべての子ノードが同時に削除されます。

コードをコピーコードは次のとおりです:

 北京
 var ulElement=document.getElementById("city");
 var liElement=document。 getElementById( "北京");
 ulElement.removeChild(liElement);

ノードを削除したいが、それがどの親ノードであるかわからない場合は、parentNode 属性が役に立ちます。

コードをコピーコードは次のとおりです:

 北京 
 var liElement=document.getElementById("beijing");
 varparentElement=liElement。親ノード; 
 親要素.removeChild(liElement);

11. ノードツリーを移動します

ChildNodes: 指定された要素ノードの子ノードで構成される配列を返します。
var nodeList = node.childNodes
テキストノードも属性ノードもそれ以上の子ノードを含めることはできないため、ChildNodes プロパティ常に空の配列を返します。
要素に子ノードがあるかどうかを知りたい場合は、hasChildNodes メソッドを使用できます。
特定の要素にある子ノードの数を知りたい場合は、childNodes 配列の length プロパティを使用できます。
childNodes 属性は読み取り専用の属性です。

12. 最初の子ノードを取得します

firstChild: この属性は、指定された要素ノードの最初の子ノードを返し、このノードオブジェクトのポインタを返します。
varreference = node.firstChild;
テキストノードも属性ノードも子ノードを含むことができないため、firstChild プロパティは常に null を返します。
要素の firstChild 属性は、この要素の childNodes ノードコレクション内の最初のノードと同等です。
varreference = node.ChildNodes[0];
firstChild 属性は読み取り属性です。属性のみ。

13. 最後の子ノードを取得します

lastChild: firstChild に対応する属性。
nextSibling: 指定されたノードの次の兄弟ノードを返します。
parentNode: 指定されたノードの親ノードを返します。
parentNode 属性によって返されるノードは常に要素ノードです。これは、子ノードを含むことができるのは要素ノードのみであるためです。
ドキュメントノードには親ノードがありません。
previousSibling: 指定されたノードの前の兄弟ノードを返します

14. innerHTML 属性

ほぼすべてのブラウザがこの属性をサポートしていますが、これは DOM 標準の一部ではありません。
innerHTML 属性は、特定の要素内の HTML コンテンツの読み取りと書き込みに使用できます。

コードをコピーコードは次のとおりです:

var divElement=document.getElementById("city"); 
divElement.innerHTML="北京

JavaScriptにおけるノードコンテンツの拡張について_基礎知識