JS--ノードの削除

ノードの削除

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

 

【ノード削除方法】
削除方法には、ChildNode オブジェクトの remove メソッドを使うか、 Node オブジェクトの removeChild メソッドを使うかです。

【remove メソッド】
 remove メソッドは指定のノードを削除します。

書式：childnode.remove()

例文
 id 属性が xxx のノードを削除する場合
let childnode = document.getElementById('xxx');

childnode.remove();

【removeChildメソッド】
Node オブジェクトの removeChild メソッドはノードを削除します。

書式：parentnode.removeChild(childnode)
1 番目の引数に指定した Node オブジェクトを削除します。

例文
 id 属性が xxx のノードの子ノードで id 属性が yyy のノードを削除する場合は次のように記述します。

let parentnode = document.getElementById('xxx');
let childnode = document.getElementById('yyy');

parentnode.removeChild(childnode);サンプルブラウザを立ち上げる「ノード削除1」をクリックする「ノード削除2」をクリックするどちらも、最後のノードだけ削除する

 

 

 

 

JS--id属性やclass 属性の取得及び設定

id・classなどの 属性の取得及び設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【属性とは】
属性とは、HTML のタグに補足情報を与える役割を持つもので、一般的には、id属性・class属性のようにタグに名前を付けたり、飾りをつけたり、働きを調整したりすることができます。

【属性の指定方法】
＜要素名 属性名="属性値"＞
〇〇の 〇〇は 〇〇です

属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。

【属性値を取得する(プロパティ)】
 JavaScript からはプロパティや、メソッドを使って属性値を参照したり新しい値を設定することができます。

要素に設定された属性値は次のようにプロパティ名として属性名を指定して参照することができます。

書式：element.属性名

使用できる属性名は、要素ノードのタグ毎に決まっており、どのタグでも使用できる共通の属性名と、特定のタグだけに用意された個別の属性名があります。

どのタグでも使用できる共通の属性名には id や class, style, title などの他にイベントハンドラ( onclick など)が用意されています(他にもあります)。

＜p＞タグや＜div＞タグは共通の属性名しか持っていません。 特定のタグでしか使用できない属性値には、例えば ＜a＞タグの href 属性や target 属性,＜blockquote＞タグの cite 属性などがあります。

id 属性や href 属性はそのまま 要素ノード.id や 要素ノード.href と参照できますが、 class 属性の class は他の意味で使用される言葉なので class の代わりに 要素ノード.className と参照します。他にも JavaScript で予約語と同じ名前の属性名については、もし属性名が xxx だった場合は代わりに 要素ノード.htmlXxx のように属性名の前に html をつけ属性名の最初の文字を大文字に変えてください。

属性名はあるけれど値が設定されていないときは空文字が返り、対象の要素ノードに対して存在しない属性名を指定して値を参照すると undefined が返されます。

サンプル

・ブラウザを立ち上げる

・ボタンをクリックすると、d 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性、 title 属性、 href 属性を取得してコンソールに出力します。

次の子要素である div タグには title 属性はありますが値が設定されていないので空文字が返され、 href 属性は存在しないので undefined が返されています。

【属性値を設定する(プロパティ)】
属性名を表すプロパティに対して値を設定することで、属性値に新しい値を設定することができます。

書式；element.属性名 = 'value'

属性名に対して値が設定されていた場合は、新しい属性値が設定されますが、属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素の href 属性の値を変更し、新しく target 属性の値を設定します。その後で href 属性の値と target 属性の値を取得してコンソールに出力します。

【属性値を取得する(getAttributeメソッド)】
要素の属性値を取得するもう一つの方法です。 Element オブジェクトの getAttribute メソッドは指定した属性名の属性値を取得します。

書式：element.getAttribute(qualifiedName)

引数には取得したい属性名を DOMString オブジェクトで指定します。
戻り値は引数に指定した属性名の属性値を DOMString オブジェクトで返します。指定した属性が見つからなかった場合は空文字か null が返されます。

普通はプロパティを使って属性値を取得する場合、 class 属性の値を取得するときは、プロパティ名として className を指定していましたが、 getAttribute メソッドを使う時は引数に 'class' のように属性名をそのまま指定します。

element.children[i].className→element.children[i].getAttribute('class')に書くことが出来る。

サンプル

・ブラウザを起動する

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性の値をそれぞれ取得してコンソールに出力します。

【属性値を設定する(setAttributeメソッド)】
要素の属性値を設定するもう一つの方法です。 Element オブジェクトの setAttribute メソッドは指定した属性名の属性値に新しい値を設定します。

書式；element.setAttribute(qualifiedName,value)

1 番目の引数に属性名、 2 番目の引数に属性値をそれぞれ DOMString オブジェクトで指定します。

