DEV Community: Aad Pouw

Some js here for a change (getElemsByDataset)!

Aad Pouw — Sun, 27 Sep 2026 08:58:19 +0000

Explanation:

As I'm working on the development
of a contentEditable based editor,
I make use of the dataset
attribute intensively.

Mostly I work with the
DOM tree directly but there are situations that I have to collect the elements.

For that I use
document.getElementsByTagname (this wrapped in a method,called 'getTagNames()').

It's okay and I get things
done with it. Just sometimes it would be more handy if could collect a bunch of elements with different tag names, at once!. Sure I can use document.getElementsByClassname but that also has its pitfalls.

Therefor I began
to think, why is there not
something like
'*.getElementsByDatasetNameValue'?
Because then you can give a group of elements a related dataset name/value and collect them with one call, regardless of their 'tagnames'.

As it kept me busy, I gave it a closer look.
I began with reading about those built-inn HTML methods and how they are built first. For this I had a look at whatwg.org#concept-getelementsbytagname / 4.5. Interface Document. Interesting to get some idea of how they are built but that's it.

Then I asked myself, can I create something like that with js and I gave it a try?

The steps:

One:

I created a class and
a related export function for it 'GetElemsByDataset \ getElemsByDataset' \
"I have kept 'NameValue' left out of it because this is clear and long enough."

Two:

☛ Find a way to
collect the elements for it first and this I did by creating this method.

/*
 * @action: collecting the tags.
 * @notice: It is possible to omit a parent element
   but not recommended because that could become a huge list of elements.
 */
get_tag_names = async (...args) => {
  const [prt_el = null, log = false] = args
  let el;
  if(prt_el !== null)
    el = prt_el.getElementsByTagName('*');
  else
    el = document.getElementsByTagName('*');
  if(log === true)
    console.log('getTagNames(*)',el);
  return el;
}

Three:

☛ Creating from this obtained values a 'for of loop', and collect the elements based on 'dataset names and values' within the class constructor.

