Case1
CHECK
01
const prompt = document.getElementByID(’prompt’); というのは
const prompt = document.querySelector(’#prompt’); でも代用可能。
CSSと同じ書き方で要素を取得できる。
CHECK
02
ex) document.querySelector(’#list li’).style.color = ‘red’;
と書けば色を変えられる。
const list = document.querySelectorAll(’#list li’);
と書けば全ての要素取得できる。
CSSがわかれば簡単。JSで動きをつけたりする時や見た目変えたりする時はこれを覚えて使えればある程度のことはできる。
と書けば色を変えられる。
const list = document.querySelectorAll(’#list li’);
と書けば全ての要素取得できる。
CSSがわかれば簡単。JSで動きをつけたりする時や見た目変えたりする時はこれを覚えて使えればある程度のことはできる。
CHECK
03
document.querySelector(’[data-hoge=”1”]’);
という書き方もできる。
document.querySelector(’[class=”hoge”]’);
という書き方もできる。
document.querySelector(’.hoge’);と同値。
CHECK
04
<div class="hoge hoge2"></div>
とした場合
document.querySelector(’[class=”hoge”]’); では取得できず
document.querySelector(’.hoge’); では取得できる。
つまり前者は完全でないと取得できない。
取得しようとすれば
document.querySelector(’[class=”hoge hoge2”]’);
とする必要がある。
CSSも
[class=”hoge hoge2”] {}
でスタイル指定できる。
CHECK
05
＊COMMENT＊
鈴木 健太
＊コメント＊
改めてセレクタを調べて見ると普段使わないものも多々あり、知らないことがたくさんあるなと思いました。
今回の実習ではJSONを取得して、クエリの内容に応じて動的にページ内容を変えるプログラムをJSで書いてみました。この頃をバニラのJSでnode.jsのフレームワーク同様の内容を実装しようとしたらこうなるんだなと学ぶことができました。
＊コメント＊
下川 春樹
＊コメント＊
今回は、「Javascriptのセレクタ」についての回でした。
querySelectorで要素を取ってくる時に、('.hoge') ←こんな感じで普通にクラス名を書けるだけではなく、(’[class=”hoge”]’)で書けたり、data属性があれば(’[data-hoge=”1”]’)で書けたりと、色んな指定が出来る事を教えて頂きました。
他にも様々な事を出来る便利なものも沢山あるので、まずどんな事が出来るのかをしっかり知って、コードを書いて覚えていきたいと思います！
困った時は、「mdn」で検索してみて下さい！CSSもJSも何でも載ってます！！
＊コメント＊
則岡 えり
＊コメント＊
今日はJavascriptで要素を取得するいろんな方法を教えていただきました。
今までJavascriptはJavascript、CSSはCSSと、なんとなく別物だと考えていましたが、
CSSのセレクタの書き方がそのまま使えたりして、不思議な感覚でした。
また、普段よく見かけるスライダーをJavascriptとCSSで作ってみようとチャレンジしましたが、なかなか難しかったです。
まだ途中なので、頑張って完成させます。
MDNにはCSSのセレクタもたくさん載っていて、知らないものもたくさんありまた。
どんなものがあるのか、一通りは読んでみようと思います。
便利そうなセレクタがあったら、使っていきます！
＊コメント＊
＊コメント＊