【学習メモ】JavaScriptコードレシピ集 その12

JavaScriptコードレシピ集 の学習メモ 続きです。

JavaScript コードレシピ集

JavaScript コードレシピ集

Chapter13 処理の実行タイミングを制御する

Chapter12 の「SVGcanvas要素を取り扱う」はいまいま実用ではなさそうだったので読んで終わりにします。

219 一定時間後に処理を行いたい

第一引数には関数を、第二引数にミリ秒を数値で指定します。

setTimeout() メソッドと function を使うと this のスコープが変わる場合もあるため、プロパティーの参照がうまくいかないこともあるでしょう。this のスコープがはずれないアロー関数と組み合わせて使うといいでしょう。

setTimeout(() => {
  // 任意の処理
  console.log(this); // このオブジェクト
}, 1000);

220 一定時間後の処理を解除したい

キャンセルしたいタイミングで clearTimeout() メソッドにタイマーを渡すことで、setTimeout() メソッドの呼び出しを解除できます。

const item220_timerId = setTimeout(item220_timer, 1000); // 1000ミリ秒後に実行
function item220_timer() {
  // 任意の処理
  console.log('clearTimeout()で解除するため出力されません');
}

clearTimeout(item220_timerId); // 解除

221 一定時間ごとに処理を行いたい

スコープが変わるため、アロー関数と組み合わせて使うといいでしょう。

setInterval(() => {
  // 任意の処理
  console.log(`1000ミリ秒毎に出力されます`);
}, 1000);

222 一定時間ごとの処理を解除したい

setInterval() メソッドの戻り値は数値となります。この数値を変数に保存しておき、キャンセルしたいタイミングで clearInterval() メソッドにその数値を渡します。

const item222_interlvalID = setInterval(item222_timer, 1000); // 1000ミリ秒ごとに実行
function item222_timer() {
  // 任意の処理
  console.log('clearInterval()で解除するため出力されません');
}

clearInterval(item222_interlvalID); // 解除

223 非同期処理を行えるPromiseを使いたい

Promise オブジェクトは非同期処理を扱える機能です。Promise を使うと非同期処理を扱いやすくなるため、コードの可読性が向上します。

Promiseコンストラクター引数には非同期処理を行う関数を指定します。この関数のなかでは、非同期処理の完了としての resolve() メソッドが呼ばれるのを待機します。Promise インスタンスthen() メソッドを使うと、resolve() メソッドが実行された後に続けたい処理を記述できます。

const item223_promise = new Promise((resolve) => {
  setTimeout(() => {
    // resolve()を呼び出すとPrimiseの処理が完了
    resolve('orange');
  }, 1000);
});

// then() メソッドで続く処理を記述できる
item223_promise.then((value) => {
  console.log(value); // 一秒後に実行される 結果: 'orange'
});

224 Promiseで処理の成功時・失敗時の処理を行いたい

Promise で失敗時の処理を行いたいときは、コンストラクターの引数に reject を含む関数を指定します。reject は処理が失敗したことを示す処理を割り当てます。reject が実行された場合には、catch() メソッドが呼ばれます。

let item224_flag01 = false;
const item224_promise01 = new Promise((resolve, reject) => {
  if (item224_flag01 === true) {
    resolve('orange');
  } else {
    reject('apple');
  }
});

item224_promise01.then((value) => {
  console.log(value); // 結果: 'orange'
});
item224_promise01.catch((value) => {
  console.log(value); // 結果: 'apple' // item224_flag01 が false なのでこちらが出力される
});
// メソッドチェーンとして記述できる
let item224_flag02 = true;
new Promise((resolve, reject) => {
  if (item224_flag02 === true) {
    resolve('orange');
  } else {
    reject('apple');
  }
})
  .then((value) => {
    console.log(value); // 結果: 'orange' // item224_flag02 が true なのでこちらが出力される
  })
  .catch((value) => {
    console.log(value); // 結果: 'apple'
  });

