DOM チュートリアル
DOMの使い方

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
サーチ…


備考

DOM（Document Object Model）は、Webブラウザや他のアプリケーションがHTMLドキュメントのコンテンツにアクセスするために使用するAPIです。

DOMは構造をツリーとして表し、ノードは子ノードを含むことができ、子を持たないノードはリーフノードと言います。

それによって、文書およびその構成部分の構造および特性を操作することができる。

主なトピックは、要素の検索、スタイル情報へのアクセス、アニメーションです。

DOMを使用したほとんどの作業はJavaScript言語を使用して行われますが、APIはどの言語にも対応しています。

バージョン

W3C DOM

バージョン発売日
1 1998-10-01
2 （コア） 2000-11-13
3 （コア） 2004-04-07
4 2013-11-07

セレクタAPIレベル

バージョン発売日
1 2013-02-21

既存のhtml要素を取得する

最も一般的なタスクの1つは、操作するためにDOMから既存の要素を取得することです。最も一般的には、これらのメソッドはルートノードであるためdocument上で実行されdocument 、これらのメソッドはすべてツリー内のHTML要素すべてに対して機能します。彼らは実行されたノードから子を返すだけです。

IDで検索する

var element = document.getElementById("logo");

elementには、 id属性が "logo"に設定されている（唯一の）要素が含まれnull 。存在しない場合はnullも含まれnull 。このidを持つ複数の要素が存在する場合、その文書は無効であり、何かが起こる可能性があります。

タグ名で取得

var elements = document.getElementsByTagName("a");

elementsは、ドキュメント内のすべてのリンクタグのライブ HTMLCollection （配列のようなオブジェクト）が含まれます。このコレクションはDOMと同期しているため、DOMに加えられた変更はすべてこのコレクションに反映されます。コレクションはランダムアクセスを提供し、長さを持ちます。 

var element = elements[0];
//Alternative
element = elements.item(0);

elementには最初に出会ったHTMLリンクelementが含まれnull 。インデックスが範囲外の場合はnull 

var length = elements.length;

lengthは、現在リストにあるHTMLリンク要素の数に等しい。この番号は、DOMが変更されたときに変更できます。

クラスで取得する

var elements = document.getElementsByClassName("recipe");

elementsには、 class属性に「レシピ」が含まれるすべての要素のライブ HTMLCollection （配列のようなオブジェクト）が含まれます。このコレクションはDOMと同期しているため、DOMに加えられた変更はすべてこのコレクションに反映されます。コレクションはランダムアクセスを提供し、長さを持ちます。 

var element = elements[0];
//Alternative
element = elements.item(0);

elementは、このクラスで最初に見つかったHTML elementが含まれます。そのような要素がない場合、 elementは最初の例では値undefinedを持ち、2番目の例ではnullです。 

var length = elements.length;

lengthは、現在、クラス「レシピ」を持つHTML要素の数に等しい。この番号は、DOMが変更されたときに変更できます。

名前で取得

var elements = document.getElementsByName("zipcode");

elementsには、 name属性が "zipcode"に設定されたすべての要素のライブ NodeList （配列のようなオブジェクト）が含まれます。このコレクションはDOMと同期しているため、DOMに加えられた変更はすべてこのコレクションに反映されます。コレクションはランダムアクセスを提供し、長さを持ちます。 

var element = elements[0];
//Alternative
element = elements.item(0);

elementは、この名前の最初に見つかったHTML elementが含まれます。 

var length = elements.length;

lengthは現在name属性として "zipcode"を持っているHTML要素の数に等しい。この番号は、DOMが変更されたときに変更できます。

入門

DOM（Document Object Model）は、HTMLおよびXML文書のプログラミングインタフェースであり、文書の論理構造および文書へのアクセスおよび操作方法を定義します。

DOM APIの主な実装者はWebブラウザです。仕様はW3CおよびWHATWGグループによって標準化され、オブジェクトモデルはプログラミングインターフェイスの論理モデルを指定します。

DOM構造の表現は、ツリー状のビューに似ています。各ノードは、マークアップの一部を表すオブジェクトで、各要素は特定の共有機能を継承します。

「文書オブジェクトモデル」という名前は、伝統的なオブジェクト指向設計の意味で「オブジェクトモデル」であるために選択されました。文書はオブジェクトを使用してモデル化され、モデルは文書の構造だけでなく文書の動作それが構成されているオブジェクトのことです。言い換えれば、例示的なHTML図を見れば、ノードはデータ構造を表すものではなく、それらは機能とアイデンティティを有するオブジェクトを表す。オブジェクトモデルとして、ドキュメントオブジェクトモデルは以下を識別します。

  • ドキュメントの表現と操作に使用されるインタフェースとオブジェクト
  • これらのインタフェースとオブジェクトのセマンティクス - 動作と属性の両方を含む
  • これらのインタフェースとオブジェクト間の関係とコラボレーション

DOMがロードされるのを待ちます。

DOMと対話する<script>コードが<head>セクションに含まれている場合は、 DOMContentLoaded使用します。 DOMContentLoadedコールバックの中にラップされていない場合、コードは次のようなエラーをスローします。

何か読み取ることができませんnull 

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

https://html.spec.whatwg.org/multipage/syntax.html#the-end

DOMContentLoaded

代替（ IE8に適しています） 

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

https://developer.mozilla.org/en/docs/Web/API/Document/readyState

innerHTMLを使用する

HTML 

<div id="app"></div>

JS 

document.getElementById('app').innerHTML = '<p>Some text</p>'

今、HTMLはこのように見えます

<div id="app">
    <p>Some text</p>
</div>

HTMLマークアップ

入力例： 

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

DOM要素出力： 

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------

上記の要素はすべてHTMLElementインターフェイスから継承し、特定のタグに応じてカスタマイズされます



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow