ノードには、要素ノード、属性ノード、テキストノードの3つの主要なタイプがあります。
DOMの主なことは、要素ノードと属性ノードを追加、削除、変更、およびチェックすることです。以下は、要素ノードの操作と属性ノードの操作をそれぞれ導入します。
要素ノード
チェック
DOMを追加、削除、変更する前に、最初に対応する要素を見つける必要があります。特定の検索方法は次のとおりです。
getElementById（）//単一のノードを取得getelementsbytagname（）
同時に、要素ノードの属性を使用して、親と子のノードとテキストノードを取得することもできます。
子供のノード
node.childnodes //子ノードリストノデリストを取得します。ラインブレークは、ブラウザのテキストノードとしてカウントされることに注意してください。この方法でノードリストを取得した場合、フィルタリングが必要ですノード。firstchild//最初の子ノードノードを返します。lastchild//最後の子ノードを返します
親ノード
node.ParentNode //親ノードnode.OwnerDocument //祖先ノード（ドキュメント全体）を返す親ノードnode.OwnerDocument //
compatriotノード
node.previoussibling //前のノードを返します。そうでない場合は、nullnode.nextsibling //次のノードを返します
増加
新しいノードを追加するには、最初にノードを作成し、新しく作成したノードをDOMに挿入する必要があります。したがって、以下はノードを作成してノードを挿入する方法であり、ノードを複製する方法もノードの作成に導入されています。
ノードを作成します
createElement（）//指定されたタグ名に従って新しい要素ノードを作成する
コードスニペットを作成します（DOMの頻繁な更新を避けるために、最初にコードスニペットを作成してから、すべてのノード操作を完了したらDOMに追加できます）
createdocumentfragment（）
複製ノード
clonednode = node.clonenode（boolean）//パラメーターは1つだけで、ブール値を渡すことができます。 falseとは、ノードのみをコピーすることを意味します
ノードを挿入します
/*nodeを挿入*/parentNode.AppendChild（ChildNode）; //子ノードリストの端に新しいノードを追加しますlist parentnode.insertbefore（newNode、ターゲットノード）; // newNodeにターゲットノードに挿入/*htmlコードを挿入*/node.insertadjacenthtml（ 'beforebegin'、html）; // code node.insertadjacenthtml（ 'abthbegin'、html）を挿入します。 // code node.insertadjacenthtml（ 'abthbegin'、html）を挿入します。 //コードnode.insertadjacenthtml（ 'befored'、html）を挿入します。 //要素node.insertadjacenthtmlの最後の子要素の後にコードを挿入します（ 'afterend'、html）; //要素の後にコードを挿入します
ノードを交換します
parentNode.Replace（newNode、TargetNode）; //ターゲットノードをNewNodeに置き換えます
消去
ノードを削除します
parentNode.RemoveChild（ChildNode）; //ターゲットnode node.parentnode.RemoveChild（node）を削除します。 //親ノードを知らずに使用します
属性ノード
操作属性ノードは、DOMスタイルを追加、削除、変更、チェックすることです。インラインスタイル、インラインスタイル、外部スタイルにはさまざまな動作方法があります。さまざまな方法で得られたスタイルは、読みやすく、書くことができる、読み取り専用に分割されています。
CSSスタイルを直接入手してください
node.style.color //読み取り可能または書き込み可能
スタイル自体のプロパティと方法
node.style.csstext //ノードインラインスタイルのstring node.style.lengthを取得//インラインスタイルnode.tyle.item（0）//指定された位置でスタイルを取得する
要素スタイルを取得して変更します
HTML5は、要素の新しい属性を提供します：要素スタイルのシートの追加、削除、変更、および検索を実装するクラスリスト。操作は次のとおりです。
node.classlist.add（value）; //指定されたクラスnode.classlist.contains（value）を追加します。 //要素に指定されたクラスが含まれているかどうかを判断します。 truenode.classlist.remove（value）がある場合; //指定されたクラスnode.classlist.toggle（value）を削除します。 //特定のクラスがある場合は削除し、指定されたクラスを追加しない場合は追加します。
DOM特性を変更する方法
node.getAttribute（ 'id'）// get node.setattribute（ 'id'）// set node.removeattribute（）// node.attributes //すべてのdom機能を取得する
読み取り専用方法
getComputedStyleはウィンドウの方法です。現在の要素のすべてのエンド使用されたCSS属性値を取得できますが、読み取り専用です。 2つのパラメーターがあり、最初のパラメーターは着信ノードです。2つ目は、擬似クラススタイルを取得するために、ホバー、ぼかしなどを渡すことができます。
ただし、IEはgetComputedStyleメソッドをサポートしておらず、currentStyleを使用して互換性を維持できます。
window.getComputedStyle？ window.getComputedStyle（Node、null）：node.currentStyle
JavaScript Domノード操作方法の上記の概要は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。