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

. 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 サイトの他の関連記事を参照してください。