1つの記事でJavaScript DOM操作の基本を学ぶ

1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念

DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、js を使用して HTML コードを操作し、要素を追加したり、要素を削除したりします。 。 。

要素を取得

(1) getElementByIdはIDで要素を取得します (2) getElementsByTagNameはタグ名(配列)で要素を取得します
(3)getElementsByClassNameはクラス別に要素セット(配列)を取得します。
(4) getElementsByNameはname属性を通じて要素コレクション(配列)を取得します。

概要: タグ名、ID、クラス、名前属性に基づいて要素を取得できます。 Id の結果は要素ですが、その他の結果はコレクションです。
ドキュメントオブジェクトは上記の4つをサポートしていますが、要素オブジェクトは
getElementsByTagNamegetElementsByClassName

要素の変更

(1) コンテンツを変更します。タグ内のテキストは、innerText プロパティを通じて読み取ったり設定したりできます。タグ内のテキストは、innerHTML プロパティを通じて読み取ったり設定したりできます。2 つの違いがあります。innerHTML は HTML のルールに従ってテキストを解析しますが、innerText は通常のテキスト コンテンツとして扱われます。

ここに画像の説明を挿入

(2)スタイルを変更する
a:xxx.style.yyy
b: xxx.classname = "..." (クラス属性の変更と同等)

ここに画像の説明を挿入

要素の追加と削除

(1)createElementは要素ノードを作成する
createElement("p")は段落を作成します(2) createTextNodeはテキストノードを作成します
createTextNode("text content") は、値 "text content" を持つテキストノードを作成します (3) appendChild は子ノードを追加します (4) removeChild は子ノードを削除します

ここに画像の説明を挿入
ここに画像の説明を挿入

ナビゲーション

ドキュメント: ルートノード
parentNode: 親ノードを取得する
childNodes: すべての子ノードを取得します
firstChild: 最初の子ノード
lastChild: 最後の子ノード

ここに画像の説明を挿入
ここに画像の説明を挿入

JavaScript DOM操作の基本に関するこの記事はこれで終わりです。JavaScript DOMの基本に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 一般的な JavaScript DOM 操作コードの概要
  • JavaScript 変数 Dom オブジェクトのすべてのプロパティ
  • js DOMイベントの一般的な操作例を詳しく解説
  • JavaScript での Dom 操作を理解する
  • Javascript DOM、ノード、要素取得の紹介

<<:  MySQL 5.7.21 解凍版インストール Navicat データベース操作ツールインストール

>>:  Nginx の一般的な設定とテクニックの概要

推薦する

CSS スティッキーフッター実装コード

この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

MySql8 WITH RECURSIVE 再帰クエリ親子コレクションメソッド

背景コメントに似た機能を開発する場合は、必要に応じてすべてのコメントのサブセットをクエリする必要があ...

Linux カーネル デバイス ドライバー カーネル時間管理に関する注意事項

/****************** * Linux カーネルの時間管理 ***********...

Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル

1. jmeterの基本イメージを構築するDockerfile は次のとおりです。 # Java 8...

Linux で複数の mysql5.7.19 (tar.gz) ファイルをインストールする方法

LinuxでのMySQL-5.7.19バージョンの初心者向けの最初のインストールについては、前の記事...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

JS がビデオ弾幕効果を実現

これを実現するには、ES6 モジュール開発とオブザーバー モードを使用します。オブザーバー パターン...

MySQL で重複時間を削除して時間差を計算する実装

目次必要:ドライブ:アイデア:成し遂げる:個人的には、実際の開発ではストアド プロシージャの使用はお...

MySQL データベースのインポートとエクスポートのデータ エラーの解決例の説明

データのエクスポートエラーを報告する 「secure_file_priv」のような変数を表示します。...

ラベルタグを使用してテキストをクリックしてラジオボタンを選択します

<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...

Vue2 キューブUI 時間セレクターの詳細な説明

目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...

値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...

MySQL の接続数が多すぎるエラーの原因と解決策

目次概要本日正午、開発およびテスト環境の MySQL サービスで接続数が多すぎるというエラーが報告さ...