setTimeout()setInterval() はいいにしてもほかがむずかしい
promise / resolve / then / reject / catch など用語は見たことあっても今までコピペだったので実際に手を動かして使うのははじめてなのでさぐりさぐりやってます。

  • 225 Promiseで並列処理をしたい
  • 226 Promiseで直列処理をしたい
  • 227 Promiseで動的に直列処理をしたい

はスキップ

【学習メモ】JavaScriptコードレシピ集 その11

JavaScriptコードレシピ集 の学習メモ 続きです。

JavaScript コードレシピ集

JavaScript コードレシピ集

Chapter11 画像・音声・動画の取り扱い

191 画像をスクリプトで読み込みたい

HTMLのsrc属性にははじめは値を設定しないでおきます。空文字であってもネットワーク通信が発生するためです。

↑ しらんかった

<img id="item191_myImageA">
const item191_myImageA = document.querySelector('#item191_myImageA');
item191_myImageA.src = 'assets/img/photo_a.png';

192 画像の読み込み完了時に処理を行いたい

const item192_myImage = document.querySelector('#item192_myImage');
item192_myImage.onload = () => {
  // 画像の読み込み完了後の処理
  setTimeout(() => {
    item192_myImage.classList.remove('loading');
  },1000);
}
item192_myImage.src = 'assets/img/photo_a.png';
item192_myImage.classList.add('loading');

193 ウェブページ内の画像を遅延読み込みさせる

<img class="item193_img" data-src="assets/img/photo_a.png" width="144" height="144">
<img class="item193_img" data-src="assets/img/photo_b.png" width="144" height="144">
<img class="item193_img" data-src="assets/img/photo_c.png" width="144" height="144">
<button class="item193_btn">読み込む</button>
// 保存用に Map を用意
const item193_srcMap = new Map();
window.addEventListener('DOMContentLoaded', () => {
  // img要素を一括で取得
  const item1193_imgs = document.querySelectorAll('.item193_img');
  item1193_imgs.forEach((img) => {
    // 各img 要素の data-src属性を Mapに保存
    item193_srcMap.set(img, img.dataset.src);
    // 遅延読み込みのため空にしておく
    img.removeAttribute('src');
  });
});
 
const item193_btn = document.querySelector('.item193_btn');
item193_btn.addEventListener('click', () => {
  // img要素を一括で参照
  const item1193_imgs = document.querySelectorAll('.item193_img');
  item1193_imgs.forEach((img) => {
    // 保存していたMapからsrcを割り当てる
    const source = item193_srcMap.get(img);
    img.src = source;
  });
});

以降の Base64画像/音声/動画/カメラ も読みましたが実際にコード書くときでいいかなという感じでした。
動画は最近 PCのChrome では自動再生ができなくなったり、ときどきで仕様変わるのでそのあたりはむずかしいですね

【学習メモ】JavaScriptコードレシピ集 その10

JavaScriptコードレシピ集 の学習メモ 続きです。

JavaScript コードレシピ集

JavaScript コードレシピ集

Chapter10 アニメーションの作成

181 CSS Transitionsの終了時に処理を行いたい

CSSanimation ではなく transition の終了を監視する場合、transitionend イベントを用いる

const item181_rect = document.querySelector('.item181_rect');
item181_rect.addEventListener('transitionend', (event) => {
  // アニメーション完了時のコード
  console.log('アニメーションが完了しました');
});

182 CSS Animationsの終了時に処理を行いたい

CSSanimation を監視する場合はこちら
animationstart, animationiteration, animationend を使ってそれぞれのタイミングが取れる

.item182_rect {
  width: 40px;
  height: 40px;
  background: red;
  animation: infinite 1s item182_rotate linear;
}

@keyframes item182_rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
const item182_rect = document.querySelector('.item182_rect');
item182_rect.addEventListener('animationstart', (event) => {
  // アニメーションが開始したときのイベント
  console.log('アニメーションが開始しました。');
});
item182_rect.addEventListener('animationiteration', (event) => {
  // アニメーションで繰り返しが発生したときのイベント(繰り返しが未指定の場合は発生しない)
  console.log('アニメーションで繰り返しが発生しました。');
});
item182_rect.addEventListener('animationend', (event) => {
  // アニメーションが完了したときのイベント(繰り返しを指定した場合は発生しない)
  console.log('アニメーションが完了しました。');
});

