Latest web development tutorials
×

JavaScript コース

JavaScript コース JavaScript 簡単な紹介 JavaScript 使用法 JavaScript 輸出 JavaScript 文法 JavaScript ステートメント JavaScript ノート JavaScript 変数 JavaScript データの種類 JavaScript オブジェクト JavaScript 関数 JavaScript スコープ JavaScript イベント JavaScript 文字列 JavaScript 演算子 JavaScript 比較します JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 型変換 JavaScript 正規表現 JavaScript エラー JavaScript デバッギング JavaScript 可変リフト JavaScript strictモード JavaScript 不適正使用 JavaScript フォーム認証 JavaScript 予約済みキーワード JavaScript JSON JavaScript void JavaScript コードの仕様

JS 関数

JavaScript 関数定義 JavaScript 関数の引数 JavaScript 関数呼び出し JavaScript クロージャ

JS HTML DOM

DOM 簡単な紹介 DOM HTML DOM CSS DOM イベント DOM EventListener DOM 要素

JS 応用チュートリアル

JavaScript オブジェクト JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp オブジェクト

JS ブラウザ BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript ポップ JavaScript 時間指定イベント JavaScript Cookies

JS 倉庫

JavaScript 倉庫 JavaScript テスト jQuery JavaScript テスト Prototype

JS 例

JavaScript 例 JavaScript Objectインスタンス JavaScript ブラウザのオブジェクトインスタンス JavaScript HTML DOM 例 JavaScript サマリー

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト

JavaScriptをHTML DOM要素

新しいHTML要素を作成します。


新しいHTML要素を作成します。

HTML DOMに新しい要素を追加するには、最初の要素(エレメントノード)を作成し、既存の要素に要素を追加する必要があります。

<DIVのID = "DIV1">
<Pのid = "p1が">これは段落です。 </ P>
<P idは= "p2の">これは別の段落です。 </ P>
</ DIV>

<スクリプト>
varパラ=のdocument.createElement( "P");
varの各ノード= document.createTextNode( "これは新しい段落です。");
para.appendChild(ノード)。

var要素=のdocument.getElementById( "DIV1");
element.appendChildを(パラ);
</スクリプト>

»をお試しください


分析の例:

このコードは、新しい<p>要素を作成します。

var para=document.createElement("p");

<p>要素にテキストを追加するには、まずテキストノードを作成する必要があります。 このコードは、テキストノードを作成します。

varの各ノード= document.createTextNode( "これは新しい段落です。");

その後、<p>要素には、このテキストノードを追加する必要があります。

para.appendChild(ノード)。

最後に、既存の要素に、この新しい要素を追加する必要があります。

既存の要素を見つけるためのコード:

var要素=のdocument.getElementById( "DIV1");

既存の要素の後に次のコードでは、新しい要素を追加します。

element.appendChildを(パラ);


既存のHTML要素を削除します

次のコードは、要素を削除する方法を示しています。

<DIVのID = "DIV1">
<Pのid = "p1が">これは段落です。 </ P>
<P idは= "p2の">これは別の段落です。 </ P>
</ DIV>

<スクリプト>
VARの親=のdocument.getElementById( "DIV1");
VARの子=のdocument.getElementById( "P1");
parent.removeChild(子)。
</スクリプト>


»をお試しください


分析の例

<div>要素の子ノードが2つ(2つの<p>要素)を持っ含むHTML文書:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

ID = "div1を"要素を検索します。

VARの親=のdocument.getElementById( "DIV1");

ID = "P1" <p>要素を探します:

var child=document.getElementById("p1");

親要素のサブ要素から削除します。

parent.removeChild(child);

ランプ あなたは親要素を参照することなく要素を削除することができれば、それは素晴らしいことです。
しかし、残念ながら。 あなたが削除されるために知っておく必要があるDOM要素だけでなく、その親要素。

これは一般的なソリューションです:削除する子要素を見つけ、その後はparentNode親要素を見つけるために、そのプロパティを使用します。

var child=document.getElementById("p1");
child.parentNode.removeChild(child);


HTML DOMチュートリアル

私たちのJavaScriptのチュートリアルのHTML DOMの一部では、あなたが学びました:

  • HTML要素(innerHTMLプロパティ)の内容を変更する方法
  • HTML要素(CSS)のスタイルを変更する方法
  • HTML DOMのイベントに反応する方法
  • どのように私は、HTML要素を追加または削除しますか

あなたがHTML DOMの知識にアクセスするにはJavaScriptを使用してについての詳細を知りたい場合は、当社の完全ご覧くださいHTML DOMチュートリアルを