【JavaScript】スクラッチチートシート

導入

HTMLに直接記入

<script>
  <!-- JavaScriptのコード -->
<script>

別ファイルに記入&読み込み

<script src="〇〇.js"><script>
// JavaScriptのコード

アウトプット系

コンソール出力

console.log("Hello World");

ダイアログボックス出力

window.alert("Hello World");

画面出力

<script>
  document.write("Hello World");
<script>

変数系

再宣言可・再代入可

var hoge = "Hello World";

再宣言不可・再代入可

let hoge = "Hello World";

再宣言不可・再代入不可

const hoge = "Hello World";

セレクタ系

タグ名取得

<div>Hello World</div>
var hoge = document.getElementsByTagName('div');

ID名取得

<div id="hoge">Hello World</div>
var hoge = document.getElementById('hoge');

クラス名取得

<div class="hoge">Hello World</div>
var hoge = document.getElementsByClassName('hoge');

親要素取得

<div>
  <div id="hoge">Hello World</div>
</div>
var hoge = document.getElementById('hoge').parentNode;

子要素取得

<div id="hoge">
  <div>Hello World</div>
</div>
var hoge = document.getElementById('hoge').children;

兄弟要素取得

<div id="previous">Previous</div>
<div id="next">Next</div>
var next = document.getElementById('previous').nextElementSibling;
var previous = document.getElementById('next').previousElementSibling;

DOM操作系

要素内文字列取得

<div id="hoge">Hello World</div>
var hoge = document.getElementById('hoge').innerHTML;

要素の追加

<div id="hoge"></div>
var hoge = document.getElementById('hoge').appendChild(document.createElement('div'));

要素の削除

<div id="hoge"></div>
document.getElementById('hoge').remove();

属性の追加

<div></div>
document.getElementsByTagName('div').setAttribute('id', 'hoge');

文法

条件分岐

if(compare1 === compare2){
  // compare1とcompare2が同一の時の処理
} else if(compare1 >= compare2){
  // compare1がcompare2以上の時の処理
} else{
  // それ以外の時の処理
}

繰り返し

for(var i = 1; i <= 10; i++){
  console.log(i);
}