constructor(...args){
  const [prt_el,data_name, data_val,log = false] = args;
  this.#dn = data_name;
  this.#dv = data_val ?? null;
  this.#prt_el = prt_el ?? null;
  this.#get_tags = [];
  (async()=> {
    if(this.#prt_el !== null){
      /*
       * @action: collecting the tags.
       * @description: this method is using the '*' to collect all the available elements from the parent element and are placed in a 'for of'.
       */
       const tags = await this.get_tag_names(this.#prt_el,log);
       for(const tag of this.unique_array(tags)){
         /*
          * @action: collecting  the elements based on a dataset 'name' or 'name/value pair'.
          */
          if(tag.dataset[this.#dn] !== undefined){
            if(this.#dv === null){
              tag.dataset[this.#dn];
              this.#get_tags.push(tag);
           }else if(tag.dataset[this.#dn] === this.#dv){ 
             tag.dataset[this.#dn] = this.#dv;
             this.#get_tags.push(tag);
           }
        }
      }
      const gt = this.unique_array(this.#get_tags);
      if(log === true)
        console.log('elems: ', gt );
    }       
  })();
}

How to use:

just copy/paste it, place it in your script folder and use 'import' to connect to it (how you do that is up to you).
it accepts four arguments.
- parent_el: ☛ This is the nearest element that holds the sub elements with the desired dataset names.
- data_name: ☛ Here you pass the dataset name like this 'fooBar' but not 'data-foo-bar' or 'foo-bar'!
- data_val: ☛ Here you can pass a dataset value! This is optional.
- log: ☛ standard value is 'false', when set to true it shows the relevant data in your dev tools.

Example/Use Case:

☛ This is a class of a new project that I just started last Wednessday. This class uses also some other methods but the focus here is getting the elements by dataset 'name/value'.

/*
 * @action: creates & collects objects for later use elsewhere. 
 * @description: 
*/
constructor(obj_args){
  const {get_prts} = obj_args;
  const create_obj = MH.createObjects;
  const remove_obj = MH.removeObjects;
  const ctb = MH.createTreeBlock;
  const gb = MH.getBoundings;
  //where I focus on.
  const gebd = MH.getElemsByDataset;
  (async()=> {
    const dom_data = await create_obj('dom_obj',{...obj_args});
    await remove_obj(['grant_data','get_prts'],dom_data);
    if(get_prts.length > 0){
      for(const prt_ctn of get_prts){
       //where the magic happens!
       this.layers = await gebd(prt_ctn,'topLayer');
       if(this.layers.length > 0){
         const layers = this.layers;
         for(const layer of layers){
          const prefs = layer.dataset.prefix;
          //another magical method but not the focus here!
          await ctb(gb,layer,dom_data,`${prefs}_ctn_data`,prefs,3,true);
          }
          await DE.dataTopLayer(dom_data);
          await DE.dataMainLayer(dom_data);
          await DE.dataBtmLayer(dom_data);
        }
      }
    }
  })();
console.table({'DTLS': obj_args});
}

This results in:

    (3) ➜ top_ctn <section class="relative" data-top-layer="df-top-ctn" data-prefix="top">
    (3) ➜ main_ctn <main class="relative" role="presentation" data-top-layer="df-main-ctn" data-prefix="main">
    (3) ➜ btm_ctn <section data-top-layer="df-bottom-ctn" data-prefix="btm">

The goal of this method!

top_ctn_data
  Object { top_ctn: section.relative, top_ctn_dims: DOMRect }   
main_ctn_data
  Object { main_ctn: main.relative, main_ctn_dims: DOMRect }
btm_ctn_data
  Object { btm_ctn: section, btm_ctn_dims: DOMRect }

You will find it here:

☛ getElemsByDataset:

That's it!

Why I have ditched the QuerySelector

Aad Pouw — Sat, 11 Apr 2026 15:14:38 +0000

Why?

The 'document.querySelector()' has many downfalls.
- There are many articles on the web to read more about it!
As I work the Javascript OOP way, I don't need it.

What I do instead and what I want to share here is this:

Connecting to the DOM directly.
What I do is making use of already available object keys in the dom tree:

document.activeElement (in callbacks and aside of event.target)
firstElementChild
lastElementChild
children
- length
nextElementSibling
parentElement
previousElementSibling

Some Wisdom first:

If a parent element has just one child element.
The values of 'firstElementChild' and 'lastElementChild' are equal.
This means that 'lastElementChild' can be used too!
☛ Bad practice, because if there is a new element to be added at a later stage then things are broken.
☛ Good practice is just to stick to 'firstElementChild' and leave 'lastElementChild' free for future use.

How do I do that?

It's about creating a central point to work from.
Next is to create the objects out of them.
For this I use a Map() based function, called 'createObjects('obj_name',{})'.

Working it out:

First a reflection of my used html body structure:

<body>
  <div class='wrap container display-flex relative'>
    <section class='top relative'>
      <header class='relative'>
        <h3 class='relative'>example heading.</h3>
      </header>
    </section>
    <main class='relative'>
      <main-content class='workbench-ctn absolute'>
        <content-item class='wb-content relative display-flex'>
          Dynamic content
        </content-item>
      </main-content>
    </main>
      <div class='controls-ctn relative display-flex'>
        <aside class='sidebar-ctrl top relative display-flex'>
          Some other elements
        </aside>
        <aside class='open-close-block absolute'>
        <details id='toolbar_toggle' class='toggle toolbar relative' open>
          <summary class='tb caret-up-uc relative' title='close toolbar'></summary>
          </details>\
          <details id='menubar_toggle' class='toggle menubar relative' open>\
            <summary class='mb caret-left-uc relative' title='close menubar'></summary>
          </details>

        </aside>
        <aside class='sidebar-ctrl left relative display-flex'>
           Other elements, dynamically added or used for callbacks
        </aside>
      </div>
  </div>
</body>

Then a file that I've created for this and is called 'get_dom_objects.js'.

There are two functions in this file:

getDomObjects() (for elements that have been created already)

getDomObjectsExtended(obj_args) (for elements that not have been created yet or elements that will be used at a later stage).

import * as FT from './functions.js';

export async function getDomObjects(){
  const get_objects = await FT.createObjects('base_obj',{
    //1. Obtaining the document.body
    body_elem: document.body,   
      //other objects
  });  

  //2. Creating a const for further use.
  const {body_elem} = get_objects;

  //3. Obtaining the very first element after the body
  /**
   * It's easy, each body element has a firstElementChild
     and what that is?
   * As I'm using the given example here, 
     it is the _'div.container'_ element.
   */   
  get_objects.wrap_ctn = body.firstElementChild;

  //4. For this I create another const and also for 
       further use.
  const {wrap_ctn} = get_objects;

  //5.
  /**
   * For getting the elements after the 'div.container',
     there are different ways to do that.
   * A. by using (not recommended!)
        'first/last' - 'ElementChild' & 
        'next/previous' -  'ElementSibling'.
   * B. by using (recommended) 'children.length'. 
   */
  // This way    
  if(wrap_ctn.children.length > 0){
    const wrap_children = wrap_ctn.children;
    get_objects.top_ctn = wrap_children[0];
    get_objects.main_elem = wrap_children[1];
  } 

  //6. Creating consts from that.
  const {top_ctn,main_elem} = get_objects;

  (I skipp the 'top_ctn' as there is no need for)
  //7. Getting the elements inside the 'main_elem'
  get_objects.workbench_ctn = main_elem.firstElementChild;
  get_objects.controlls_ctn = main_elem.lastElementChild;
  return get_objects;   
});

Now I have all the objects that I'm going to use in getDomObjectsExtended(obj_args) function.

export async function getDomObjectsExtended(obj_args){
  const {body_elem,wrap_ctn,top_ctn,main_elem,
         workbench_ctn,controlls_ctn} = obj_args;
  const get_objects = await FT.createObjects(('ext_obj',{
    //1. Including the previously created objects    
    body_elem,main_elem,workbench_ctn,
    controlls_ctn,top_ctn,
  });
  //2. Moving on with creating the objects!
  get_objects.wb_content = workbench_ctn.firstElementChild;
  if(controlls_ctn.children.length > 0){
    const controls = controlls_ctn.children;
    get_objects.ctn_top = controls[0];
    get_objects.open_close_block = controls[1]; 
    get_objects.ctn_left = controls[2];  
  }
  const {open_close_block} = get_objects;
  get_objects.toggles = {
    //toolbar_toggle
    tb_toggle: open_close_block.firstElementChild,
    //menubar_toggle 
    mb_toggle: open_close_block.lastElementChild,   
  };        
  return get_objects;   
};

Using those created objects:

In my modules folder I have a file called modules_collect.js, this contains one function modulesCollect() and this is the file passed to my index.js.\
Within that file:

I Collect all the imports from the sub folders.
I'm passing the objects to the classes & functions within those sub folders. #### The steps:

☛ In 'index.js' this:

  const dom_elems = await getDomObjects();
  await modulesCollect(dom_elems);

☛ In 'modulesCollect' this:

export const modulesCollect = async (obj_args)=>{
  const obj_args_ext = await getDomObjectsExtended(obj_args);
  //Passing obj_args_ext to the _classes_ and _functions_   
  //This could be as a whole or partially {destructed}  
};

What I use in my classes and functions for getting around?

-.getElementsByClassName();
- packeted in a custom function called 'getClasses()'.
-.getElementsByTagName();
- packeted in a custom function called 'getTagNames()'.

Recently I have created a tooltip module, this module is very small.
The module itself is up and running, what is left is creating a repo and some documentation for it.
After that, I might create a use case out of it and breaking things down?

Freedom for all:

It's about sharing of how I do things.
If you're happy with the way you work already, stick to it!

That's it.

About the commandfor attribute.

Aad Pouw — Sun, 22 Mar 2026 06:48:16 +0000

What I want to share here is my experiences with the commandfor attribute.

Short intro:

I'm using it in my moduleEditor, where I'm working on.
This is a fully OOP based package and this means that all the HTML elements are programmatically created and directly appended to the DOM.

Note:

The development itself I do on my localhost and when the time is right I push an updated version to GitHub.

At present:

I'm working on the development of my 'ol/ul/li' module and as this elements have a lot of options to be implemented.
I'm working on a popupable toolbox to cater that.

For this I'm making use of the commandfor/command and popover attributes and the command event.
(This attributes here are passed to button elements and a target element.)

Explanation:

For the creation of those buttons, I'm using a predefined function and in this function I have this rule:

create_elem.commandForElement = command_for;

This function I use within another function and this function contains this rule and creates another element.

const toolbox_ctn = await SEE.toolboxCtnElem(toolbox_ctn_data);

Here is what I experienced with the 'commandfor' attribute.

First I passed 'elem_id' to the create_elem.commandForElement rule, this gave an error, then I tried 'toolbox_ctn.id' and same story.

What I got was this:
Uncaught (in promise) TypeError: HTMLButtonElement.commandForElement setter: Value being assigned is not an object.

Then when reading this message, I found the clue!

'commandForElement' wants an object being passed and not an id!

In this case, what I had to pass here was 'toolbox_ctn' because that is the object and solved the error.

Also the command_for attribute here stays empty.

<button class="tbx-btn open relative" title="open" command="--open-toolbox" commandfor="">+</button>

Alternatively:

By using the following rule and instead of using HTMLButtonElement.commandForElement, it is possible to use an id.

create_elem.setAttribute('commandfor',command_for);

!For within this package I prefer to stick to HTMLButtonElement.commandForElement approach.

Final word:

When working with 'HTMLButtonElement.commandForElement' directly , it is an object to be passed and not an id!

That's it!

Why I prefer my own 'new Map()' based createObjects() function over 'new Map()' *.set().

Aad Pouw — Sun, 25 Jan 2026 04:02:26 +0000

It's about, why I prefer this function over using 'new Map()' *.set()?
First the code:

export async function createObjects(...args){
  const [map_object = null, map_entries = null] = args;
  if(map_object !== null && map_entries !== null){
    const map = new Map([[map_object,map_entries]]);
    return map.get(map_object);
  }
  return null;
};

The advances of this function over using
*.set('key1', 'value1');
*.set('key2', 'value2');

It can be used in the same way as using an ordinary object structure, doing the same thing as 'set' and is much shorter;

  const foo = {key1: val1,key2: val2,};
  const bar = await FT.createObjects('bar_obj',{key1: val1,key2: val2,});

  const foo = {};
  foo.key1 = val1;
  foo.key2 = val2;

  // 'FT' is a namespace and is from 'import * as FT from "...js"'!
  const bar = await FT.createObjects('bar_obj',{});
  bar.key1 = val1;
  bar.key2 = val2;

  bar['key1'] = val1;
  bar['key2'] = val2;

Note:

It's used in:
My recently created '*ModuleEditer' and wherover more at a later stage.

(*)Is part of my present GH page aadswebdesign

My present rebuild of my github page and wherover more at a later stage too.

Also, I do this rebuild on my localhost and I will replace my present GH page, when the time is right for it.

That's it!

How I Process things?

Aad Pouw — Sun, 31 Aug 2025 05:35:40 +0000

Intro.

Somehow this should have been my very first post here!

It's about what over the years took me to of where I'm now with my coding skills and that is this.

1. Having an idea.

That is where it begins with "like a feature for my github page!", then I begin to gather the needed info of how to create that feature.

2. Figuring out of how to do it.

Figuring out of how to get my idea realised, trying to understand the concept and if needed lookup some examples or following a tut.

3. Start Coding.

Finally and the best way to get forward, I open the editor and start coding.
Sure and depending on the complexity, making mistakes and doing things completely wrong.

Then learn from that and put persistence in place until I get it right.

My credo always is this:

While and as long as the pc doesn't smoke, it is all okay to make mistakes 😉!

4. Getting It Right.

When I get it right, I move on and up to the next challence!

In a nutshell.

Yes for me it's about being busy with it; learning, making mistakes, solving them and proceed to the next challence!

What I don't do!

As I work with many concepts, there is no way that I remember them all and I don't even try it!

There is no need for too, because there is MDN where I can find 99% of what I want too know!

What I also learned is this.

There are moments on the road that I don't make any progress. When that occurs, I learned that having a break or looking the other way can do wonders. It helps to get a fresh new look on where I was working on!

It happens that I solve things in seconds, where I previously spent hours on!

Trying things out.

Trying things out, that is also what I do from time to time. Looking with a sharp eye to what I've created and or I can improve it, making it more KISS!

Yes, my goal is always to Keep It Short and Simple!

That's it.

How I load web-components

Aad Pouw — Wed, 13 Aug 2025 09:19:07 +0000

Intro.

This is a follow up of my previous article How I load my js.
What I use as an example here are three simple webcomponents for my articles, extensions of the HTMLDivElement and they are called (<article-header>,<article-main> and <article-footer>).
The aim of it is to make my articles more easy maintainable. Also,it is about of how I load them and not of how they are created.

How I do it?

Step 1

Somewhere in my folder structure I have a folder called webComponents, within that I have a folder that contains the web components and a js file called components_export.js and contains three exports like this:

export {articleHeaderDefine} from './path_to/article_header.js';

Step 2

Within my index.js I have this:

import * as WCP from './../path/to/components_export.js';
(async()=>{
  //note; in this case order doesn't matter but they should be invoked before anything else (on top)!
  await WCP.articleHeaderDefine();
  await WCP.articleMainDefine();
  await WCP.articleFooterDefine();
})();

Explanation.

And as stated in my previous article!
The components are part of my iife and this is a fullfilled promise before it enters the index.html. As a result of that, they are available in any order and at any time.

At last.

For who this is?
Those who are new to Javascript and want to learn more about it or just want to improve their skills as I constantly do too.

Some links here for more info.

More about IIFE at MDN(IIFE)

More about Javascript Modules at MDN(JS Modules)

How I load my js?

Aad Pouw — Mon, 11 Aug 2025 15:59:51 +0000

Intro

And after a long hiatus a new article about how I load my js.
Then, recently I read an article about Bulletproof web component loading and written by Chris Go Make Things and someone who knows a lot more about javascript as me. It was about loading in the footer or in the head and using 'async/defer'

His Approach.

His 'bulletproof' approach was by using document.readyState and DOMContentLoaded in his component classes.

My idea.

This way might be bulletproof but complex and hard to maintain.
The way I load my js is Simple, Bulletproof, Fast and hardly needs any maintenance.

How I load my js?

It's about loading js this way:

First step is to have an index.js within the scripts folder and that contains the following.

//the imports on top
(async ()=>{
    /** 
      This is the place where all the js logic
      ends up but in the right order!
   */
})();

Second step, within your index.html this:

<script type='module' src='./path/to/scripts/index.js> </script>

Explanation

At the first step, the code has been placed in an async (Immediately Invoked Function Expression)!
That iife, is the final place where my js stuff ends up.
This means that the promise is 100% fulfilled before it's passed to my index.html.
So what I get is a single substance that is complete and ready to use.
Actually I rarely look at it, is no need for!

Note!

Placing all in the right order within you index.js is important!

Final.

A Simple, Bulletproof and Fast way of loading js!
That's what I wanted to share!

More about IIFE at MDN(IIFE)

How I do: export/import?

Aad Pouw — Sun, 12 Jan 2025 07:09:55 +0000

(First, it's about of how I do things, no must(not) do this or that here!)

I know there are many more ways to deal with javascript module export/import but this is of how I use it mostly!

EXPORT

How I'm not doing it and why?

function foo(){}
function bar(){}
function other(){}
export {foo,bar,other}

At this way, the file has to be maintained. As soon as there are functions changing/added or removed you have to spend time to update this list X

How I do it then and why?

export function foo(){}
export function bar(){}
export function other(){}

That might be clear, there is nothing to be maintained here V

IMPORT

It depends, if there are only one or two functions to be imported then I do it this way:

import {foo,bar} from './path/to/let/say/functions.js';

If it is more then that, same story as by export. It has to be maintained and there is no need for that. X

How I do it then and why?

import * as FT from './path/to/let/say/functions.js';
//using it
FT.foo()
FT.bar()
FT.other()

This way, it is always up-to-date, and no maintenance required V

About wildcard/namespace

I make sure it is in uppercase ,short and reflects the imported filename

So in this example FT is short and reflects the imported file Func-Tions.js

That's it about my use of javascript module export/import.

My first post here and I have more in mind but for another time!

My details/summary toggle idea!

Aad Pouw — Fri, 26 Feb 2021 11:40:09 +0000

setUrl() for WP endpoints

Aad Pouw — Mon, 08 Feb 2021 19:22:05 +0000

What it is?

A little js function to pass a wp endpoint url that updates itself if you upload from your local - to your live website!

Why?

Lately I did that and forgot to update my local - to my live endpoint url. The result was that when navigating on my live I ended up on my local and what is not intended. Also, on chrome it invalidated my ssl certificate too!

The code:

async function setUrl(namespace, endpoint){
    if((namespace !== null) && (endpoint !== null))
        return `https://${location.hostname}/wp-json/${namespace}/${endpoint}`;
    else
        return console.error('enter a namespace and/or an endpoint');
}

Example:

const response = await fetcher.fetchData(await setUrl('my/namespace','my_endpoint'),{ //other stuff });

Note:

I'm using a js class here for this example and is out of scoop of this post.
Also, feel free to use this little snippet, for sure without any warranty or reliability!

DEV Community: Aad Pouw

Some js here for a change (getElemsByDataset)!

Explanation:

The steps:

One:

Two:

Three:

How to use:

Example/Use Case:

This results in:

You will find it here:

That's it!

Why I have ditched the QuerySelector

Why?

What I do instead and what I want to share here is this:

Some Wisdom first:

How do I do that?

Working it out:

Using those created objects:

What I use in my classes and functions for getting around?

Freedom for all:

That's it.

About the commandfor attribute.

What I want to share here is my experiences with the commandfor attribute.

Short intro:

Note:

At present:

Explanation:

Next:

Here is what I experienced with the 'commandfor' attribute.

Alternatively:

Final word:

That's it!

Why I prefer my own 'new Map()' based createObjects() function over 'new Map()' *.set().

Note:

How I Process things?

Intro.

1. Having an idea.

2. Figuring out of how to do it.

3. Start Coding.

4. Getting It Right.

In a nutshell.

What I don't do!

What I also learned is this.

Trying things out.

That's it.

How I load web-components

Intro.

How I do it?

Explanation.

At last.

Some links here for more info.

How I load my js?

Intro

His Approach.

My idea.

How I load my js?

Explanation

Note!

Final.

How I do: export/import?

EXPORT

IMPORT

About wildcard/namespace

My details/summary toggle idea!

setUrl() for WP endpoints

What it is?

Why?

The code:

Example:

Note: