JavaScript学習メモ(12)dom_基礎知識

Dom
createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment()
//新しいノードを作成します
function CreatNode() {
var oP = document.createElement("p");
oP.innerHTML = "Hello World!";
document.body.appendChild(oP); >
//ノードの削除
function RemoveNode() {
var oP = document.getElementsByTagName("p");
var len = oP.length>if (len != 0; ) {
oP[len - 1].parentNode.removeChild(oP[len - 1]) //削除するにはノードのparentNode機能を使用するのが最善です>}
else {
alert(" すべて削除されました! ");
}
}
//ノードを置換
function ReplaceNode() {
var oNewP = document.createElement("p");
oNewP. innerHTML = "
New --> Hello World!
";
//最後に新しく追加されたノードを oNewP に置き換えます
var len = document.getElementsByTagName("p") .length; var oOldLastP = document.getElementsByTagName("p")[len - 1]; oOldLastP.parentNode.replaceChild(oNewP, oOldLastP)
//insertBefore() メソッド
2 つのパラメーターを受け入れて、新しいメッセージを古いメッセージの前に表示します。
1. 追加するノード。
xxx.parentNode.insertBefore(newChild, oldChild); // createDocumentFragment() メソッド
ドキュメント フラグメントを作成します
は、作成された 10 個の新しいノード要素の一部をドキュメント フラグメントに追加し、このフラグメントをパラメータとして appendChild()
xxx に渡します。フラグメントが追加されます。appendChild(oFragment);
このようにすると、xxx は 10 回ではなく 1 回だけ呼び出され、パフォーマンスが向上します。