183 アニメーションのための「Web Animations API」を使いたい

Web Animations API だと JavaScript だけで管理でき、終了時の判定をしやすいというメリットがあります。
第一引数には開始値と終了値を含むオブジェクトを、第二引数にはアニメーションの属性を含むオブジェクトを指定します。

※ Edge はサポートしていないので使用するには Polyfill が必要 https://caniuse.com/#feat=web-animation
参考:Web Animations API を使ってみる - Qiita

// 要素を取得
const item183_rect = document.querySelector('.item183_rect');
item183_rect.animate(
  {
    transform: [
      'translate(0px) rotate(0deg)',    // 開始値
      'translate(200px) rotate(360deg)' // 終了値
    ]
  },
  {
    duration: 3000,       // ミリ秒指定
    iterations: Infinity, // 繰り返し回数
    direction: 'normal',  // 繰り返し挙動
    easing: 'ease'        // イージング
  }
);
  • 184 要素の大きさを変えたい
  • 185 要素を移動させたい
  • 186 要素の透明度を変化させたい
  • 187 要素の明度を変化させたい
  • 188 要素の彩度を変化させたい

あたりはCSSのプロパティと上記が分かってれば大丈夫そうなのでスキップ

189 requestAnimationFrame() を使いたい

時間経過で変化し続けるには requestAnimationFrame() メソッドを利用します。requestAnimationFrame() メソッドは再描画の前に関数の呼び出しを要求する命令です。

ウェブのアニメーションでは requestAnimationFrame() メソッドを使うのが、もっともムダがなくなめらかに見せられます。

requestAnimationFrame() メソッドは一度しか呼び出されません。アニメーションを実装するには連続して呼び出す必要があるので、関数のなかで自身の関数を呼び出すように予約しておきます。

tick();
function tick() {
  requestAnimationFrame(tick);
  // アニメーション処理を記述する
}

関数を止めたい場合は

  • requestAnimationFrame() の呼び出しをしない
  • cancelAnimationFrame() を使ってキャンセルする
tick();
let requestID;
function tick() {
  requestID = requestAnimationFrame(tick);
  // アニメーション処理を記述する
}
cancelAnimationFrame(requestID);

190 requestAnimationFrame() でHTML要素を動かしたい

これは style 当てる形の例ですが、requestAnimationFrame()WebGLCanvas 動かす場面で主に使うそう

CSSwill-change プロパティはじめてみましたが、おまじない的な意味合いだそうであまり気にしなくて良いのかなと
参考:CSS: will-change指定時の挙動, パフォーマンスへの影響と考察 - Qiita

<div class="item190_stoker">👻</div>
.item190_stoker {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
  font-size: 5rem;
}
// マウスストーカーの要素を取得
const item190_stoker = document.querySelector('.item190_stoker');

// マウス座標
let mouseX = 0;
let mouseY = 0;
// ストーカーの座標
let currentX = 0;
let currentY = 0;
// マウス移動時
document.body.addEventListener('mousemove', (event) => {
  // マウス座標を保存
  mouseX = event.clientX;
  mouseY = event.clientY;
});

item190_tick();
function item190_tick() {
  // アニメーションフレームを指定
  requestAnimationFrame(item190_tick);

  // マウス座標を遅延してストーカーの座標へ反映する
  currentX += (mouseX - currentX) * 0.1;
  currentY += (mouseY - currentY) * 0.1;

  // ストーカーの要素へ反映
  item190_stoker.style.transform = `translate(${currentX}px, ${currentY}px)`;
}

JavaScript 側でアニメーションさせる(CSS的な要素を指定する)のはなんか好かないのですが、やり方やできること知っておこうと思いました。

【学習メモ】JavaScriptコードレシピ集 その9

JavaScriptコードレシピ集 の学習メモ 続きです。

JavaScript コードレシピ集

JavaScript コードレシピ集

Chapter9 フォーム要素の操作方法

161 テキストボックスの情報を取得したい

162 テキストボックスの変更を検知したい

イベント名 意味
change input要素の変更時のイベント
input input要素のキー入力時のイベント

