Web ページのノードを追加、削除、変更、確認するための JavaScript の使用例

この記事の例では、Web ページノードを追加、削除、変更、確認するための JavaScript の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. 基本概念

この部分はいわゆる「HTML DOM」です。いわゆる HTML DOM は、Web ページの構成の基本的な規則です。

つまり、すべての Web ページは、... というルールに従って記述され、そのルールに従って読み込まれる必要があります。

いわゆる「Web ページノード」は、一般的な説明では「DOM ノード」とも呼ばれます。たとえば、html ノードの下のコンテンツは、の間にあるすべてのコンテンツです。 body ノードの下のコンテンツはの間のすべてです。

HTML DOM は次のように規定されています: 1. ドキュメント全体がドキュメントノードです。 2. 各 HTML タグ (単なるタグではなく、

などの HTML タグを意味します) は次のように規定されています。要素ノード 3. HTML 要素に含まれるテキストはテキストノードです。 4. 各 HTML 属性は属性ノード
です。たとえば、次の DOM ノードツリーとしてページを描画できます:

HTML DOM の正式な定義は次のとおりです。HTML DOM は HTML Document Object Model の略称であり、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 ページに次のコードを直接記述するだけです。具体的なコードは次のとおりであり、以下で部分的に説明します。

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

        jsdivnode
<スクリプトタイプ="text/javascript">
変数 i = 0;

function createnode() {
    if (i         私 ;
        var オプション = document.createElement("オプション");
        オプション.値 = i;
        option.innerHTML = "ノード" i.toString();
        document.getElementById("数値").appendChild(オプション);

        var p = document.createElement("p");
        p.innerHTML = "ノード" i.toString();
        document.getElementById("d").appendChild(p);
    } else
        alert("爷行行好了，太多节点，臣妾做不到啊~");
}

関数 Removenode() {
    if (i > 0) {
        私 - ;
        var s = document.getElementById("数値");
        s.removeChild(s.lastChild);
        var d = document.getElementById("d");
        d.removeChild(d.lastChild);
    } else
        alert("没有节点，删个毛線啊~");

    /*var ps = d.getElementsByTagName("p");*/
    /*document.getElementById("d").removeChild(ps[9]); */
}

関数 replacenode() {
    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").value - 1]);
    } else
        alert("没有节点，替换个毛線啊~");
}

1、节点

复制代码代码如下:

「」

2.
ノード

コードをコピー

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