2021.10.31

Javascript DOMとは①ノード取得

Javascriptを学習するうえで絶対にマスターしないといけないカテゴリー、DOM(Document Object Mode)!

これが出来れば一気にコードを書くのが楽しくなる！はず。

特徴3つ

①DOMツリーと呼ばれる階層構造がある。

②それぞれの階層のことを「ノード＝オブジェクト」と言う。

③WebとJavascriptを繋ぐ役割を持つ。

全ての始まりはノードを取得することです。

そして、取得したノードは変数にしてから使えます。

主な取得方法は主に、

idで取得　document.getElementById(id名)  
classで取得　document.getElementsByClassName(class名) 　
name属性で取得　document.getElementsByName(name名) 
タグ名で取得　document.getElementsByTagName(tagname名) 
指定されたセレクターの最初の1個を取得　document.querySelector(selector名) 
指定されたセレクターを取得　document.querySelectorAll(selector名) 

※初めのdocumentとはhtmlの情報を持っているdocumentオブジェクトと呼ばれるものです。

他にも表示されたブラウザの情報を持っているwindowオブジェクトもあります。

例えば、

const button = document.getElementById(“js-Btn”);
これは、htmlファイルの中の、id=”js-Btn”という名前をつけたノードをbuttonという変数にした、ということです。
これで、buttonという変数で自由に操れるようになります。
 
次にこの変数を使って、イベントと呼ばれる「何かをしたとき」に、「実行したい処理」を書いていきます。
 

「何かをしたとき」と「実行したい処理」とは、、クリックしたらアラートがでるとか、マウスをメニュータブに乗せたらリストが展開されるとか、画面をロードしたら画像が動くなどなどです。

ここまでは、なんとかできた。私の分からないところは次のイベントなのです。

＼SHARE／

カテゴリー:
タグ: