DEV Community

loading...
Cover image for Access any HTML DOM Element, easier than ever

Access any HTML DOM Element, easier than ever

aj1thkr1sh profile image aj1thkr1sh ・2 min read

EnFields

Say, if you are developing the web application in JavaScript

You need to manipulate the HTML DOM to add event listener or actions or anything by mapping the HTML DOM to JavaScript variables

Example,
if below is the HTML

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

you need to map those HTML DOM to JavaScript variable to access

......
var name = document.getElementById("name");
var email = document.getElementById("email");
var mobileNumber = document.getElementById("mobile_number");
......
Enter fullscreen mode Exit fullscreen mode

then you can get the values or attach event or whatever you want to manipulate the HTML DOM

🤔 What if the library does this for you?

Say Hi, to EnFields

EnFields does the process for you

😲 How?

It is very simple. Include the library in you webpage

<script src="https://unpkg.com/enfields"></script>
Enter fullscreen mode Exit fullscreen mode

then,

EnFields.start();
Enter fullscreen mode Exit fullscreen mode

🎉 Ta-da!

The

<input type="text" id="name" placeholder="Name">

DOM will map to variable

_name
Enter fullscreen mode Exit fullscreen mode

😍

How cool, right?

⚙️ Naming Convention( What will be the name of the variable? )

The name given to the id that is

id="name"
Enter fullscreen mode Exit fullscreen mode

, the "name" is taken, appending with preceding underscore, so, the

_name
Enter fullscreen mode Exit fullscreen mode

is the variable generated, which will be added to window object. So, directly using

_name
Enter fullscreen mode Exit fullscreen mode

will refer to that HTML DOM

🔧 EnFields parameters

EnFields.start()
Enter fullscreen mode Exit fullscreen mode

accepts the object of below type,

  1. queryElement : is the value, where the variable generation process starts, if not provided then, all id element from the HTML DOM will be generated

Example

  <form id="user-form">......</form>
Enter fullscreen mode Exit fullscreen mode
  EnFields.start({
    queryElement: 'user-form'
  });

Enter fullscreen mode Exit fullscreen mode

The variable, will be generated for all the HTML DOM element containing id attribute, in user-form HTML DOM, including user-form tag

  1. targetObject : is used to assign the generated variable to the provided target object, instead of window object

Example

  var UserForm = {};

  EnFields.start({
    targetObject: UserForm
  });

Enter fullscreen mode Exit fullscreen mode

The variables will be generated and will be stored to UserForm object instead of window object

  1. idList : list of id names in array, if passed, variables will be generated only for the ids, contained in this array

Example

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

Enter fullscreen mode Exit fullscreen mode

The variable will be generated only for name and email HTML DOM

However, one can use all the three keys to make more flexible

Example

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

Enter fullscreen mode Exit fullscreen mode

⭐ Star on GitHub if you love

Discussion (2)

pic
Editor guide
Collapse
aarone4 profile image
Aaron Reese

Nice idea. Does it play nicely with jQuery or any of the major frameworks?

Collapse
aj1thkr1sh profile image
aj1thkr1sh Author

Hi,
Nice idea
Thanks

Does it play nicely with jQuery or any of the major frameworks?
Yes, if you can include the EnFields

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

in your page, you can use along with any other library

Thanks for the comment. All the best