JavaScript HTML DOM要素(ノード)が追加され、編集、操作例の分析を削除します。
4169 ワード
本明細書の例は、JavaScript HTML DOM要素(ノード)の新規作成、編集、削除操作を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
createElement、createText Node、apendChild、insertBefore、removeChild、replace Child
createElement
以下のコードは
テキストノードを
テキストノードを
insertBefore(新元素を開始位置に追加)
レモveChild
要素を削除するには、親要素を知る必要があります。
replacceChild
HTML DOM中の要素をreplacceChild()法を用いて置換した。

関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
さらに、JavaScriptに関する内容については、当駅のテーマを見ることができます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、および「JavaScriptはアルゴリズムと技術の総括を遍歴します。」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。
createElement、createText Node、apendChild、insertBefore、removeChild、replace Child
createElement
以下のコードは
要素を作成するためのものです。
var para = document.createElement("p");
createText Nodeテキストノードを
要素に追加します。
var node = document.createTextNode(" 。");
appendChild(新しい元素をテールに追加するために使う)テキストノードを
要素に追加します。
para.appendChild(node);
以上の3つの結合事例:
<div id="div1">
<p id="p1"> 。</p>
<p id="p2"> 。</p>
</div>
<script>
var para = document.createElement("p"); // p
var node = document.createTextNode(" 。"); //
para.appendChild(node); // p ( )
var element = document.getElementById("div1");
element.appendChild(para); //
</script>
実行結果: 
insertBefore(新元素を開始位置に追加)
<div id="div1">
<p id="p1"> 。</p>
<p id="p2"> 。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode(" 。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
実行結果: 
レモveChild
要素を削除するには、親要素を知る必要があります。
<div id="div1">
<p id="p1"> 。</p>
<p id="p2"> 。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
実行結果:
replacceChild
HTML DOM中の要素をreplacceChild()法を用いて置換した。
<div id="div1">
<p id="p1"> 。</p>
<p id="p2"> 。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode(" 。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
実行結果:
関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
さらに、JavaScriptに関する内容については、当駅のテーマを見ることができます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、および「JavaScriptはアルゴリズムと技術の総括を遍歴します。」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。