input イベントはキー入力と同時にイベントが発生
change イベントは Enter キーを押したときやフォーカスが外れたときにイベントが発生する

// input要素の参照
const chapter09_text = document.querySelector('#chapter09_text');
// イベントを登録
chapter09_text.addEventListener('input', chapter09_text_handleChange);
function chapter09_text_handleChange(event) {
  // 値を取得する
  const chapter09_text_value = event.target.value;
  console.log(chapter09_text_value);
}

163 テキストエリアの情報を取得したい

164 テキストエリアの変更を検知したい

こちらもinputイベントとchageイベントがある
change イベントは少し遅延してイベントが発生する

// textarea要素の参照
const chapter09_textarea = document.querySelector('#chapter09_textarea');
// イベントを登録
chapter09_textarea.addEventListener('input', chapter09_textarea_handleChange);
function chapter09_textarea_handleChange(event) {
  // 値を取得する
  const chapter09_textarea_value = event.target.value;

  // 改行コードを改行タグに変換
  const chapter09_textarea_htmlStr = chapter09_textarea_value.split('\n').join('<br />');
  console.log(chapter09_textarea_htmlStr);
}

165 チェックボックスの情報を取得したい

const chapter09_cbA = document.querySelector('#chapter09_cbA');
const chapter09_checkA = chapter09_cbA.checked; // 選択状態を確認
console.log(chapter09_checkA); // 結果: false

const chapter09_cbB = document.querySelector('#chapter09_cbB');
const chapter09_checkB = chapter09_cbB.checked; // 選択状態を確認
console.log(chapter09_checkB); // 結果: true

const chapter09_cbC = document.querySelector('#chapter09_cbC');
const chapter09_checkC = chapter09_cbC.checked; // 選択状態を確認
console.log(chapter09_checkC); // 結果: false

// チェックボックスの状態を変更する
chapter09_cbC.checked = true;

166 チェックボックスの変更を検知したい

chapter09_cbA.addEventListener('change', (event) => {
  // 選択状態を確認する
  const chapter09_cbA_value = event.target.checked;

  const chapter09_cbA_log = `チェックボックスAは ${chapter09_cbA_value} になりました`;
  console.log(chapter09_cbA_log); // 結果: // チェックボックスAは true/false になりました
});

170 ラジオボタンの情報を取得したい

<form id="chapter09_radioGroup">
  <p>
    <!-- 1つ目のラジオボタン群 -->
    <label><input type="radio" name="fruit" value="apple" checked>apple</label>
    <label><input type="radio" name="fruit" value="orange">orange</label>
    <label><input type="radio" name="fruit" value="grape">grape</label>
  </p>
  <p>
    <!-- 2つ目のラジオボタン群 -->
    <label><input type="radio" name="drink" value="coke" checked>coke</label>
    <label><input type="radio" name="drink" value="wine">wine</label>
    <label><input type="radio" name="drink" value="tea">tea</label>
  </p>
</form>

選択状態取得するとき value はそこにくるのか。。少し気味悪い

// form要素の参照
const chapter09_radioGroup = document.querySelector('form#chapter09_radioGroup');

// 現在の選択状態を取得
const chapter09_fruitValue = chapter09_radioGroup.fruit.value;
const chapter09_drinkValue = chapter09_radioGroup.drink.value;

console.log(`fruitの値は ${chapter09_fruitValue} です`); // 結果: fruitの値は apple です
console.log(`drinkの値は ${chapter09_drinkValue} です`); // 結果: drinkの値は coke です

171 ラジオボタンの変更を検知したい

chapter09_radioGroup.addEventListener('change', chapter09_radioGroup_handleChange);
function chapter09_radioGroup_handleChange(event) {
  // 現在の選択状態を取得
  const chapter09_fruitValue = chapter09_radioGroup.fruit.value;
  const chapter09_drinkValue = chapter09_radioGroup.drink.value;
  console.log(`fruitの値は ${chapter09_fruitValue} です`); // 結果: fruitの値は apple です
  console.log(`drinkの値は ${chapter09_drinkValue} です`); // 結果: drinkの値は coke です
}

