任意のHTML DOM要素にアクセスする

フィールド
JavaScriptでWebアプリケーションを開発している場合は
HTML DOMをJavaScript変数にマッピングすることでイベントリスナやアクションや何かを追加するには、HTML DOMを操作する必要があります
例
下記のHTML

......
<input type="text" id="name" placeholder="Name">
<input type="email" id="email" placeholder="EMail">
<input type="number" id="mobile_number" placeholder="Mobile Number">
......

これらのHTML DOMをJavaScript変数にマップする必要があります

......
var name = document.getElementById("name");
var email = document.getElementById("email");
var mobileNumber = document.getElementById("mobile_number");
......

次に、値を取得したり、イベントを添付したり、何かをHTML DOMを操作したい

🤔 図書館があなたのためにこれをするならば、どうですか?

遠征する
Enfieldsはあなたのためのプロセスを行う

😲 どうやって?
それは非常に簡単です.あなたのライブラリを含める

<script src="https://unpkg.com/enfields"></script>

then,

EnFields.start();

🎉 田大!
The<input type="text" id="name" placeholder="Name">DOMは変数

_name

😍

どのようにクールな、右?

⚙️ 命名規則(変数名は何ですか?)
IDに指定された名前

id="name"

で、前のアンダースコアを追加します

_name

が生成される変数はウィンドウオブジェクトに追加されます.したがって、直接使用

_name

はHTML DOM

🔧 Enfieldsパラメータ

EnFields.start()

下記のオブジェクトを受け入れます.

QueryElement :変数生成処理が開始された値である場合、指定されていない場合、HTML DOMからのすべてのID要素が生成されます
例

  <form id="user-form">......</form>

  EnFields.start({
    queryElement: 'user-form'
  });

ユーザーフォームのHTML DOMで、ユーザーフォームのタグを含むid属性を含むすべてのHTML DOM要素に対して、変数を生成します

TargetObject :ウィンドウオブジェクト

の代わりに、生成された変数を指定されたターゲットオブジェクトに代入するために使用されます
例

  var UserForm = {};

  EnFields.start({
    targetObject: UserForm
  });

変数は生成され、ウィンドウオブジェクトの代わりにUserFormオブジェクトに保存されます

idlist :渡されるならば、配列のID名のリストは、この配列

に含まれるIDのためにだけ、変数を生成します
例

  EnFields.start({
    idList: ['name', 'email']
  });

変数は、名前とメールのみで生成されます
しかし、より柔軟にするために
例

EnFields.start({
  targetObject: UserForm,
  queryElement: 'user-form',
  idList: ['name', 'email']
});

あなたが愛しているならば、⭐ Star on GitHub