JavaScript DOM常用操作コードのまとめ

3123 ワード
JavaScript DOM
1.DOMを理解する：
DOM(Document Object Model)は、言語と独立して、xmlを操作するためのドキュメントのアプリケーションプログラミングインターフェースです。
どういうことですか？二つの観点から分かります。
JavaScriptについては、JavaScriptがHtmlを操作するために、JavaScriptは自分のdomプログラミングインターフェースのセットを持っています。
Htmlに対して、domは一つのdomの木を形成させて、一つの家族の木のように、一つの層は一つの層になって、子々孫々。
だから、DOMがあったら、JavaScriptが鍵を持ってきたのと同じように、Htmlの各ノードを操作して、Htmlの肌に触れることができます。えっと、
2.HtmlのDOMツリーを紹介する：
説明：htmlタグはブラウザの解析によってdomツリーが形成され、その後HTMLの各タグ要素、属性、テキストはDOMのノードと見なされ、JavaScriptはdomの提供されたプログラムインターフェースを通じて各ノードに操作され、ブラウザのレンダリングメカニズムを理解することができます。
Htmlコード:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dom</title>
</head>
<body>
  <div>
    <a href="www.baidu.com" rel="external nofollow" >  </a>
  </div>
</body>
</html>
対応するDOMツリー構造図：

3.JavaScriptのDOMプログラミングインターフェースを知る：
これまで述べてきたdomツリーは、jsのdomプログラミングインターフェースを通じてこのdomツリーを操作します。
JavaScripptDOM操作の一般的な方法と属性：
常用方法：
取得ノード:
  • document.getElemenntById/ID番号で要素を取得し、要素オブジェクト
    • を返す。
  • document.getElementsByName/name属性によってID番号を取得し、要素オブジェクト配列
    • に戻る。
  • document.getElements ByClass Name/classを通じて要素を取得し、要素オブジェクト配列（ie 8以上がある）
    • に戻る。
  • document.getElements ByTagName/ラベル名で要素を取得し、要素群を返します。
    • 要素の属性値を取得/設定します。
  • element.get Attribute/括弧着信属性名は、対応する属性の属性値
    • を返します。
  • element.set Attribute/着信属性名および設定値
    • ノードノードの作成:
  • document.create Element(h 3)//作成します。ここではh 3要素を例にして
    • を作成します。
  • document.creat Text Node（String）；テキストノードを作成します。
  • document.creat Attribute（「class」）；属性ノードを作成し、ここではクラス属性を作成する例
    • ノードを追加:
  • element.apendChild（Node）；element内部の一番後ろにノードを追加します。パラメータはノードタイプ
    • です。
  • elment.insertBefore（newNode、existing Node）；element内部の中にnewNode
    • をexisting Nodeの前に挿入します。
    ノードを削除:
    element.removeChild（Node）／現在のノードの下で指定されたサブノードを削除し、削除に成功したら削除されたノードに戻ります。そうでなければnullに戻ります。
    通常の属性:
    現在の要素の親ノードを取得します。
    element.parent Node//は現在の要素の親ノードオブジェクトを返します。
    現在の要素のサブノードを取得します。
  • element.chlidren/は、現在の要素のすべてのサブノードオブジェクトを返し、HTMLノード
    • に戻ります。
  • element.chilidNodes/は、テキスト、HTML、属性ノードを含む現在の要素の多くを返します。回車もノードとして利用されます。
  • element.first Child/は、現在の要素の第1のサブノードオブジェクト
    • を返す。
  • element.lastChild/は、現在の要素の最後のサブノードオブジェクト
    • を返す。
    現在の要素の同じレベルの要素を取得します。
  • element.nextSibling/現在の要素の次の同レベルの要素が返されないとnull
    • に戻ります。
  • element.previous Sibling/現在の要素の前の同じレベルの要素を返すとnull
    • に戻ります。
    現在の要素のテキストを取得:
  • element.innerHTML/リターン要素のすべてのテキストは、htmlコード
    • を含む。
  • element.inneratext/は現在の要素の自身とサブのすべてのテキスト値を返します。テキストの内容だけで、htmlコード
    • を含みません。
    現在のノードのノードタイプを取得する：node.nodeType/返却ノードのタイプ、デジタル形式（1−12）の一般的ないくつかの1：要素ノード、2：属性ノード、3：テキストノード。
    設定スタイル：element.style.co lor=「噫eea」要素のスタイルを設定するときはスタイルを使用します。ここではテキストの色を設定します。
    4.まとめ：
    jQueryでdomを操作するともっと便利で使いやすいと思います。jqはjsのdomをカプセル化していますので、Write Less、Do Moreができます。でも、原生jsのdomをまとめてみて、jsのdomに対する操作は基本的には分かります。有利で無害なだけです。
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
    JS作成簡易計算機のコード例
    C〓〓の実行の順序の持ってくるいくつかの潜在的な問題に関して