172 ドロップダウンメニューの情報を取得したい

173 ドロップダウンメニューの変更を検知したい

ドロップダウンメニュー = <select> 要素ですね
やり方はもう他のパーツと一緒ですね

// select要素の参照
const chapter09_select = document.querySelector('#chapter09_select');
chapter09_select.addEventListener('change', chapter09_select_handleChange);
function chapter09_select_handleChange(event) {
  // 現在の選択状態を取得
  const chapter09_selectValue = chapter09_select.value;
  console.log(`選択されているのは ${chapter09_selectValue} です`); // 結果: fruitの値は apple です
}

ファイル操作系

  • 167 ローカルファイルの情報を取得したい
  • 168 ローカルファイルのファイルをテキストとして読み込みたい
  • 169 ローカルファイルのファイルをDataURLデータとして読み込みたい

と特殊UI系

  • 174 スライダーの情報を取得したい
  • 175 スライダーの変更を検知したい
  • 176 カラーピッカーの情報を取得したい
  • 177 カラーピッカーの変更を検知したい

はスキップ

【学習メモ】JavaScriptコードレシピ集 その8

JavaScriptコードレシピ集 の学習メモ 続きです。

JavaScript コードレシピ集

JavaScript コードレシピ集

Chapter8 HTML要素の操作方法

DOM操作まわりの章です。見れば分かるけど自分でスクラッチで書けるかというと微妙なので一通りやってみました。
共通で使うHTMLは下記にしました。

<ul class="chapter08_list">
  <li id="chapter08_item01" class="chapter08_item">item01</li>
  <li id="chapter08_item02" class="chapter08_item">item02</li>
  <li id="chapter08_item03" class="chapter08_item">item03</li>
  <li id="chapter08_item04" class="chapter08_item">item04</li>
  <li id="chapter08_item05" class="chapter08_item">item05</li>
</ul>

136 セレクター名に一致する要素をひとつ取得したい

document.querySelector() メソッドは、セレクターに合致するHTML要素をひとつ取得するメソッドです。

セレクターに合致する、なのでCSSにおける #ID名, .クラス名, :nth-child(番号) などのこと。
複数合致する場合は最初の要素を返す。

const item136_item01 = document.querySelector('.chapter08_item');
console.log(item136_item01); // 結果: <li class="chapter08_item">item01</li>

const item136_item02 = document.querySelector('.chapter08_item:nth-child(2)');
console.log(item136_item02); // 結果: <li class="chapter08_item">item02</li>

137 ID名に一致する要素を取得したい

document.getElementById() メソッドは、ID名を指定してHTML要素をひとつ取得するメソッドです。

引数にセレクターではなくID名のみを指定する。

const item137_item01 = document.getElementById('chapter08_item01');
console.log(item137_item01); // 結果: <li id="chapter08_item01" class="chapter08_item">item01</li>

138 セレクター名に該当する要素をまとめて取得したい

document.querySelectorAll() メソッドは、セレクターに合致するHTML要素をすべて取得するメソッドです。

帰ってくるのは、複数の要素をひとまとめにしたオブジェクト(NodeListオブジェクト)。ひとつひとつを処理するには、forEach もしくは for 文を用いる。

const item138_nodeList = document.querySelectorAll('.chapter08_item');
console.log(item138_nodeList);
/* 結果: NodeList(5) [li#chapter08_item01.chapter08_item, li#chapter08_item02.chapter08_item, li#chapter08_item03.chapter08_item, li#chapter08_item04.chapter08_item, li#chapter08_item05.chapter08_item] */

// forEach を使う場合
item138_nodeList.forEach((targetList) => {
  console.log(targetList.innerHTML); // 結果: item01, item02, item03, item04, item05
});

139 クラス名に一致する要素をすべて取得したい

document.getElementsByClassName() メソッドは、クラス名を指定して合致するHTML要素をすべて取得するメソッドです。

引数にはセレクターではなくクラス名のみを指定する。
各要素を処理するには for 文を使う。

