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 の一般的な設定とテクニックの概要

推薦する

MySQL テーブルを削除する際の I/O エラーの原因分析と解決方法

問題現象最近、sysbench を使用して MySQL をテストしました。テストに長い時間がかかった...

moment.jsの時間と日付の処理の詳細な説明

月曜日から日曜日の時間形式の変換(Y --- 年 M --- 月 D--- 日) : : : : :...

startup.bat をダブルクリックすると Tomcat がクラッシュする問題の解決方法の詳細な説明

Tomcat を学習したばかりのプログラマーにとって、これはよくある間違いです。 1. 環境変数の問...

VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

インストール前の作業: VMware Workstation がインストールされていることを確認し、...

MySQL binlog ログを開く方法

binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...

よく使われる3つのMySQLデータ型

MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...

Dockerで最もよく使われるイメージコマンドとコンテナコマンドの詳細な説明

この記事では、Docker の使用で最もよく使用されるイメージ コマンドとコンテナ コマンドを一覧表...

ツリー チャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...

よく使われるシングルページアプリケーションウェブサイト共有

CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...

ノードにおけるhttpモジュールの使用と実行プロセス

ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

CSSはヒントボックス、バブルボックス、三角形を作成します

場合によっては、ページにプロンプ​​ト ボックスやバブル ボックスが必要になることがあります。CSS...

Mysqlのインポートとエクスポート時に発生する問題の解決

背景すべての業務を Docker の運用管理に移行してから、一連の落とし穴に遭遇しましたが、今回は ...

CSS オーバーフローラップの新しいプロパティ値をどこでも使用

1.まず、overflow-wrap属性を理解する CSS のoverflow-wrapプロパティは...