js で一般的に使用される DOM 操作は何ですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js で一般的に使用される DOM 操作は何ですか?

零下一度

Jun 24, 2017 pm 02:33 PM

javascriptjsよく使われる操作するきちんとした

. DOM 操作の実用的で一般的に使用される部分が選択されており、実用的だが明らかに互換性のある部分は省略されています
2. DOM 属性とメソッドの型属性は完全に正確ではない可能性があります
3.ロゴ(主にie8-9あたり)

ノードタイプ

( DocumentType)ドキュメントフラグメントノード(DocumentFragment)DTD宣言ノード(記法)ノードタイプ属性

ノードタイプ	ノード値
ラベルノード(要素)	1
属性ノード(At tr)	1 エンティティノード(Entity)
10
11
12

説明
nodeType	ノードタイプ
nodeName	ノード名
nodeValue	ノード値
子ノード	子ノード
親ノード	親ノード

ownerDocument

ドキュメントノードnextSiblingfirstChild lastChild文書型属性

previousSibling	前のノード
次のノード
最初の子ノード
最後の子ノード

説明
documentElement	htmlタグ
head [互換性が不十分]	ヘッドタグ
ボディ	ボディタグ
URL	現在のページのURL
参照者	ソースページのURL

ドメイン[変更可能]

ページのドメイン名クッキーtitleactiveElementdocumentModereadyStatedoctypescriptsformschildrendefaultView命令getElementById()getElementsByName()getElementsByTagName()getElementsByClassName()querySelector()querySelectorAll()

画像	すべての画像コレクション
Cookie情報
ページタイトル
現在のフォーカス要素
ドキュメントモード
文書ステータス
文書タイプ宣言
Scriptコレクション
formタグコレクション
要素タイプの子ノードのセット
document関連するウィンドウオブジェクト
	メソッド

対応するIDを持つ要素を返します
対応する名前を持つ要素のセットを返します
対応するタグ名を持つ要素のセットを返します
指定されたクラス名を持つ要素のセットを返します
セレクターに一致する最初の要素を返します

セレクターに一致する要素のセットを返しますcreateTextNode()createAttribut e()createComment()createDocumentFragment()matchesSelector() [互換性が不十分、プレフィックスが必要] write() [出力後にカーソルがラップしない] writeIn()[出力後にカーソルがラップする]implementation.hasFeature(機能, バージョン)要素タイププロパティ

createElement()	要素ノードを作成
テキストノードを作成
属性の作成node
コメントの作成node
空のDocumentFragmentオブジェクトの作成
セレクターが要素と一致するかどうか
ドキュメントテキストの書き込み
ドキュメントテキストの書き込み
機能モニタリング

説明
id	id
className	クラス名
タイトル	タイトル
スタイル	要素の style 属性を設定または返します
innerHTML	要素の内容を設定または返します

outerHTML[それ自体を含む]

要素の内容を設定または返しますcontentEditableisContentEditablechildElementCountfirstElementChildlastElementChi ldpreviousElementSiblingnextElementSibling

textContent [ie-innerText]	テキストの内容を設定または返します
要素の内容の編集ステータスを設定または返します
編集可能かどうか
の数子要素ノード
最初の子要素ノード
最後の子要素ノード
前の要素ノード
次の要素ノード

isEqualNode(ノード) 2 つの要素が等しいかどうかブール値isSupported(feature, version) 機能がサポートされているかどうかブール値

メソッド	手順	戻る
focus()	フォーカスを設定
blur()	フォーカスを失った
appendChild(node)	at	子ノードリストの後に新しいノードを挿入
insertBefore(node, Reference Node)	参照ノードの前にノードを挿入	ノードを挿入
removeChild(node)	ノードの削除	削除されたノード
replaceChild(ノード,置換されたノード)	ノードの置換	置換されたノード
cloneNode(ブール値)	コピーノード	クローンノード
importNode(ノード, ブール値)	を入手ドキュメント A からノードを取得し、それをドキュメント B にインポートします (cloneNode メソッドと同様)
には (ノード) が含まれます	ノードが呼び出し元のノードの子であるかどうか	ブール値
hasFocus ()	フォーカスがあるかどうか	Boolean
hasChildNodes()	子ノードがあるかどうか	Boolean
isDefaultNamespace(url)	名前空間が指定されているかどうか	Boolean

属性タイプ

プロパティ説明name属性名value属性値isIdID型かどうか指定された属性が指定されているかどうか length 属性の長さ属性属性コレクション

メソッド説明getAttribute()属性値を取得するgetAttributeNode()属性を取得するノード setAttribute() 属性値を設定 setAttributeNode() 属性ノードを設定 removeAttribute() 属性を削除 removeAttribute Node()[つまりサポートされていません]属性ノードの削除hasAttribute()指定された属性が存在するかhasAttributes()属性が存在するか

テキストタイプ

