JS--オブジェクト指向のclassを理解する

オブジェクト指向のclassを理解する

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

【classとは】
JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。

classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。

基本構造
class MyClass {
　constructor() {
　// コンストラクタ: インスタンスを作成する際に実行されるメソッド
　// インスタンス固有の初期化処理を行う
}
method1() {
// メソッド1の定義
}
method2() {
// メソッド2の定義
}
}
以上がMyClassというクラスを定義した。

【クラスを使う場面】
例えば、商品情報を持った複数のオブジェクトを作りたいとします。
クラスを使わずに、オブジェクトを用意するとした場合に用いられる。

サンプル
const product1 = {
　　name: '商品A',
　　price: 300,

display(){
　　console.log(`商品名:${this.name} 値段:${this.price}円`);
　}
}
const product2 = {
　name: '商品B',
　price: 400,

　display(){
　console.log(`商品名:${this.name} 値段:${this.price}円`);
　}
}
const product3 = {
　name: '商品C',
　price: 1000,

display(){
console.log(`商品名:${this.name} 値段:${this.price}円`);
　}
}
この商品の例をクラスを使って実装すると、以下のようになります。
class Product{
    constructor(name,price){
        //thisの設定、プロパティの初期化
        this.name = name;
        this.price = price;
    }

    //各インスタンスが参照するメソッドを定義
    display(){
        console.log(`商品名:${this.name} 値段:${this.price}円`);
    }
}

【new演算子】
クラスは関数ですが、一般的な関数とは異なり実行する際は、クラス名の前に「new」をつけます。

const product1 = new Product("商品A",300);

【クラスを使ったhtmlのサンプル】

「class.html」ファイルのコード

「script.js」

ブラウザを立ち上げる

値を入れてクリックする

 

HTMLを表す文字列からノードを作成し指定の位置に追加

HTMLを表す文字列からノードを作成し指定の位置に追加

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

【ノードを指定の位置に追加する】
Element オブジェクトの insertAdjacentHTML メソッドを使うと指定した文字列からノードを作成し追加することができます。

書式：element.insertAdjacentHTML(position, text)

2 番目の引数に指定した文字列を HTML 文として解析し、 HTML 文からノードを作成します。作成したノードを 1 番目の引数で指定した位置に追加します。

1番目の引数で指定する位置

2 番目の引数には HTML として解析可能な文字列を指定
例文：'＜p class="msg"＞Hello＜/p＞'

サンプル

・ブラウザを立ち上げる

「前のノードを追加」ボタンをクリックすると、 id 属性が shopinfo の要素ノードの前にノードを追加します

「子ノードの先頭にノードを追加」ボタンをクリックすると 、id 属性が shopinfo の要素ノードの子ノードの先頭にノードを追加します。

以上

 

JS--要素に設定された属性を削除

要素に設定された属性を削除

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

【属性を削除する】

Element オブジェクトの removeAttribute メソッドは、対象の要素に設定されている属性を削除します。

書式：element.removeAttribute(qualifiedName)

引数には削除する属性の属性名を DOMString オブジェクトで指定します。設定されていない属性名を指定した場合は何も行いません。

サンプル

ブライザを立ち上げる

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

querySelectorのサンプル

querySelectorのサンプル

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

【querySelectorのサンプル】
querySelector メソッドは CSS セレクタ形式で条件を指定して要素ノードを取得する。

ブラウザを立ち上げる

ボタンを押すと

コンソールに表示されたら、OK

【querySelectorAllのサンプル】
querySelectorAll メソッドを使ったサンプルを試してみます。 querySelectorAll メソッドは条件に一致するすべての要素ノードを取得します。

ブラウザを立ち上げる

ボタンを押す

 

class属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得

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

【getElementsByClassName メソッド】
Document オブジェクトの getElementsByClassName メソッドは、要素の class 属性の値を指定して一致する要素ノードをすべて取得します。

【書式と使い方】
・書式
document.getElementsByClassName(classnames)

引数には class 属性の値を DOMString オブジェクトで指定します(例えば 'box' など)。複数の class 属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば 'box menu' など)。戻り値は HTMLCollection オブジェクトです。

【HTMLCollection オブジェクトとは】
HTMLCollection オブジェクトは複数の要素ノードの集合です。 HTMLCollection オブジェクトでは length プロパティと item メソッド、および namedItem メソッドが用意されており、次のように取得した要素の数を取得したり、指定の要素を取り出すことができます。

let elements = document.getElementsByClassName('box');

// 取得した要素の数を取得
let len = elements.length;

// インデックスを指定して要素を取得
let element = elements.item(0);

// 次の形式でもインデックスを指定して要素を取得
let element = elements[0];

同じ class 属性の値をを持つ要素ノードは、 HTML ページの中で記述された順番にインデックスが割り当てられています。インデックスは最初が 0 で 1, 2, 3... と続いていきます。

指定した class 属性の値が付けられた要素ノードが見つからなかった場合、 getElementsByClassName メソッドは null を返すわけではなく、 length が 0 の HTMLCollection オブジェクトを返します。

サンプルコード

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞getElementsByClassName＜/title＞

＜style type="text/css"＞

  div, p{

    padding:20px;

    margin:10px;

    width:30%;

  }

  .box{

    border:1px solid #ff0000;

  }

＜/style＞

＜/head＞

＜body＞

＜p＞外出記録＜/p＞

＜div class="box"＞

  ＜p＞今日は外でランチを食べました＜/p＞

  ＜p class="box"＞場所：港区南青山＜/p＞

  ＜p class="box"＞店名：リストランテ南青山＜/p＞

＜/div＞

＜button onClick="getElements();"＞要素を取得＜/button＞

＜script＞

function getElements(){

    let elements = document.getElementsByClassName('box');

    let len = elements.length;

    for (let i = 0; i

        elements.item(i).style.border="2px solid #0000ff";

    }

}

＜/script＞

＜/body＞

＜/html＞

サーバーを立ち上げブラウザで表示する

 
ボタンをクリックすると下図の様になる。