const item139_item01 = document.getElementsByClassName('chapter08_item');
console.log(item139_item01);
/* 結果: HTMLCollection(5) [li#chapter08_item01.chapter08_item, li#chapter08_item02.chapter08_item, li#chapter08_item03.chapter08_item, li#chapter08_item04.chapter08_item, li#chapter08_item05.chapter08_item, chapter08_item01: li#chapter08_item01.chapter08_item, chapter08_item02: li#chapter08_item02.chapter08_item, chapter08_item03: li#chapter08_item03.chapter08_item, chapter08_item04: li#chapter08_item04.chapter08_item, chapter08_item05: li#chapter08_item05.chapter08_item] */

// 各要素を処理する場合にはfor文を使う
const item139_itemList = document.getElementsByClassName('chapter08_item');
const item139_itemLength = item139_itemList.length;

for (let item139_index = 0; item139_index < item139_itemLength; item139_index++) {
  console.log(item139_itemList[item139_index]); // 結果: <li id="chapter08_item01" class="chapter08_item">item01</li> ...
}

jQuery だと $('.hoge')each() 使ってできちゃうのでちょっとややこしいですが、4つの違いおぼえなきゃですね

140 <html> 要素や <body> 要素を取得したい

プロパティー 意味
document.documentElement ルート要素 html 要素
document.head head 要素 head 要素
document.body body 要素 body 要素
document.body.classList.toggle('theme-dark');

みたいに書く

141 子要素・前後要素・親要素を取得したい

jQuery でいうところの parent(), child(), prev(), next() あたりの処理

プロパティー 意味
親ノード.children 子ノード 要素郡(HTMLCollection)
親ノード.firstElementChild 最初の子ノード 要素(Element)
親ノード.lastElementChild 最後の子ノード 要素(Element)
親ノード.nextElementSibling 次(弟)のノード 要素(Element)
親ノード.previousElementSibling 前(兄)のノード 要素(Element)
親ノード.parentNode 親のノード ノード(Node)
const item141_parentElement = document.querySelector('.chapter08_list');
console.log(item141_parentElement.children);
/* 結果: HTMLCollection(5) [li#chapter08_item01.chapter08_item,... */

const item141_firstElementChild = item141_parentElement.firstElementChild;
console.log(item141_firstElementChild); // #chapter08_item01
console.log(item141_firstElementChild.nextElementSibling); // #chapter08_item02
console.log(item141_firstElementChild.parentNode); // .chapter08_list

142 親要素の末尾に要素を追加したい

143 指定要素の直前に要素を追加したい

144 要素の前後に別の要素を追加したい

メソッド 意味 戻り値
親ノード.appendChild(子ノード) 親ノード内の末尾に子ノードを追加する 要素(Element)
親ノード.insertBefore(子ノード,直前のノード) 親ノード内にノードを追加する 要素(Element)
ノード1.before(ノード2) ノード1の前にノード2を追加する なし
ノード1.after(ノード2) ノード1の後にノード2を追加する なし
親ノード.hasChild(子ノード) 親ノードに子ノードが存在するかを確認する 真偽値

145 HTMLコードを要素として挿入したい

insertAdjacentHTML() メソッドは、第一引数の位置に第二引数の文字列をHTML(またはXML)として挿入するメソッドです。

使い方

const item145_container = document.querySelector('.chapter08_list');
// 挿入する .new-element 要素
const item145_newElement = `<div class="new-element">.new-element要素</div>`;

setTimeout(() => {
  // .chapter08_list 要素内先頭に .new-element を挿入する
  item145_container.insertAdjacentHTML('afterbegin', item145_newElement);
}, 1000);

第一引数は4つオプションありそれぞれ下記の位置に挿入する

<!-- beforebegin の位置 -->
<ul class="chapter08_list">
  <!-- afterbegin の位置 -->
  <li id="chapter08_item01" class="chapter08_item">item01</li>
  <li id="chapter08_item02" class="chapter08_item">item02</li>
  <li id="chapter08_item03" class="chapter08_item">item03</li>
  <li id="chapter08_item04" class="chapter08_item">item04</li>
  <li id="chapter08_item05" class="chapter08_item">item05</li>
  <!-- beforeend の位置 -->
</ul>
<!-- afterend の位置 -->

