DOM概要

10260 ワード
dom
DOMとは
JavaScriptを通じて、HTMLドキュメント全体を再構成できます.ページ上の項目を追加、削除、変更、または並べ替えできます.
ページの何かを変更するには、JavaScriptはHTMLドキュメントのすべての要素にアクセスするための入り口を得る必要があります.このエントリは、HTML要素を追加、移動、変更または削除する方法と属性とともに、ドキュメントオブジェクトモデルによって得られます(DOM).
ノード
DOMによると、HTMLドキュメントの各成分はノードである.
DOMはこのように規定しています.
  • ドキュメント全体は、ドキュメントノード
    • である.
  • 各HTMLタグは、要素ノード
    • である.
  • HTML要素に含まれるテキストはテキストノード
    • である.
  • 各HTML属性は、1つの属性ノード
    • である.
  • 注釈は注釈ノード
    • に属する.
    ノードを検索してアクセスする
    いくつかの方法で操作したい要素を検索できます.
  • は、getElementById()とgetElementsByTagName()を使用することによって、方法
    • を実行する.
  • は、要素ノードのparent Node、first Child、およびlastChild属性
    • を使用することによって、
    getElementById()とgetElementsByTagName()
    getElementById()とgetElementsByTagName()の2つの方法は、HTMLドキュメント全体のHTML要素を検索することができます.
    この2つの方法は文書の構造を無視します.ドキュメント内のすべての

    要素を検索すると、getElementsByTagName()はそれらをすべて見つけます.同時に、getElementById()法は、文書構造のどの位置に隠れていても、正確な要素を返します.
    この2つの方法は、ドキュメント内の位置に関係なく、あなたに必要なHTML要素を提供します.
    getElementById()は、指定されたIDで要素を返すことができます.
    getElemenntById()文法

    document.getElementById("ID");
    コメント:getElementById()はXMLでは動作しません.XMLドキュメントでは、タイプIDの属性を持つことで検索する必要がありますが、このタイプはXML DMDで宣言しなければなりません.
    getElementsByTagName()メソッドは、指定されたラベル名を使用してすべての要素(ノードリストとして)に戻ります.これらの要素は、この方法を使用する際に使用される要素の子孫です.
    getElements ByTagName()は、任意のHTML要素に使用できます.
    getElements ByTagName()文法
    document.getElementsByTagName("    ");
    または:
    document.getElementById('ID').getElementsByTagName("    ");
    実例1
    以下の例は、ドキュメント内のすべての

    要素のノードリストを返します.

    document.getElementsByTagName("p");
    実例2
    以下の例は、すべての

    要素のノードリストを返します.これらの

    要素は、idが「mandiv」の要素の後裔である必要があります.

    document.getElementById('maindiv').getElementsByTagName("p");
    ノードリスト(nodeList)
    ノードリストを使用すると、通常はこのリストを変数に保存します.
    var x=document.getElementsByTagName("p");
    ここで、変数xは、ページ内のすべての

    要素のリストを含み、それらのインデックス番号からこれらの

    要素にアクセスできます.
    インデックス番号は0から始まります.
    length属性を使うことで、ノードリストを巡回できます.

    var x=document.getElementsByTagName("p");
    for (var i=0;i<x.length;i++)
     { 
    // do something with each paragraph
     }
    インデックス番号で特定の要素にアクセスすることもできます.
    3番目の

    要素にアクセスするには、このように書いてもいいです.

    var y=x[2];
    parent Node、first Child及びlastChild
    この3つの属性のparent Node、first Child、およびlastChildは文書の構造に従って、文書の中で「短距離の旅行」を行うことができます.
    以下のHTMLセグメントを見てください.
    <table>
     <tr>
     <td>John</td>
     <td>Doe</td>
     <td>Alaska</td>
     </tr>
    </table>
    上のHTMLコードでは、最初のは要素の最初のサブ要素であり、最後のは要素の最後のサブ要素である.
    また、＜tr＞は各＜td＞要素の親ノードである.
    firstChildの最も一般的な使い方は、ある要素にアクセスするテキストである.
    var x=[a paragraph];
    var text=x.firstChild.nodeValue;
    parent Node属性は、しばしばドキュメントの構造を変更するために使用されます.IDが付いている「mandiv」ノードをドキュメントから削除したい場合:
    var x=document.getElementById("maindiv");
    x.parentNode.removeChild(x);
    まず、IDを指定したノードを見つけて、親ノードに移動して、RemoveChild()メソッドを実行する必要があります.
    ルートノード
    ルートノードにアクセスするために2つの特殊な文書属性があります.
  • document.documentElement
  • document.body
    • 最初の属性は、XMLおよびHTMLドキュメントに存在する文書のルートノードを返します.
    第二の属性はHTMLページの特殊な拡張であり、「body」タブへの直接アクセスを提供しています.
    ノード情報
    各ノードは、ノードに関するいくつかの情報を含む属性を有する.これらの属性は:
  • nodeName(ノード名)
  • nodeValue(ノード値)
  • nodeType(ノードタイプ)
    • HTML DOMの例
    この例では、ユーザーがドキュメント上でクリックしたときに、HTMLドキュメントの背景色がどのように変化しているかを示しています.
    <html>
     
 
    <head>
    <script type="text/javascript">
    function ChangeColor()
    {
    document.body.bgColor="yellow"
    }
    </script>
    </head>
     
 
    <body onclick="ChangeColor()">
    Click on this document!
    </body>
     
 
    </html>
    オブジェクト
    説明
    Window
    JavaScript階層の最上階のオブジェクトは、ブラウザウィンドウを表します.
    Navigator
    クライアントブラウザの情報が含まれます.
    シュリーン
    クライアントディスプレイの情報が含まれています.
    ヒットマン
    ブラウザウィンドウでアクセスしたURLが含まれています.
    Location
    現在のURLの情報が含まれています.
    オブジェクト
    説明
    Dcument
    HTMLドキュメント全体を表します.ページ内のすべての要素にアクセスできます.
    アンチョー
    代表要素アーア
    イメージマップの「ara」要素を表します.
    ベース
    代表的な要素
    Body
    代表的な要素
    Button
    代表的な要素
    イベント
    ある事件の状態を表します.
    Form
    代表
    要素
    Frame
    代表的な要素
    Fraameset
    代表的な要素
    Iframe
    代表的な要素
    Image
    代表的な要素
    Input button
    HTMLフォームを表すボタン
    Input checkbox
    HTMLフォームのチェックボックスを表します.
    Input file
    HTMLフォームのファイルアップロードを表します.
    Input hidden
    HTMLフォームの隠し領域を表します.
    Input password
    HTMLフォームのパスワード領域を表します.
    Input radio
    HTMLフォームの単一選択ボタンを表します.
    Input reet
    HTMLフォームのリセットボタンを表します.
    Input submit
    HTMLフォームの確認ボタンを表します.
    Input text
    HTMLフォームのテキスト入力フィールド(テキストボックス)を表します.
    Link
    代表的な要素
    Meta
    代表的な要素
    Object
    代表的な要素
    Option
    代表的な要素
    プロジェクト
    HTMLフォームの選択リストを表します.
    スタイル
    別個のスタイル宣言を表します.
    テーブル
    代表的な要素
    TableData
    代表要素
    Table Row
    代表要素
    Textarea
    代表的な要素
    Jsのプロトタイプ