JSでのノード操作例
この記事では、主に JS でのノード操作の例をコードの形で紹介します。お役に立てれば幸いです。
ノードを追加、削除、変更、確認する
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1,.p2,.p3,.p4{ width: 300px; height: 100px; }
.p1{ background-color: green; }
.p2{ background-color: yellow; }
.p3{ background-color: rebeccapurple; }
.p4{ background-color: deeppink; }
</style></head><body><p class="p1">
<button onclick="add()">add</button>
hello p1</p><p class="p2">
<button onclick="del()">del</button>
hello p2</p><p class="p3">
<button onclick="change()">change</button>
<p>hello p3</p></p><p class="p4">hello p4</p><script>###############增加节点###################### function change() {
var img=document.createElement("img");//<img src="">
//img.setAttribute("src","meinv.jpg");
img.src="meinv.jpg"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("p3")[0];
father.replaceChild(img,ele)
}
###############修改节点###################### function add() {
var ele=document.createElement("p");//<p></p>
ele.innerHTML="<h1>hello p</h1>"; //ele.innerText="<h1>hello p</h1>";
ele.style.color="red";
ele.style.fontSize="10px"; var father=document.getElementsByClassName("p1")[0];
father.appendChild(ele)
}
###############删除节点###################### function del() {
var father=document.getElementsByClassName("p1")[0]; var son=father.getElementsByTagName("p")[0];
father.removeChild(son)
}</script></body></html>JSを使用してイベントをバインドする2つの方法
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p onclick="func(this)">hello</p><p>hello p</p><script>
// 绑定事件方式一
function func(self) {
console.log(self)
alert(1234)
} // 绑定事件方式二
var ele=document.getElementsByTagName("p")[0]
ele.onclick=function () {
console.log(ele);
console.log(this);// alert(6666)
}</script></body></html>JSのクラス属性
<script>
var ele=document.getElementsByTagName("p")[0];
# class的名称
console.log(ele.className);
# 以列表返回class中值
console.log(ele.classList[0]);
# 以列表返回class中值
console.log(ele.classList[1]);
# 向列表中增加元素
ele.classList.add("hide")
console.log(ele.className);</script>Eventオブジェクト: イベント情報をカプセル化します
イベントの伝播を防ぐために使用できます
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><form action="" id="form1">
<input type="text" name="username">
<input type="submit" value="提交"></form><script>
var ele=document.getElementById("form1");
ele.onsubmit=function (e) {// console.log("hello")
alert(1234); // 方式一 返回false
return false
// 方式二 preventDefault函数
//e.preventDefault()
}</script></body></html>関連推奨事項:
dom ノードでのネイティブ JavaScript 操作の概要
以上がJSでのノード操作例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7638
15
1391
52
90
11
32
150
PyCharm の使用法チュートリアル: 操作の実行方法を詳しく説明します
Feb 26, 2024 pm 05:51 PM
PyCharm は非常に人気のある Python 統合開発環境 (IDE) であり、Python 開発をより効率的かつ便利にするための豊富な機能とツールを提供します。この記事では、PyCharm の基本的な操作方法を紹介し、読者がすぐに使い始めてツールの操作に習熟できるように、具体的なコード例を示します。 1. PyCharm をダウンロードしてインストールします。 まず、PyCharm 公式 Web サイト (https://www.jetbrains.com/pyc) にアクセスする必要があります。
sudo とは何ですか?なぜ重要ですか?
Feb 21, 2024 pm 07:01 PM
sudo (スーパーユーザー実行) は、一般ユーザーが root 権限で特定のコマンドを実行できるようにする、Linux および Unix システムの重要なコマンドです。 sudo の機能は主に次の側面に反映されています。 権限制御の提供: sudo は、ユーザーにスーパーユーザー権限を一時的に取得することを許可することで、システム リソースと機密性の高い操作を厳密に制御します。一般のユーザーは、必要な場合にのみ sudo を介して一時的な権限を取得できるため、常にスーパーユーザーとしてログインする必要はありません。セキュリティの向上: sudo を使用すると、日常的な操作中に root アカウントの使用を回避できます。すべての操作に root アカウントを使用すると、誤った操作や不注意な操作には完全な権限が与えられるため、予期しないシステムの損傷につながる可能性があります。そして
Linux Deployの操作手順と注意事項
Mar 14, 2024 pm 03:03 PM
LinuxDeploy の操作手順と注意事項 LinuxDeploy は、ユーザーが Android デバイスにさまざまな Linux ディストリビューションを迅速に展開できるようにする強力なツールで、ユーザーはモバイル デバイスで完全な Linux システムを体験できます。この記事では、LinuxDeploy の操作手順と注意事項を詳しく紹介し、読者がこのツールをより効果的に使用できるように、具体的なコード例を示します。操作手順: Linux のインストールDeploy: まず、インストールします
Win10 起動パスワードの F2 キーを押すのを忘れた場合の対処方法
Feb 28, 2024 am 08:31 AM
おそらく多くのユーザーは、自宅に未使用のコンピュータを複数台持っており、長期間使用していなかったためにパワーオン パスワードを完全に忘れてしまったため、パスワードを忘れた場合の対処方法を知りたいと考えています。それでは、一緒に見てみましょう。 win10 起動パスワードの F2 キーを押し忘れた場合の対処方法 1. コンピューターの電源ボタンを押し、コンピューターの電源を入れるときに F2 キーを押します (コンピューターのブランドによって、BIOS に入るボタンが異なります)。 2. BIOS インターフェイスで、セキュリティ オプションを見つけます (コンピューターのブランドによって場所が異なる場合があります)。通常は上部の設定メニューにあります。 3. 次に、「SupervisorPassword」オプションを見つけてクリックします。 4. この時点で、ユーザーは自分のパスワードを確認できると同時に、その横にある [有効] を見つけて [無効] に切り替えることができます。
Huawei Mate60 Proのスクリーンショット操作手順の共有
Mar 23, 2024 am 11:15 AM
スマートフォンの普及に伴い、スクリーンショット機能は携帯電話を日常的に使用する上で必須のスキルの 1 つになりました。 Huaweiの主力携帯電話の1つであるHuawei Mate60Proのスクリーンショット機能は、当然のことながらユーザーの注目を集めています。今日は、誰もがより便利にスクリーンショットを撮れるように、Huawei Mate60Pro携帯電話のスクリーンショットの操作手順を共有します。まず、Huawei Mate60Pro携帯電話はさまざまなスクリーンショット方法を提供しており、個人の習慣に応じて自分に合った方法を選択できます。以下は、一般的に使用されるいくつかのインターセプトの詳細な紹介です。
PHP PDO チュートリアル: 基本から習得までの上級ガイド
Feb 19, 2024 pm 06:30 PM
1. PDO の概要 PDO は、データベースを操作するためのオブジェクト指向の方法を提供する PHP の拡張ライブラリです。 PDO は、Mysql、postgresql、oracle、SQLServer などのさまざまなデータベースをサポートします。 PDO を使用すると、開発者は統合 API を使用してさまざまなデータベースを操作できるため、さまざまなデータベースを簡単に切り替えることができます。 2. PDO はデータベースに接続します PDO を使用してデータベースに接続するには、まず PDO オブジェクトを作成する必要があります。 PDO オブジェクトのコンストラクターは、データベース タイプ、ホスト名、データベース ユーザー名、およびパスワードの 3 つのパラメーターを受け取ります。たとえば、次のコードは、mysql データベースに接続するオブジェクトを作成します。 $dsn="mysq
Golang でのポインター変換のベスト プラクティスの例を学ぶ
Feb 24, 2024 pm 03:51 PM
Golang は、さまざまなアプリケーションやサービスの開発に使用できる強力で効率的なプログラミング言語です。 Golang では、ポインタは非常に重要な概念であり、データをより柔軟かつ効率的に操作するのに役立ちます。ポインタ変換とは、異なる型間のポインタ操作のプロセスを指します。この記事では、具体的な例を使用して、Golang におけるポインタ変換のベスト プラクティスを学びます。 1. 基本概念 Golang では、各変数にはアドレスがあり、アドレスはメモリ内の変数の位置です。
PHP 文字列操作: スペースを効果的に削除する実用的な方法
Mar 24, 2024 am 11:45 AM
PHP 文字列操作: スペースを効果的に削除する実用的な方法 PHP 開発では、文字列からスペースを削除する必要がある状況によく遭遇します。スペースを削除すると文字列がきれいになり、その後のデータ処理と表示が容易になります。この記事では、スペースを削除するための効果的かつ実践的な方法をいくつか紹介し、具体的なコード例を添付します。方法1: PHP組み込み関数trim()を使用する PHP組み込み関数trim()を使用すると、文字列の両端のスペース(スペース、タブ、改行などを含む)を削除でき、非常に便利で簡単です。使用します。
