JavaScript学習メモ(19) ノード操作実装コード_基礎知識-jsチュートリアル-php.cn

JavaScript学習メモ(19) ノード操作実装コード_基礎知識

WBOY

リリース： 2016-05-16 17:52:25

オリジナル

1068 人が閲覧しました

このセクションで使用する HTML の例

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

< ;ul id ="myList"> 
プロジェクト 1

プロジェクト 3
 > 


1. 要素ノードの作成 

document.createElement() メソッドは、要素のタグ名を受け取ります。ノード

コードをコピーします。コードは次のとおりです。 >var div = document.createElement("div") ; // div 要素を作成します div.id = "myDiv" // div の ID を設定します div.className = "box"; div のクラス

 
 要素を作成した後、その要素をドキュメント ツリーに追加する必要があります 

 2. 要素ノードの追加 
 appendChild() メソッドは、要素を追加するために使用されます。ノードを childNodes リストの最後に追加し、追加する要素ノードを返します 

コードをコピー

コードは次のとおりです: var ul = document.getElementById("myList"); // ul var li = document.createElement("li"); // li li.innerHTML = "を作成します。 item 4"; //li にテキストを追加します

ul.appendChild(li); //li を ul 子ノードの末尾に追加します

追加後:

コードをコピーします

コードは次のとおりです。

プロジェクト 1

プロジェクト 3

 
appendChild() メソッドも追加できます。既存の要素は元の位置から新しい位置に移動されます 

コードをコピーします

コードは次のとおりです。

var ul = document.getElementById("myList") //Get ul ul .appendChild(ul.firstChild); //ul の最初の要素ノードを ul 子ノードの末尾に移動します実行後 (IE):

コードをコピー

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

プロジェクト 2< ;/li>プロジェクト 3

insertBefore( ) メソッド。最後にノードを挿入せず、特定の位置に配置したい場合は、このメソッドを使用します。このメソッドは 2 つのパラメーターを受け入れます。最初のパラメーターは挿入されるノードで、2 番目は参照ノードです。追加する要素ノードを返します 

コードをコピー

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

var ul = document.getElementById("myList"); // ul var li = document.createElement("li"); // li li.innerHTML= "項目 4" を作成します。 liul.insertBefore(li,ul.firstChild) //ul

の最初の子ノードの前に li を追加します:

コードをコピーします

コードは次のとおりです。

項目 4< /li>

項目 1

項目 2
プロジェクト 3

コードをコピーします

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

var ul = document.getElementById("myList"); // ul var li = document.createElement("li"); // li li.innerHTML= "Item 4" を作成します。 ul.insertBefore(li,ul.null); //ul の子ノードの末尾に li を追加します。
追加後:

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

 
アイテム 1

アイテム 3プロジェクト 4

コードをコピーします

コードは次のとおりです: var ul = document.getElementById("myList"); // ul var li = document.createElement("li"); // li を作成します。 🎜> li.innerHTML= "Item 4"; // li

var lis = ul.getElementsByTagName("li") // ul

ul.insertBefore(li, lis[ 1]); // ul の 2 番目の li ノードの前に li を追加します 

追加後:

コードをコピーします

コードは次のとおりです。

プロジェクト 1
項目 2

3. 要素ノードを削除します。ノードの削除に使用されるremoveChild()メソッドは、削除されるノードであるパラメータを受け取り、削除されたノードを返します。削除されたノードはまだ document 内にありますが、その位置は document

コードをコピー

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

var ul = document.getElementById("myList") ; //Get ul
var fromFirstChild = ul.removeChild(ul.firstChild) //ul var = document.getElementById("myList") //Get ul
var lis = ul.getElementsByTagName("li") //ul 内のすべての li のコレクションを取得します

ul.removeChild(lis[0]); //最初の li を削除します。上記とは異なり、ブラウザ間の違い 4. 要素ノードの置換 replaceChild() メソッドは、ノードを置換するために使用され、2 つのパラメーターを受け取ります。最初のパラメーターはノードを挿入するもので、2 番目のパラメーターは挿入されるノードです。置き換えられた場合は、置き換えられたノードを返します

コードをコピー

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

var ul = document.getElementById("myList"); // ul
var fromFirstChild = ul.replaceChild(ul.firstChild); // ul var ul = document .getElementById("myList"); の最初の子ノード 1 を置換します。 // ul を取得します。
var li = document.createElement("li"); // li

li.innerHTML= "項目 4" を作成します。var lis = ul. getElementsByTagName("li") //ulvar 内のすべての li のコレクションを取得します returnNode = ul.replaceChild(li,lis[1]) //元の li を作成した li に置き換えます 2 番目の li 5. ノードのコピー cloneNode() メソッドは、ノードのコピーに使用され、ブール値パラメーターを受け入れます。 true は深いコピー (ノードとそのすべての子ノードをコピー) を意味し、false は浅いコピー (ノードをコピー) を意味します

コードをコピー 

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

var ul = document.getElementById("myList"); // ul
var deepList = ul.cloneNode(true); // 深いコピー
varshallowList = ul.cloneNode(false);

ノードを操作する際は、IE と他のブラウザの違いに注意してください (セクション 18 で説明)