JSを使用して、追加、削除、変更、ノードのコピーの操作を完了します。

著者：Eve Cole 更新時間：2025-03-13 14:00:04

要件：追加、削除、変更、ノードのコピーの操作を完了する

使用される方法と属性：

1.ノードの親ノードを取得します

ParentNode属性

2。ノードのサブノードコレクションを取得します

チャイルドノード属性

3.新しいノードの作成

createTextNode（ノードテキストコンテンツ）ドキュメントオブジェクトの方法は、一部のブラウザの互換性が良くありません

createElement（object）documentオブジェクト、document.createelement（ "a"）;

4.ノードのオブジェクトに属性と属性値を追加する

setTtribute（属性、属性値）;

5.特定のノードの下にサブノードを交換します

交換（新しいノード、アトミックノード）;

6.ノードにノードを追加します

AppendChild（追加するノード）

7。特定のノードをKlong

cloneNode（）はパラメーターを真のパラメーターとして渡さず、クローンのノードにサブノードが含まれていることを示します

次のようにコードコードをコピーします。

<！doctype html>

<html>

<head>

<メタhttp-equiv = "description" content = "これは私のページ" >>

<メタhttp-equiv = "content-type" content = "text/html; charset = utf-8">

<！ - <link rel = "styleSheet" type = "text/ css" href = "./ styles.css"> - >

div {

境界線：赤1px固体;

幅：200px;

高さ：50px;

マージン：20px 30px;

パディング：20px;

}

＃div_1 {{

クリア：両方;

バックグラウンドカラー：＃ff3366;

}

＃div_2 {{

クリア：両方;

バックグラウンドカラー：＃6699ff;

}

＃div_3 {{

クリア：両方;

バックグラウンドカラー：＃cccc99;

}

＃div_4 {{

クリア：両方;

バックグラウンドカラー：＃00cc33;

}

</style>

//方法1：最初のdiv領域にテキストを追加する

関数addText（）{

// 1。テキストコンテンツを追加するノードを取得します

var dig_1node = document.getElementById（ "div_1"）;

// 2。テキストノードを作成します。 createTextNodeドキュメントオブジェクトのメソッド。一部のブラウザはサポートされていません。

var textnode = document.createTextNode（ "これは表示されませんか？"）;

// 3。追加するノードにappendChild（サブノードインスタンス）メソッドにテキストノードを追加する

div

}

//方法2：最初のDiv領域にボタンを追加する

関数addbutton（）{

// 1。テキストコンテンツを追加するノードを取得します

var dig_1node = document.getElementById（ "div_1"）;

// 2。ノードを作成します。ドキュメントオブジェクトのcreateElement（）

var anode = document.createelement（ "input"）;

// 3。指定されたオブジェクトに属性と属性値を追加します

//ANODE.SETATTRIBUTE 18 "、type"、 "button"）; //次のコードの効果と同じです

anode.type = "button";

anode.setattribute（ "value"、 "button"）;

anode.setattribute（ "onclick"、 "deletetext（ 'div_1'）"）;

//4。ApendChildのメソッド（追加するサブノードインスタンス）にテキストノードを追加するノードの下に追加する

div

}

//メソッド1を削除：2番目の領域のノードのサブノードを削除します

関数deleteText（nodeid）{

// 1。ノードを取得します

var dignode = document.getElementById（nodeid）;

// 2。サブノード、つまりテキストノードを取得します

var chilenode = divnode.childnodes [0];

// 3。削除、パラメーターを渡すtrueはその下のすべてのサブノードを削除します

//chilenode.removenode（）;

DivNode.RemoveChild（Chilenode）;

}

//メソッドを削除する2：要素を削除します

function deleteElement（）{

// 1。ノードを取得します

var dig_2node = document.getElementById（ "div_2"）;

// 2。親ノードを取得し、

var parentnode = div_2node。

// 3。削除

parentNode.RemoveChild（div_2node）;

}

// 改訂

function updateText（）{

// 1文字を変更するエリアのノードを取得します

var dig_3node = document.getElementById（ "div_3"）;

//2。最初のステップでサブノードコレクションを取得し、変更するノードを指定します

var Childnode = div_3node.childnodes [0];

// 3。テキストノードを作成します

var newNode = document.createTextNode（ "haha、私はあなたを置き換えました。"）;

//4。3つのステップを使用して、ステップ2のステップでノードを交換します

//CHILDNODE.REPLACENODE（NewNode）; //この方法はFirefoxとGoogleと互換性がありません

div

}

//クローン

function copynode（）{

// 1。4番目の地域ノードを取得します

var dig_1node = document.getElementById（ "div_1"）;

// 2。最初の領域ノードを取得します

var dig_4node = document.getElementById（ "div_4"）;

// 3。クローンの4番目のノードを介して新しいノードを取得します

var newnode = div

// 4。ステップ3の新しいノードを交換して、元の最初のノードを削除します

div

}

</script>

</head>

<body>

<div id = "div_2">これは2番目の領域です</div>

<div id = "div_3">これは3番目の領域です</div>

<div id = "div_4">これは4番目の領域です</div>

<hr />

<入力型= "ボタン" value = "最初の領域にテキストを追加" onclick = "addtext（）" />

<入力型= "ボタン"値= "最初の領域にボタンを追加" onclick = "addbutton（）" />

<hr />

<font size = "12px"> delete：</font>

<入力タイプ= "ボタン"値= "2番目の領域のテキストコンテンツを削除" onclight = "deleteText（ 'div_2'）" /> />

<入力型= "ボタン"値= "2番目の領域を削除" onclick = "deleteElement（）" />

<hr />

<入力型= "ボタン"値= "3番目の領域のコンテンツを変更" onclick = "updateText（）" /> />

<hr />

<font size = "12px"> cloning：</font>

<入力型= "button" value = "4番目の領域を最初の領域にクローニングしました" onclick = "copynode（）" /> />

</body>

</html>