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 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="

北京

> ;" ;