ProtoViewLogic: createElement()

与えられた記述子に基づいて Element を生成します。

構文

ProtoViewLogic.createElement(componentDescriptor) => Element

引数

• componentDescriptor: object

  定義する Element の記述子です。

  これは以下のプロパティを持つオブジェクトです：

  • tagName: string

    定義する Element のタグ名を指定します

  • value: string | undefined （省略可）

    定義する Element の value 属性の値を指定します

    info

    • value の指定は attributes 内の value 属性の指定に優先します（後者の値は前者の値で上書きされます）

  • text: string | undefined （省略可）

    定義する Element の textContent を指定します

    info

    • children プロパティと併用した際、text は定義される Element の最初のノード (firstNode) として登録されます（結果として children のインデックスは 1 つずれることに注意してください）

  • children: Array<Element | string | object> | undefined （省略可）

    定義する Element の子のノードとなる要素、テキスト、または要素の記述子を指定します

    info

    • text プロパティと併用した際、定義される Element の最初のノード (firstNode) として text が先に登録され、それに続いて children の成分が追加されます（結果として children のインデックスは 1 つずれることに注意してください）

  • primary: string | undefined （省略可）

    定義する Element の data-primary カスタムデータ属性の値を指定します

    info

    • primary の指定は attributes 内の data-primary 属性の指定に優先します（後者の値は前者の値で上書きされます）

  • activeEvents: string | Array<string> | undefined （省略可）

    定義する Element の data-active-events カスタムデータ属性を指定します

    info

    • activeEvents の指定は attributes 内の data-active-events 属性の指定に優先します（後者の値は前者の値で上書きされます）
    • string として指定した場合、カンマ区切りされたイベント種別の文字列になっていなければなりません

  • attributes: object | undefined （省略可）

    定義する Element の属性を指定します。

    定義する属性と同じ名前を持つプロパティに、設定する値を持たせたオブジェクトを指定します。

    info

    • value, primary, activeEvents プロパティの指定は attributes 内の value, data-primary, data-active-events 属性の指定に優先します（後者の値は前者の値で上書きされます）
    • attributes 内の id 属性の指定は常に無視され、記述子を持つプロパティ名 またはそれに配列の添え字を付けたものが使用されます（前者は componentDescriptors のプロパティが object の場合、後者は object の配列だった場合に使用されます）

返値: Element

引数 componentDescriptor に従って初期化された Element。

例外

• AggregateError
  • 以下のいずれかの例外が発生した場合、それらを集約した AggregateError が発生します：
    • TypeError: 値 componentDescriptor が非 null のオブジェクトでなかった場合
    • TypeError: 値 componentDescriptor.tagName が文字列でなかった場合
    • TypeError: 値 componentDescriptor.value が null でも文字列でもなかった場合
    • TypeError: 値 componentDescriptor.text が null でも文字列でもなかった場合
    • TypeError: 値 componentDescriptor.children が null でも反復可能オブジェクト (iterable) でもなかった場合
    • TypeError: 値 componentDescriptor.primary が null でも文字列でもなかった場合
    • TypeError: 値 componentDescriptor.activeEvents が null でも文字列でも反復可能オブジェクト (iterable) でもなかった場合
    • TypeError: 値 componentDescriptor.attributes が null でも非 null オブジェクトでもなかった場合
    • TypeError: 記述子のプロパティ tagName がタグ名として正しくなかった場合
    • TypeError: 記述子のプロパティ activeEvents が文字列でない成分を含んでいた場合
    • TypeError: 記述子のプロパティ activeEvents が空文字列または空白のみからなる文字列を含んでいた場合
    • TypeError: 記述子のプロパティ attributes が空文字列または空白のみからなる文字列をキーとするプロパティを持っていた場合
    • TypeError: 記述子のプロパティ attributes が NaN を値とするプロパティを持っていた場合
    • TypeError: 記述子のプロパティ attributes が Symbol 型の値のプロパティを持っていた場合
    • TypeError: 記述子のプロパティ attributes が function 型の値のプロパティを持っていた場合
    • TypeError: 記述子のプロパティ children が Element でも文字列でも非 null のオブジェクトでもなかった場合

例

//  SP
const { ProtoViewLogic } = await Alier.import("/alier_sys/ProtoViewLogic.js");
//  Web
//  import { ProtoViewLogic } from "/path/to/alier/src/ProtoViewLogic.js";

//  <button> 要素を生成する
const button_ok = ProtoViewLogic.createElement({
    tagName     : "button",
    value       : "ok",
    text        : "OK",
    activeEvents: "click",
    attributes  : { type: "button" }
});

//  生成した button_ok の内容を確認する
console.log(button_ok);
//  ==> HTMLButtonElement

解説

与えられた引数 componentDescriptor に従って、Element を生成します。