＜JavaScript＞配列・オブジェクト・DOM・CSSの上書き・更新の方法まとめ

2024年12月30日 00:25

配列：要素の上書き

配列[インデックス(配列の番号)]に　「＝」　で代入する

const interests ＝　['読書','ガーデニング','買い物'];
inrterests[1] = 'ゲーム';

オブジェクト：プロパティの追加と上書き

追加も上書きも、オブジェクトを変数宣言する。例えば変数をbookとする。

・追加　

オブジェクトに存在しないプロパティ名を、オブジェクトに「 . 」や「 [ ] 」でつなぐ。そして「＝」で追加したいプロパティの値を代入。

const book = {プロパティ名：値}
book . 新規プロパティ名 =　新規プロパティの値 ;
book [ 新規プロパティ名] =　新規プロパティの値 ;

const book =　{ title:'だるまちゃんとてんぐちゃん' }
book.author　= 'かこさとし';  
book['publisher'] = '福音館書店';

これで「author」と「publisher」が追加される。

・上書き

オブジェクトに既存のプロパティ名を、オブジェクトに「 . 」や「 [ ] 」でつなぐ。そして「＝」で追加したいプロパティの値を代入。

const book = {プロパティ名：値}
book . プロパティ名 =　プロパティの値;
book [ プロパティ名 ] =　プロパティの値;

const book = { title:'だるまちゃんとてんぐちゃん',author:'かこさとし',page:28 }
book.title ='だるまちゃんとてんじんちゃん';
book['page'] = 32;

これで「タイトル」と「page」が上書きされる。

DOM：指定要素を上書き（変更）する

基本的にはまず、要素を探して（document.querySelector）、その要素を変数宣言する。

！！注意！！：querySelectorで要素を選んだ場合は、初めの要素にしか変更が行われないので注意。querySelectorAllやループ処理を使う必要がある。これは、以下CSSやclass属性で使用の際も同様。

・テキストを上書き

探した要素に「.textContent」をくっつけて、「＝」で上書きするテキストを代入する。（ここでは変数をaとする）

const a ＝ document.querySelector(" 要素 ")　//要素を探す
a.textContent = " 上書きしたい言葉 ";

これで上書きされる。

・属性を上書き

探した要素に「 . 」で属性名をつなげる。そして「＝」で上書きしたい値を代入する。

const img = document.querySelector(” 要素 ”); //要素を探す
img.属性名 = ” 変更したい値 ” ;

・カスタムデータ属性の上書き

データ属性を指定する要素をquerySelectorで探して変数を宣言する。その変数に「.dataset.属性名のdata-以降」をくっつけ、「＝」で新しい値を代入。例えば、属性名をdata-user-nameとしたならば

const 変数名 = document.querySelector(" 要素 ");
変数名.dataset.属性名のdata-以降 = " Tarou ";

例えば、変数名をname、属性名をdata-user-nameとしたならば

const name = document.querySelector(".name");
name.dataset.userName = "Tarou";

といった感じになり、元々指定していたuser-nameがTarouに上書きされる。

CSSを上書き（変更）する

cssもDOMと同様に要素をquerySelectorで探して変数を宣言する。そして、その変数に「.style.CSSのプロパティ名」をくっつけて「＝」で新しい値を代入する。

const 変数名 = document.querySelector(" 要素 ");
変数名.style.CSSのプロパティ名＝" 新しい値 ";

変数名をp とするとプロパティ名をfont-sizeとすると

const p = document.querySelector("p");
p.style.fontSize = "24px";   

/*プロパティ名にハイフンが含まれている場合はハイフンなしの1文字目が大文字*/

これで24pxに変更できる。

class属性の変更

class属性の変更は、削除→追加　の流れになる。
変更したいclass属性が含まれる要素をquerySelectorで探し、変数を指定。
classListのオブジェクトを使用する。
.beforeクラスから.afterクラスに変える例で考える

1.削除　remove()メソッドを使う

classListのオブジェクトの後ろに「remove()」をくっつける。

const 変数名 = document.querySelector(" 要素 ");
変数名.classList.remove(" 削除するクラス名");

2.追加　add()メソッドを使う

classListのオブジェクトの後ろの「add()」をくっつける。

const 変数名 = document.querySelector(" 要素 ");
変数名.classList.add(" 追加するクラス名");

.beforeクラスから.afterクラスに変える例で考える

const p = document.querySelector('p');
p.classList.remove('before');
p.classList.add('after');

これでクラス名が変わるので、あらかじめ新しいクラス名でCSSを作っておけば、まるっとデザインを変えることができる。