JavaScript で DOM ノードインスタンスを作成、使用、削除する方法の詳細な説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript で DOM ノードインスタンスを作成、使用、削除する方法の詳細な説明

伊谢尔伦

Jul 20, 2017 pm 01:26 PM

javascript js 消去

ノードの作成

新しいノードを作成するには、createElement と createTextNode を使用できます。新規作成が完了したら、appendChild() を使用してノードを DOM ツリーに追加できます。

要素 P を作成し、innerHTML 属性を設定します

var myp = document.createElement(&#39;p&#39;); 
myp.innerHTML = &#39;yet another&#39;;

ログイン後にコピー

要素 P が構築された後、属性を自由に変更および追加できます

myp.style.border = &#39;2px dotted blue&#39;

ログイン後にコピー

次に、appendChild を使用して新しいノードを追加できますツリー内の DOM。

document.body.appendChild(myp)

ログイン後にコピー

DOM メソッドの使用
innerHTML メソッドを使用するのは非常に簡単で、純粋な dom メソッドを使用して上記の機能を実現できます。

新しいテキストノードを作成します(さらにもう1つ)
新しい段落を作成します
テキストノードを段落に追加します。
本文に段落を追加

// 创建p 
var myp = document.createElement(&#39;p&#39;); 
// 创建一个文本节点 
var myt = document.createTextNode(&#39;one more paragraph&#39;) 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement(&#39;strong&#39;); 
str.appendChild(document.createTextNode(&#39;bold&#39;)); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()

ログイン後にコピー

新しいノードを作成する別の方法は、cloneNode を使用してノードをコピーすることです。 cloneNode() はブール値パラメータを渡すことができます。 true の場合は子ノードを含むディープコピーであり、false の場合は自分自身のみをコピーします。

まずコピーする要素を取得します。

var el = document.getElementsByTagName(&#39;p&#39;)[1];//<p><em>second</em> paragraph</p>

ログイン後にコピー

まだディープコピーする必要はありません。

document.body.appendChild(el.cloneNode(false))

ログイン後にコピー

要素 p のみがコピーされたため、ページは変更されていないことがわかりました。以下同様の効果です。

document.body.appendChild(document.createElement(&#39;p&#39;));

ログイン後にコピー

ディープコピーを使用すると、以下のpを含むすべての子ノードがコピーされます。もちろんテキストノードやEM要素も含みます。

document.body.appendChild(el.cloneNode(true))

ログイン後にコピー

insertBefore()
末尾に要素を追加するにはappendChildを使用します。 insertBefore メソッドを使用すると、挿入された要素の位置をより正確に制御できます。

elementNode.insertBefore(new_node,existing_node)

ログイン後にコピー

Example

document.body.insertBefore( 
 document.createTextNode(&#39;boo!&#39;), 
 document.body.firstChild 
);

ログイン後にコピー

は、新しいテキストノードを作成し、それをbody要素の最初のノードとして使用することを意味します。
ノードの削除

DOMツリーからノードを削除するには、removeChild()を使用します。操作するHTMLを見てみましょう

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>

ログイン後にコピー

次の削除するコードを見てみましょう。 2 番目の段落

var myp = document.getElementsByTagName(&#39;p&#39;)[1]; 
var removed = document.body.removeChild(myp);

ログイン後にコピー

削除されたノードは削除されたノードです。削除されたノードは今後も使用できます。

replaceChild() メソッドを使用することもできます。この方法は、ノードを削除し、別のノードに置き換えます。最後のノード削除操作を実行した後の結果は次のようになります

<body> 
 <p class="opener">first paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>

ログイン後にコピー

replaceChild の使用法を見てみましょう。 2 番目の p

var replaced = document.body.replaceChild(removed, p);

ログイン後にコピー

を最後に削除されたノードに置き換えます。これは、removeChild が返すものと同じです。削除されたノードが置き換えられます。結果は

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <!-- and that&#39;s about it --> 
</body>

ログイン後にコピー

です

以上がJavaScript で DOM ノードインスタンスを作成、使用、削除する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7514

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

小紅書メモを削除する方法 Mar 21, 2024 pm 08:12 PM

小紅書メモを削除するにはどうすればよいですか? メモは小紅書アプリで編集できます。ほとんどのユーザーは小紅書メモの削除方法を知りません。次に、エディターがユーザーに小紅書メモの削除方法に関する写真とテキストを提供します。チュートリアル、興味のあるユーザーが来て、それを受講してください見てください！小紅書使い方チュートリアル小紅書メモの削除方法 1. まず小紅書アプリを開いてメインページに入り、右下隅の[自分]を選択して特別エリアに入ります; 2. 次に、マイエリアで、表示されているメモページをクリックします下の図で、削除したいメモを選択します; 3. メモページに入り、右上隅の [3 つの点] をクリックします; 4. 最後に、下部に機能バーが展開され、[削除] をクリックして完了します。

WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか? Apr 08, 2024 am 11:41 AM

1. まず、相手を永久にブロックして削除して永久に追加しないのは間違いで、ブロックして削除した後に相手を追加したい場合は、相手の同意だけが必要です。 2. ユーザーが誰かをブロックすると、相手はユーザーにメッセージを送信したり、ユーザーの友達サークルを表示したり、ユーザーと通話したりすることができなくなります。 3. ブロックとは、ユーザーの WeChat 連絡先リストから相手を削除することを意味するものではありません。 4. ユーザーが相手をブロックした後、ユーザーの WeChat 連絡先リストから相手を削除した場合、削除後に回復する方法はありません。 5. ユーザーが相手を再度友達として追加したい場合は、相手が同意してユーザーを再度追加する必要があります。

.000 が見つかったフォルダーは何ですか? found.000フォルダは削除できますか? Mar 13, 2024 pm 08:52 PM

コンピュータを日常的に使用していると、「found.000 ファイルが紛失または破損している」というエラーメッセージが表示されることがあります。この found.000 はどのフォルダですか?役に立たなくなったら削除してもらえますか？このファイルを知らない人が非常に多いので、found.000 フォルダーについて詳しく説明しましょう~ 1. found.000 フォルダーとは何ですか? 不正なシャットダウンによりコンピューターが部分的または完全に失われた場合、を見つけることができます。「found.000」という名前の特別なフォルダーと、その中に含まれる「.chk」拡張子を持つファイルは、システムパーティション内の指定されたディレクトリにあります。この「フォ」

Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか? Mar 21, 2024 pm 05:10 PM

人気のソーシャル電子商取引プラットフォームとして、Xiaohongshu は日常生活やショッピング体験を共有するために多くのユーザーを魅了してきました。場合によっては、私たちが誤って不適切なコンテンツを公開してしまうことがありますが、個人的なイメージをより良く維持したり、プラットフォームの規制に準拠したりするために、適時に削除する必要があります。 1.Xiaohongshu リリースを削除するにはどうすればよいですか? 1. Xiaohonshu アカウントにログインし、個人のホームページに入ります。 2. 個人ホームページの下部で、「My Creations」オプションを見つけてクリックして入力します。 3. 「My Creations」ページでは、メモやビデオなどを含む、公開されているすべてのコンテンツを確認できます。 4. 削除する必要があるコンテンツを見つけて、右側の「...」ボタンをクリックします。 5. ポップアップメニューで、[削除] オプションを選択します。 6. 削除を確認すると、個人ホームページおよび公開ページからコンテンツが削除されます。

hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか? Mar 15, 2024 am 09:49 AM

最近、多くのネチズンが編集者に「hiberfil.sys ファイルとは何ですか?」と尋ねました。 hiberfil.sys は C ドライブのスペースを多く消費し、削除される可能性がありますか?エディターは、hiberfil.sys ファイルを削除できることを通知します。以下で詳細を見てみましょう。 hiberfil.sys は Windows システムの隠しファイルであり、システム休止状態ファイルでもあります。通常、C ドライブのルートディレクトリに保存され、そのサイズはシステムに搭載されているメモリのサイズと同等です。このファイルはコンピュータが休止状態になっているときに使用され、リカバリ中に以前の状態にすばやく復元できるように、現在のシステムのメモリデータが含まれています。そのサイズはメモリ容量と等しいため、より多くのハードドライブスペースを占有する可能性があります。冬休み

WeChat ファイル転送アシスタントを完全に削除する方法_WeChat ファイル転送アシスタントを終了する方法の紹介 Mar 20, 2024 pm 08:31 PM

WeChat のファイル転送アシスタントはすべてのユーザーが利用でき、何かを記録するためのメモとして使用するユーザーもいます。では、WeChat ファイル転送アシスタントを完全に削除するにはどうすればよいでしょうか?以下で詳しくご紹介していきます。 WeChat ファイル転送アシスタントを完全に削除するには? 答え: [WeChat]-[ファイル転送アシスタントを長押し]-[このチャットを削除]。具体的な手順: 1. まず WeChat ソフトウェアを開き、ホームページに入った後、[ファイル転送アシスタント] を見つけて長押しします; 2. その後、ポップアップが未読としてマークされ、チャットを上部に固定して、次のことを行いますチャットを表示しない、チャットを削除する場合は、ここで[このチャットを削除]をクリックします。

TikTokのチャット履歴を完全に削除する方法 May 07, 2024 am 11:14 AM

1. Douyin アプリを開き、インターフェイスの下部にある [メッセージ] をクリックし、削除する必要があるチャット会話エントリをクリックします。 2. 任意のチャット記録を長押しし、[複数選択]をクリックし、削除したいチャット記録にチェックを入れます。 3. 右下隅の [削除] ボタンをクリックし、ポップアップウィンドウで [削除の確認] を選択して、これらのレコードを完全に削除します。

TikTokで他の人にファイルを送信するにはどうすればよいですか?他の人に送信したファイルを削除するにはどうすればよいですか? Mar 22, 2024 am 08:30 AM

Douyin では、ユーザーは自分の人生の詳細や才能を共有するだけでなく、他のユーザーと交流することもできます。このプロセスでは、写真やビデオなどのファイルを他のユーザーに送信する必要がある場合があります。では、Douyin で他の人にファイルを送信するにはどうすればよいでしょうか? 1.Douyin で他の人にファイルを送信するにはどうすればよいですか? 1. Douyin を開き、ファイルを送信するチャットインターフェイスに入ります。 2. チャットインターフェイスの「+」記号をクリックし、「ファイル」を選択します。 3. ファイルオプションで、写真、ビデオ、オーディオ、その他のファイルの送信を選択できます。送信したいファイルを選択後、「送信」をクリックします。 4. 相手がファイルを受け入れるまで待ちます。相手がそれを受け入れると、ファイルは正常に転送されます。 2.Douyin で他の人に送信したファイルを削除するにはどうすればよいですか? 1. Douyin を開き、送信したテキストを入力します。

See all articles

JavaScript で DOM ノードインスタンスを作成、使用、削除する方法の詳細な説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

JavaScript で DOM ノード インスタンスを作成、使用、削除する方法の詳細な説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

JavaScript で DOM ノードインスタンスを作成、使用、削除する方法の詳細な説明