LogoMark.png

JavaScript/DOM

DOM|Documment Object Model

https://www.w3schools.com/js/js_htmldom.asp

Document Object Model (DOM) は、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現で、DOMのプログラミングインターフェイスを利用することで、スクリプト又はプログラミング言語によって、Webページの文書構造、スタイル、内容を動的に変更することができます。

ちなみに、Document オブジェクトの上位には、ブラウザオブジェクト(BOM)としての Window オブジェクトがあり、同様にJavaScript からアクセスすることができます。

CONTENTS


DOMの概要

580px-DOM-model.svg.png

DOMツリー

HTML文書は、以下のようなツリー状の階層構造で記述できるもので、DOMはこの構造を前提にした各要素へのアクセス方法を提供しています。

図版:https://commons.wikimedia.org/wiki/File:DOM-model.svg

ブラウザ開発ツールのコンソールを開いた状態で、以下のスクリプトが実行するとページのHTML要素をすべて確認することができます。

<script> console.dir(document.documentElement); </script>


NodeとElememt

DOMのマニュアルには、Node と Element という言葉が頻出します。状況によっては同じものを意味する場合がありますが、Nodeの方が包括的な概念で、種類も多くあります。以下のように区別してください。


インターフェイスの概観

DOMには、様々なインターフェイスが用意されています。以下、よく用いられるものを列挙します。




DOMインターフェイス

document.title

ページタイトルの読み書きに対応するプロパティー

document.body

ページボディーの読み書きに対応するプロパティー

document.getElementById

タグにIDを与えておけば、それを捉えることがでます。例えばHTML側に、

<div id="ABC">・・・ </div>

のような記述がある場合、

var obj = document.getElementById('ABC');

と記述することで、div id="ABC" の適用範囲(の識別情報)を obj という変数の中にとらえることができます。

例えば、以下のようなHTMLとJavaScriptがあった場合、button のクリックによって DisplayMessage() 関数を呼び出せば、HTMLに書かれた [メッセージエリア] の部分が「Hello World !」という文字列をに変わります。
HTML

<button onClick="DisplayMessage();">Click Me!</button>
 :
<div id="messageArea"> [メッセージエリア] </div>

JavaScript

function DisplayMessage(){
    var obj = document.getElementById('messageArea');
    obj.innerHTML = 'Hello World !';
}

ちなみに「関数の呼び出し」は、マウスのクリック以外にも、センサーからの情報、時刻の到来など、様々なイベントを契機とすることができます。

document.getElementsByClassName

クラスはページ内に複数存在する前提なので、配列変数に取得します。
var obj = document.getElementsByClassName('ABC'); とした場合、
ABCクラスが定義された最初の要素が obj[0]、2つめの要素が obj[1]、以下同様になります。
obj[1].style.backgroundColor = 'red'; のような書き方で制御します。

document.getElementsByTagName

これも同一の要素が複数存在する前提になるので、配列変数に取得します。
var obj = document.getElementsByTagName('a'); とした場合、
最初のaタグ要素が obj[0]、2つめのaタグ要素が obj[1] です。
obj[1].style.backgroundColor = 'red'; のような書き方で制御します。

綴りに注意
Idはページ内の唯一の存在なので getElementById。ClassNameとTagNameは複数のオブジェクトを扱うので getElementsByClassNameなどと複数形の表記になっています。気づきにくいので注意が必要です。

querySelector( )

CSSセレクタでマッチした要素をひとつ取得します。複数ある場合は、最初の1つが選ばれます。引数はセレクタ名なので、'#ABC' や '.abc' と記述します。getElementById('ABC') とは引数の書き方が異なるので注意が必要です。

querySelectorAll( )

CSSセレクタでマッチした要素をすべて取得して NodeList として返します。

その他参考




要素の追加・削除

要素の追加

var elem = document.createElement( 'p' );
var txt = document.createTextNode( 'Hello World!' );
document.body.appendChild( elem ).appendChild( txt );

body直下に p要素(段落)が追加され、さらにそこに Hello World! の文字が挿入されます。appendChildは子要素の追加を意味します。


要素の変更

var newNode = document.createElement( タグ名 );
var oldNode = document.getElementById( ID名 );
var parentNode = oldNode.parentNode; 
parentNode.replaceChild(newNode,oldNode);


要素の削除

var elem = document.getElementById( ID名 );
elem.parentNode.removeChild( elem );





参考:https://www.w3schools.com/jsref/dom_obj_document.asp



PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-05-20 (木) 16:38:48