この記事では、WebページノードへのJavaScriptの使用について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
1。基本概念
この部分は「HTML DOM」と呼ばれます。いわゆるHTML DOMは、Webページのロードルールであり、Webページの基本的な式です。
つまり、すべてのWebページは、<html> <body> </body> </html> ...のルールに従って記述する必要があります。また、そのようなルールに従ってロードされます。
いわゆる「Webページノード」も「Domノード」の一般的な説明です。たとえば、HTMLノードの下のコンテンツは<html> </html>の間のすべてのコンテンツであり、ボディノードの下のコンテンツは<body> </body>の間のすべてのコンテンツです。
HTML DOMは次のように規定しています。1。ドキュメント全体はドキュメントノードです。 2。各htmlタグ（<body> <table>およびその他のhtmlタグを意味する<html>タグではなく、他のHTMLタグ）は要素ノードです。 3。HTML要素に含まれるテキストはテキストノードです。 4.各HTML属性は属性ノードです
たとえば、次のDOMノードツリーにページを描画できます。
HTML DOMの公式定義は次のとおりです。HTMLDOMはHTMLドキュメントオブジェクトモデルの略語であり、HTML DOMはHTML/XHTMLに特別に適用されるドキュメントオブジェクトモデルです。ソフトウェア開発に精通している人は、HTML DomをWebページAPIとして理解できます。 Webページの各要素をオブジェクトとして扱うため、Webページの要素をコンピューター言語で取得または編集することもできます。たとえば、JavaScriptはHTML DOMを使用してWebページを動的に変更できます。
JavaScriptを使用すると、これらのDOMノードのWebページノードの追加、削除、変更、および検索を簡単に制御できます。
2。基本的な目的
JavaScriptを使用して、Webページのノードを追加、削除、変更、確認します。 Webページで：
1.「ノードの追加」ボタン。「交換ボタン」に関連付けられたドロップダウンメニューにノードオプションを追加します。 Webページに9つのノードがある場合、追加およびポップアップ警告は許可されません。
2。「[交換]ボタン」に関連付けられたドロップダウンメニューのノードオプションを削減しながら、[最後のノードを削除]ボタンを使用します。
3.「ノードコンテンツの交換」ボタン、最初に操作するノードを選択し、次に交換するコンテンツを入力すると、対応するノードが交換されます。
4. Webページにノードがない場合、削除または交換は許可されず、ポップアップ警告が与えられます。
3。生産プロセス
環境を構成せずに、Webページに次のコードを書くだけです。特定のコードは次のとおりであり、次の部分を部分的に説明します。
次のようにコードコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> jsdivnode </title>
<script type = "text/javascript">
var i = 0;
関数createNode（）{
if（i <9）{
i ++;
var option = document.createelement（ "option"）;
option.value = i;
option.innerhtml = "node" + i.toString（）;
document.getElementById（ "number"）。appentchild（option）;
var p = document.createelement（ "p"）;
p.innerhtml = "node" + i.toString（）;
document.getElementById（ "d"）。appendChild（p）;
} それ以外
アラート（「大丈夫、ノードが多すぎる、できない〜」）;
}
関数removenode（）{
if（i> 0）{
私 - ;
var s = document.getElementById（ "number"）;
S.RemoveChild（S.Lastchild）;
var d = document.getElementById（ "d"）;
D.RemoveChild（D.Lastchild）;
} それ以外
アラート（ "ノードなし、ヤーン〜"を削除します "）;
/*var ps = d.getelementsbytagname（ "p"）;*/
/* document.getElementById("d").RemoveChild(ps [9]）; */
}
function facternode（）{
if（i> 0）{
var d = document.getElementById（ "d"）;
var p = document.createelement（ "p"）;
p.innerhtml = document.getElementById（ "text"）。value;
var ps = d.getelementsbytagname（ "p"）
D.ReplaceChild（P、PS [document.getElementById（ "number"）。値-1]）;
} それ以外
アラート（ "ノードなし、yarn〜"を交換します "）;
}
</script>
</head>
<body>
<入力型= "button" value = "create node" onclick = "createNode（）" />
<入力型= "button" value = "最後のノードを削除" onclick = "removenode（）" />
<id = "number"> </select>を選択します
<入力型= "text" id = "text" />
<入力型= "button" value = "fallingenode content" onclick = "facterenode（）" />
<div id = "d">
</div>
</body>
</html>
1。<body>ノード
次のようにコードをコピーします：<body>
<！ - ボタンx2、両方のボタンには、対応する関数を指すオンクリックアクションがあります - >
<入力型= "button" value = "create node" onclick = "createNode（）" />
<入力型= "button" value = "最後のノードを削除" onclick = "removenode（）" />
<！ - <オプション>のないドロップダウンメニューは、createNode（）ノードによって同時に追加されます。 - >
<id = "number"> </select>を選択します
<！ - 入力ボックスx1、ID、fallingenode（）の設定に注意して、このテキストボックスの値を取得します - >
<入力型= "text" id = "text" />
<！ - ボタンx2、ボタンx2->と同じボタンx1
<入力型= "button" value = "fallingenode content" onclick = "facterenode（）" />
<！ - <p>の親ノードのように、この<div>ノードのすべての子供が追加されるように、何もない空のレイヤー
<div id = "d">
</div>
</body>
2。<head>ノード
次のようにコードをコピーします：<head>
<！ - Webページで使用されるエンコーディングとタイトルは重要ではありません。キーは次のJSスクリプトパーツです - >
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> jsdivnode </title>
<script type = "text/javascript">
/*現在のWebページにあるノードの数のグローバル変数を記録*/
var i = 0;
/*以下に3つの関数があります。ボタンがクリックされると、*/
関数createNode（）{
/*Webページに9つ以下のノードがある場合、それは機能します。それ以外の場合はポップアップウィンドウ*/
if（i <9）{
/*各レコードにもう1つのノードを追加するグローバル変数i+1*/
i ++;
/*オプションノードを作成すると、そのポインター名もオプションです*/
var option = document.createelement（ "option"）;
/*作成されたオプションノードの値属性を宣言します。つまり、i = 1の場合、<オプション値= 1>> </option>などの子ノードがあります。 */
/*一部のWebページによると、setattribute（）メソッドを使用して属性を設定していますが、個人的に練習することは簡単ではありません*/
option.value = i;
/*オプションノードの下にテキストを設定します。この声明の後、子ノードは<オプション値= 1> node1 </option>*になります。
option.innerhtml = "node" + i.toString（）;
/*<Select>親ノードのIDは番号です。このステートメントでは、<オプション値= 1> node1 </option>*/が<select> </select>の親ノードに追加されることが必要です
document.getElementById（ "number"）。appentchild（option）;
/*原則は上記と同じです。 <p>子ノードを<div>親ノードの下に追加し、<p>子ノードの下のテキスト値はnode1*/
var p = document.createelement（ "p"）;
p.innerhtml = "node" + i.toString（）;
document.getElementById（ "d"）。appendChild（p）;
} それ以外
アラート（「大丈夫、ノードが多すぎる、できない〜」）;
}
関数removenode（）{
/*Webページに0以上のノードがある場合、つまり、ノードがあり、ポップアップウィンドウのみがあります
if（i> 0）{
/*ノード削減ごとに、現在のWebページのグローバル変数I-1が記録されます。
私 - ;
/*<select>の親ノードにポインターを定義します*/
var s = document.getElementById（ "number"）;
/*<select>の親ノードの下の最後の子ノードを削除します。つまり、<オプション>。最初のものを削除する場合、パラメーターはS.Firstchild*/になります
S.RemoveChild（S.Lastchild）;
/*上記と同じ原則、<div>層の下の最後の子ノードを削除します*/
var d = document.getElementById（ "d"）;
D.RemoveChild（D.Lastchild）;
/*8th <p>を<div>で削除する場合は、次のようにしてください*/
/*psは<p>子ノードセットへのポインターです*/
/*var ps = d.getelementsbytagname（ "p"）;*/
/* document.getElementById("d").RemoveChild(ps [9]）; */
} それ以外
アラート（ "ノードなし、ヤーン〜"を削除します "）;
}
function facternode（）{
/*Webページに0以上のノードがある場合、つまり、ノードがあり、ポップアップウィンドウのみがあります
if（i> 0）{
/*親ノードへのポインタを定義するd*/
var d = document.getElementById（ "d"）;
/*a <p> </p> nodeを作成*/
var p = document.createelement（ "p"）;
/*テキストボックスに入力されたコンテンツを取得し、<p> </p> node*/に配置します*/
p.innerhtml = document.getElementById（ "text"）。value;
/*psは、<p>子ノードセットと<div>親ノードの下の子ノードグループへのポインターです*/
var ps = d.getelementsbytagname（ "p"）
/*作成したノードを、<div>の下のnth <p>子ノードを置き換えます。ここで、nはドロップダウンリストで選択されている値-1です。 -1の理由は、子ノードセットのカウントと子供のグループが0から始まり、人間の数が1から始まることです。 */
D.ReplaceChild（P、PS [document.getElementById（ "number"）。値-1]）;
} それ以外
アラート（ "ノードなし、yarn〜"を交換します "）;
}
</script>
</head>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。