146 要素を動的に削除したい

setTimeout(() => {
  const item146_parent = document.querySelector('.chapter08_list');
  const item146_child = document.querySelector('#chapter08_item01');
  // #chapter08_item01 要素を取り除く
  item146_parent.removeChild(item146_child);
}, 3000);

147 自分自身の要素を削除したい

setTimeout(() => {
  const item147_child = document.querySelector('#chapter08_item05');
  // #chapter08_item05 要素を取り除く
  item147_child.remove();
}, 3000);

148 要素を生成したい

// div要素を生成する
const item148_divElement = document.createElement('div');
// innerHTMLで内容を生成する
item148_divElement.innerHTML = 'これは動的に生成された要素です';
// body 要素の末尾に追加する
document.body.appendChild(item148_divElement);

149 要素を複製したい

引数に true を渡すと、子ノードも複製します。

setTimeout(() => {
  const item149_cloneBox = document.querySelector('#chapter08_item02').cloneNode(true);
  document.querySelector('.chapter08_list').appendChild(item149_cloneBox);
}, 3000);

152 要素内のテキストを取得したり、書き換えたりしたい

jQuerytext()

const item152_text = document.querySelector('.item152_text');
console.log(item152_text.textContent); // 結果: テキストです。テキストです。

// 書き換え
setTimeout(() => {
  item152_text.textContent = 'テキストが書き換えされました。';
}, 2000);

153 要素内のHTMLを取得したり、書き換えたりしたい

jQueryhtml()
HTMLタグを含め文字列として取得する

const item153_html = document.querySelector('.item153_html');
console.log(item153_html.innerHTML); // 結果: <p>テキストです。テキストです。</p>

// 書き換え
setTimeout(() => {
  item153_html.innerHTML = '<p><b>HTMLが書き換えされました。</b></p>';
}, 2000);

154 要素(自分自身を含む)のHTMLを取得したり、書き換えたりしたい

これ jQuery だと一発のメソッドでできないような

const item154_html = document.querySelector('.item154_html');
console.log(item154_html.outerHTML);
/* 結果:
<div class="item154_html">
  <p>テキストです。テキストです。</p>
</div>
*/

// 書き換え
setTimeout(() => {
  item154_html.outerHTML = `<div class="item154_html"><p><b>HTMLが書き換えされました。</b></p></div>`;
}, 2000);

155 要素の属性を取得したり、書き換えたりしたい

これは jQuery だと getAttributehasAttribute 分ける必要なく attr() でやっちゃう感じですね。
hasAttribute は真偽値返すので有り無し判断はこちらを使ったほうが良さそう

<a class="item155_link" href="example.com">リンク</a>
<img class="item155_image" src="foo.png">
const item155_link = document.querySelector('.item155_link');
console.log(item155_link.getAttribute('href')); // 結果: example.com
console.log(item155_link.hasAttribute('href')); // 結果: true

const item155_image = document.querySelector('.item155_image');
// img要素のsrcをbar.pngに書き換える
item155_image.setAttribute('src', 'bar.png');

157 要素のクラス属性の追加や削除をしたい

addClass(), removeClass(), hasClass() ですね

const item157_item = document.querySelector('#chapter08_item03');
item157_item.classList.add('chapter08_item--extend'); // chapter08_item--extend クラスを追加
item157_item.classList.remove('chapter08_item'); // chapter08_item クラスを削除

item157_item.classList.add('hoge', 'fuga', 'piyo');
item157_item.classList.remove('fuga', 'piyo');

// 特定のクラスが追加されているかを調べる
console.log(item157_item.classList.contains('hoge')); // 結果: true
console.log(item157_item.classList.contains('fuga')); // 結果: false

158 要素のクラスの有無を切り替えたい

const item158_item = document.querySelector('#chapter08_item03');
// 1秒ごとにクラスを入れ替える
setInterval(() => {
  item158_item.classList.toggle('chapter08_item--toggle');
}, 2000);

  • 159 スタイルを変更したい
  • 160 スタイルを取得したい

はクラスの着脱ができればほぼ使うことないので飛ばしました。長かった。。