属性名に対して値が設定されていた場合は新しい属性値が設定されます。属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素に新しく target 属性の値を設定し、次の子要素の class 属性の値に新しい値を設定します。そのあとで target 属性の値と class 属性の値を取得してコンソールに出力します。

 

js-- console.time メソッド

 console.time メソッド

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【タイマーを使って処理時間を計測】
Console オブジェクトで用意されている console.time メソッドをおよび console.timeEnd メソッドを使って、処理を行った時間をミリ秒単位で計測することができます。

・書式は
console.time(ラベル)
console.timeEnd(ラベル)

console.time メソッドを呼び出すと時間の計測が開始されます。そして console.timeEnd メソッドが呼び出されると、計測が終了し開始から終了までの経過時間をコンソールに出力します。ラベルを指定することで、複数のタイマーを同時に動かして計測することができます。計測が完了すると 'ラベル: xxxx ms' という形式でコンソールに出力が行われます。

サンプル

このサンプルでは最初に for 文を使って 1 万回変数に文字列を代入する処理を行う時間を計測し、次に while 文を使って同じ内容の処理を行う時間を計測しました。

【任意のタイミングで途中の経過時間をログに出力する】
Console オブジェクトで用意されている console.timeLog メソッドを使用すると、計測中の任意の地点でこのメソッドを呼び出した時点までの計測時間をミリ秒単位で計測することができます。

・書式は
console.timeLog(ラベル)

console.time メソッドを呼び出し時間の計測を開始してから console.timeEnd メソッドが呼び出されて計測が終了するまでの間で console.timeLog メソッドを呼び出すことで、途中の時点での計測時間をログに出力することができます。

途中までの計測時間は、最後に出力されるのと同じ 'ラベル: xxxx ms' という形式でコンソールに出力が行われます。

このサンプルでは最初に for 文を使った処理を 3 回行っています。計測の途中で console.timeLog メソッドを使い、途中までの計測時間もコンソールに出力しています。

JS--乱数

乱数を取得す方法

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【乱数を生成する(random)】
Math.random メソッドは乱数を生成して返します。
・書式は

Math.random()

0 以上 1 未満のランダムな浮動小数点数を作成して返します。乱数におけるシード(乱数を生成する設定値のようなものでう)を指定することはできません。

・サンプルコード

for (let i = 0 ; i < 5 ; i++){
  console.log(Math.random());
}

<span class="bold">>> 0.46734844249381324
>> 0.8023117892739917
>> 0.33077513353347476
>> 0.6943056771845824
>> 0.09784138022219802

0 以上 1 未満のランダムな値が 5 つ生成されました。この値は実行するたびに変わります。

例えば 1 以上 10 以下( 10 も含みます)のランダムな整数を得たい場合は次のように記述します。

for (let i = 0 ; i < 5 ; i++){   let num = Math.<strong>floor(Math.random() * 10) + 1;
  console.log(num);
}

>> 10
>> 6
>> 8
>> 2
>> 6

※ for 文の中で使っている Math.floor メソッドは小数点以下の値を切り捨てるメソッドです。

一般的に n 以上 m 以下のランダムな整数を得たい場合

function getRandam(n, m){
  for (let i = 0 ; i < 5 ; i++){
    let num = Math.floor(Math.random() * (m + 1 - n)) + n;
    console.log(num);
  }
};

getRandam(11, 20);

<span class="bold">>> 19
>> 17
>> 20
>> 17
>> 11

JS--グローバル関数のparseFloat

parseFloat 関数

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【parseFloat 関数】

グローバル関数のひとつである parseFloat 関数は、文字列を浮動小数点数に変換した値を返します。
・書式

parseFloat(文字列)

もし、引数が文字列でない場合は、文字列に変換したあとで浮動小数点数に変換する。

文字列の浮動小数点数への変換は次のように行われます。
(1)文字列の先頭にある空白を取り除きます。
(2)先頭に '+' または '-' がある場合は符号として扱います。
(3)数値でない文字が現れる直前までの文字列を浮動小数点数に変換します。

数値と判断される文字は数字の他にドット(.)と指数を表す e または E です。ただし二回目からのドット(.)は数値とはみなされません。

初めの文字が数値に変換できない場合は NaN を返します。

・サンプル

parseFloat("14");
> 14

parseFloat('  3.1415Data');
> 3.1415

parseFloat('5.8e-3');
> 0.0058

parseFloat('Good2000');
> NaN

parseInt 関数とは異なり paseFloat 関数では 0x や 0X で始まる文字は 16 進数の文字とは認識されません。この場合、数値の 0 と数値ではない 'x' と判断されます。

parseFloat('0x44F2');
>> 0

parseFloat('3A4B');
>> 3