JavaScript 基礎編3

JavaScript基礎編最後です。
前回の記事はこちら

DOM(Document Object Model)

windowオブジェクト配下のDocumentオブジェクト。
HTMLを操作できる。

特定の要素を探す

document.querySelector(CSSセレクタ);

//例
const element1= document.querySelector('.sample'); //.は指定するクラスを呼び出すときに使う
const element2= document.querySelector('#sample'); //#は指定するidを呼び出すときに使う

element1.textContent = 'テキスト1';
element2.textContent = 'テキスト2';

特定の要素をすべて探す

document.querySelectorAll(CSSセレクタ);

querySelector()/querySelectorAll()以外
特定要素を探す方法として、querySelector()/querySelectorAll()以外の方法もある。

getElementById(ID名);
getElementsByClassName(クラス名);
getElementByTagName(タグ名);

getElement系は取得する要素に応じてメソッドを使い分ける必要があるので、特別な意図がない限りquerySelector()/querySelectorAll()を使うのが良い。
getElement系はページの表示速度を向上させたいときなどに使う。

要素のテキストを変更する

要素.textContent = '変更したいテキスト';

//例
const p = document.querySelector('p');
p.textContent = '変更します';

要素の属性を変更する

//指定属性の値を参照する
要素.属性名

//指定属性の値を変更する
要素.属性名 = '変更したい値';

cssスタイルを変更する

要素.style.cssプロパティ名 = '値';

//例
const p = document.querySelector('p');
p.style.fontSize = '36px';

クラスを削除する

要素.classList.remove('削除するクラス名');

クラスを追加する

要素.classList.add('追加するクラス名');

指定のクラスを置換する

要素.classList.replace('対象クラス名','置換クラス名');

要素を作成する

document.createElement('タグの名前');

子要素の末尾に要素を追加する

親要素.append(追加する要素);

子要素の先頭に要素を追加する

親要素.prepend(追加する要素);

要素を前と後ろに追加する

指定要素.before(追加する要素);
指定要素.after(追加する要素);

要素を削除する

削除したい要素.remove();

要素を置換する

置き換えたい要素.replacedWith(置き換える要素);

イベント

イベントとは、Webページ上で何らかの操作を行ったときに、それをシステムに知らせるもの。

イベントを設定する

要素.addEventListener(イベント名,関数名);

イベントを削除する

要素.removeEventListner(イベント名,関数名);

イベントの種類
click：要素をクリックしたときに発生
input:フォームの入力欄にデータが入力されたとき、ラジオボタンを選択したとき、チェックボックスを選択したとき、セレクタを設定するとき発生
keydown,keyup：キーボードのキーを押したときに発生
mousemove,mousedown,mouseup：マウスの動かしたときに発生
scroll:画面をスクロールしたときに発生
currentTarget,target
イベントが発生した要素を取得できる
currentTarget:addEventListenerを設定した要素
target:設定したイベントが発生した要素
規定の動作を停止

イベントオブジェクト.preventDefault();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button type="button">ボタン</button>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click',function() {
        console.log('クリックしました');
      });
    </script>
  </body>
</html>

JavaScirptの基礎まとめ 基礎編3～これは絶対に覚えておくべき～

JavaScript 基礎編3

DOM(Document Object Model)

イベント

JavaScirptの基礎まとめ基礎編3～これは絶対に覚えておくべき～