メソッド説明appendData(text)ノードの末尾にテキストを追加しますdeleteData(position, amount)指定された位置から始まるn文字を削除しますinsertData(position, text)Insert指定した位置から TextreplaceData(position,数量, text)オフセット位置からオフセット+カウントまでのテキストをテキストに置き換えますsplitText(position)現在のテキストノードをテキストから2つに分割します指定された位置のテキストノードsubstringData(位置,数量)オフセット位置からオフセット+カウントまでの文字列をインターセプトnormalize()隣接するテキストノードをマージし、空のテキストノードを削除

テーブル操作

table要素

AttributeメソッドDescriptioncaptioncaption要素ポインタtBodiestbodyコレクションtFoottfootセット tHeadthead要素rowsテーブル内のすべての行のセットcreateTHead()要素を作成し、テーブルに入れ、参照を返します createTFoot; () 要素を作成し、テーブルに配置し、参照を返しますcreateCaption()キャプション要素を作成し、テーブルに配置し、参照を返しますdeleteTHead() thead要素を削除deleteTFoot()tfoot要素を削除deleteCaption()キャプション要素を削除deleteRow(pos)指定位置の行を削除insertRow ( pos)行コレクションの指定された位置に行を挿入

tbody要素

AttributeメソッドDescriptionrowstbodyすべての行コレクション deleteRow(pos )指定された位置の行を削除しますinsertRow(pos)行コレクション内の指定された位置に行を挿入し、参照を返します

tr要素

属性メソッド説明cellstrAll cell collectiondeleteCell(pos)指定位置のセルを削除insertCell(pos)指定した位置にセルを挿入しますセルコレクション内の位置、引用符を返す

スタイル操作

要素スタイルへのアクセス

DOMスタイル - jsはdom.styleを介して直接スタイル属性にのみアクセスでき、埋め込みスタイルシートや外部スタイルシートにはアクセスできません

getPropertyCSSValue(name)プロパティ値(cssTextとcssValueTypeを含む)のCSSValueオブジェクトを返しますgetPropertyPriority(name)! important属性が使用されているかどうかget PropertyValue(名前) return 指定されたプロパティの文字列値 removeProperty(name) 指定されたプロパティをスタイルから削除します setProperty(name,value,priority) 指定されたプロパティを対応する値に設定しますプラス優先度レベル

Attributeメソッド(dom.style) )	Description
cssText	style属性内のすべてのスタイルの文字列形式を返します
length	要素内のCSS属性の数を返します
parentRule	Return CSS情報CSSRuleオブジェクト

計算されたスタイル - スタイルがカスケードされた後に実際に使用されるスタイル

AttributeメソッドDescriptiondocument.defaultView.get ComputedStyle(dom, 擬似-要素文字列) [つまりサポートされていません]現在の要素の計算されたすべてのスタイルを返しますdom.currentStyle [つまりサポートされています]現在の要素の計算されたすべてのスタイルを返します

操作スタイルシート

document.styleSheets - ドキュメントに適用されるすべてのスタイルシート

property(document.styleSheet[n])cssRules [つまりサポートされていません]rules[ie サポートされている]insertRule(rule,index)[ie not support]addRule (rule,index) [ie サポート]deleteRule(index)[ie not support]removeRule(index)[ie support]

description
すべてのスタイルスタイルシート Rules
上記と同じ
cssRules コレクション内の指定された位置にルール文字列を挿入します
上記と同じ
cssRules コレクション内の指定された位置にあるルールを削除します
上記と同じ

属性の下のルールcssText [つまりサポートされていません] selectorTextstyleサイズとオフセット

の説明
スタイルルール全体の文字列
スタイルセレクター
特定のスタイルオブジェクト

プロパティオフセット親getBoundingClientRect()offsetWidthoffsetHeightoffsetLeftoffsetTopclientWidthclientHeightclientLeftclientTopscrollWidthscrollHeight学習プロセス中に問題が発生した場合、または学習リソースを入手したい場合は、学習交換グループへの参加を歓迎します


親コンテナのオフセット
ページ要素の実際の位置、幅、高さを取得します (属性オブジェクトを返します)
要素の幅 (表示されているコンテンツ領域 + スクロールバー + パディング + border)
要素の高さ (ビジュアルコンテンツエリア + スクロールバー + パディング + ボーダー)
隣接する親からの左の距離
隣接する親からの上の距離parent
要素の幅 (可視コンテンツ領域 + パディング)
要素の高さ (可視コンテンツ領域 + パディング)
パディングエッジとボーダーエッジ距離 (左ボーダー)
パディングエッジと境界エッジ（上部境界線）の間の距離
要素の幅（可視コンテンツ領域+スクロールコンテンツ領域+パディング）
要素の高さ（可視コンテンツ）エリア +スクロールコンテンツエリア +パディング） clientWidth/clientHeight とscrollWidth/scrollHeight ブラウザーに違いがあります

以上がjs で一般的に使用される DOM 操作は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。