JavaScriptでDOMの操作

JavaScriptjavascript

広告

今回、JavaScriptを使って動的にCSSを書き換えることや初期設定をすることがあったので、その時に使ったことなどを紹介していきたいと思います。実際に適切に処理されたときは感動しましたので、これから使いこなせるように積極的に使用していきたいと思います。

DOMとは

DOM（Document Object Model）とは,xmlやhtmlを操作するためのAPIのことである。

DOMではHTMLやXML文書をノードと呼ばれるものの階層的な構造として識別します。そしてJavaScriptなど様々なプログラミング言語やスクリプトから、扱いたいノードを特定し操作できるようにする仕組みを提供してくれます。
JavaScriptはクライアント側のブラウザ上で動作しますので、JavaScriptからDOMを利用するにはブラウザでもDOMを扱えるようになっている必要があります。ただ現状ではほとんど全てのブラウザでデフォルトでDOMを扱えるようになっていますので特別なにかをする必要はありません。

https://www.ajaxtower.jp/js/dom/index1.html


要素の検索

document.getElementById('id_name'); #idが一致した要素を取ってくる

document.getElementsByClassName('class_name'); #classが一致した要素を取ってくる

document.getElementById()

idの場合、ユニークでなければならないので、一つだけ取ってくることになる。

document.getElementByClassName()


引数「class」に指定したクラス名を持つ全ての要素への参照を格納した配列を返すメソッド

document.createElement();

要素の作成をすることができる
タグ名を指定して、要素を新しく作成します。

element.hasAttribute();

指定の要素が指定の属性を持つか否かを示す真偽値を返します。

//class追加
element.classList.add('class_name');

//class削除
element.classList.remove('class_name');

これから

これから使う機会が多くなると思いますので、その都度使ったことや気づいたことをまとめられればと思っております。

広告

JavaScriptjavascript