【ビギナー向け】javascript(DOM)よく使う記述備忘録

javascriptこれだけは押さえておきたい備忘録

みなさんこんにちは、yuchulです。
今回は、javascriptの『よく使うけど忘れがち』系をまとめました。

取得系

デバックの時に結果を確認する方法

javascriptを使う上で必ず使うのに、時間が空くと時々出てこないことがあるので書いておきます。

//文字列の場合は''又は""で囲う。
console.log('見たいもの');

//変数の場合はそのままでOK。
console.log(sample);

//文字列と変数を混合で扱う場合は+で繋ぐ。
console.log('見たいもの' + sample);

//ES2015(ES6)の場合はこのように書くこともできる
console.log('見たいもの${sample}');

ID取得

DOMを使う上で最もよく使う記述です。

<div id="sample">hogehoge</div>

<script>
 var sample = document.getElementById('sample');
 console.log(sample);
</script>

結果

<div id="sample">hogehoge</div>

Class取得

疲れているとsを忘れたり、配列だということをすっかり忘れたりします。

<div class="sample">hogehoge</div>
<div class="sample">hugahuga</div>

<script>
　//IDを取得する突起とは違い、Elementsはsを忘れないようにしましよう。
　var sample = document.getElementsByClassName('sample');

　//classはIDと違い自動的に配列になるので、下のように『何番か』を指定してあげる必要があります。
　console.log(sample[0]);
</sctipt>

結果

<div class="sample">hogehoge</div>

中身取得

タグで囲まれた中身の取得を行います。

<div id="sample">hogehoge</div>

<script>
//一旦IDを取得します（勿論Classでもtagでもいい）
 var sample = document.getElementById('sample');
//IDを取得したら、.で区切りinnerHTMLと記述します
 var sampleInner = sample.innerHTML;

 console.log(sampleInner);
</script>

結果

hogehoge

個数取得

ループ（forなど）を書く時によく用います。

<div class="sample">hogehoge</div>
<div class="sample">hugahuga</div>

<script>
//一旦classを取得します（tagとかでもいい）
var sample = document.getElementsByClassName('sample');
//classを取得したら、.で区切りlengthと記述します
var sampleLength = sample.length;

console.log(sampleLength);

結果

2

条件分岐

###演算子
if文の条件を書く時によく使うので記録

=  //置き換え
== //等しい
!= //等しくない
|| //もしくは
&& //アンド
>  //不等号は省略

if文

初心者が最初に踏み出すイメージがあるif文です。

if(条件式){
    //条件が合っていたらこっちが実行される
}eise{
    //違うとこっちが実行される
}

回す系

for文

系っていうか主にこれです

for (var i = 0; i < sample.length; i++){
    //条件が満たされるまで実行
}

##置換

###replace
文字の置換をするときに使うやつ。
まずは基本形

var sample = 置換するものがある文章テキストetc.replace(/置換したいもの/g,'置換するもの');

もし置換したいものに対して変数を使いたい場合は下のように一旦正規表現に置き換えてから置換処理します。
置換するものに関しては変数を使っても大丈夫です。
(私はつい先ほど置換するものも正規表現に変えてしまってどん詰まりしてました＾＾w)

var ahaha = 'あはは';
var reg = new RegExp(ahaha,'g');
var htmlRep = htmlRep.replace(reg,'おほほ');

まとめ

毎日使ってると忘れないんだけど、どうしてもそういうわけにいかないので書きました。この記事は常に更新していく予定です（今日はもう書くの飽きたよー）