6 ms·

There is .forEach() on NodeLists, so you can do stuff like this in every browser, no lib, no helper functions needed: document.querySelectorAll('a').forEac

by err4nt 4y ago

There is .forEach() on NodeLists, so you can do stuff like this in every browser, no lib, no helper functions needed: document.querySelectorAll('a').forEach(tag => { // operate on tag })

d1sxeyes 4y ago
I think it's just for brevity, rather than because a helper is needed. OP listed the entire source code of their module in their comment.
- moffkalast 4y ago
  Brevity is cool, but that's kind of like naming all your variables one letter chars for brevity. This is something every web dev will instantly know what it does: document.querySelectorAll('#rabbit .green').forEach(tag => { }) Whereas this is something nobody knows what the fuck it is because it's completely non-standard. for (const rabbit of dqsA('#rabbits .green')) { } And get what, 10 characters less in one row? Basically nothing.
  - hombre_fatal 4y ago
    for/of vs .forEach isn't the issue here. Frankly I almost always use for/of because it's implemented for all iterators and I prefer being outside of a function (e.g. I can use await). All they did was alias `dqsA`. If anything, it's the fn name that could be better.
  - d1sxeyes 4y ago
    It’s no more ‘non-standard’ than jQuery’s `$`. Most IDEs will allow you to see what dqsA aliases by mousing over. I don’t really see a problem with it. It also looks like the kind of thing a pre-commit hook could trivially expand if you’re working with other people who might find it in some way unacceptable.
gfody 4y ago
how's browser support for something like "a:has(img[src$='.gif'])" though?
- zeven7 4y ago
  You probably shouldn't be making that query, unless you're doing something specific like web scraping and don't have control over the content of the site.
  - cptskippy 4y ago
    That's always been the blessing and curse with JQuery. It allows you to easily filter objects but it doesn't encourage efficiency. A lot of people don't have control over the content of their site in enterprise situations. If you're stuck using an old framework or CMS you could be beholden to someone else. And at the same time there's a lot of devs who dgaf and just ship what works.
  - gfody 4y ago
    you could be using it already w/jquery though and if you just switched to the native selector it would stop working everywhere but safari. "#some_combo:has(option:selected[value=..]) + .." seems like a reasonable way to conditionally target something to me, is it terribly worse than some other way?
    - zeven7 4y ago
      > is it terribly worse than some other way? Yeah, it's fragile and will easily lead to bugs when someone changes the markup without realizing it's going to break some crazy selector in another part of the code. It would make a lot more sense to just add a class to the element you're trying to select.
      - gfody 4y ago
        it's a conditional select, you're saying just add code to add/remove a class to the target - of course, but that defeats the point of wanting a conditional selector in the first place
dhritzkiv 4y ago
alternatively, if you need to use anything other than `forEach` for working on the list, you can turn the NodeList into an array using the array spread syntax (equivalent to using Array.from) e.g. [...document.querySelectorAll('a')] .filter(node => node.getAttribute("data-foo") === "bar")
- megous 4y ago
  Not everyone wants to be so wasteful.
  - dhritzkiv 4y ago
    what do you mean by "wasteful"?
    - megous 4y ago
      Creating an array, populating it with however many elements just to be able to call some methods and destroying it immediately afterwards. And doing it all over the app, just because it's syntactically convenient. (all while you already have an iterable collection in the form of NodeList)
      - hombre_fatal 4y ago
        It is a bit weird to consume an iterator into an array when a NodeList is already iterable. Not sure why it caught on.
        megous 4y ago
        I see it a lot with other iterables, too. People may like one liners and functional style more than a procedural `for (of)` construct, so they use `[...iterable].any_array_function(...)` everywhere, except when foced not to by async code :). Might also have something to do with Redux and immutable patterns. (the use of spread operator in general)
        4y ago

by err4nt 4y ago

There is .forEach() on NodeLists, so you can do stuff like this in every browser, no lib, no helper functions needed: document.querySelectorAll('a').forEach(tag => { // operate on tag })

d1sxeyes 4y ago

I think it's just for brevity, rather than because a helper is needed. OP listed the entire source code of their module in their comment.

moffkalast 4y ago
Brevity is cool, but that's kind of like naming all your variables one letter chars for brevity. This is something every web dev will instantly know what it does: document.querySelectorAll('#rabbit .green').forEach(tag => { }) Whereas this is something nobody knows what the fuck it is because it's completely non-standard. for (const rabbit of dqsA('#rabbits .green')) { } And get what, 10 characters less in one row? Basically nothing.
- hombre_fatal 4y ago
  for/of vs .forEach isn't the issue here. Frankly I almost always use for/of because it's implemented for all iterators and I prefer being outside of a function (e.g. I can use await). All they did was alias `dqsA`. If anything, it's the fn name that could be better.
- d1sxeyes 4y ago
  It’s no more ‘non-standard’ than jQuery’s `$`. Most IDEs will allow you to see what dqsA aliases by mousing over. I don’t really see a problem with it. It also looks like the kind of thing a pre-commit hook could trivially expand if you’re working with other people who might find it in some way unacceptable.

gfody 4y ago

how's browser support for something like "a:has(img[src$='.gif'])" though?

zeven7 4y ago
You probably shouldn't be making that query, unless you're doing something specific like web scraping and don't have control over the content of the site.
- cptskippy 4y ago
  That's always been the blessing and curse with JQuery. It allows you to easily filter objects but it doesn't encourage efficiency. A lot of people don't have control over the content of their site in enterprise situations. If you're stuck using an old framework or CMS you could be beholden to someone else. And at the same time there's a lot of devs who dgaf and just ship what works.
- gfody 4y ago
  you could be using it already w/jquery though and if you just switched to the native selector it would stop working everywhere but safari. "#some_combo:has(option:selected[value=..]) + .." seems like a reasonable way to conditionally target something to me, is it terribly worse than some other way?
  - zeven7 4y ago
    > is it terribly worse than some other way? Yeah, it's fragile and will easily lead to bugs when someone changes the markup without realizing it's going to break some crazy selector in another part of the code. It would make a lot more sense to just add a class to the element you're trying to select.
    - gfody 4y ago
      it's a conditional select, you're saying just add code to add/remove a class to the target - of course, but that defeats the point of wanting a conditional selector in the first place

dhritzkiv 4y ago

alternatively, if you need to use anything other than `forEach` for working on the list, you can turn the NodeList into an array using the array spread syntax (equivalent to using Array.from) e.g. [...document.querySelectorAll('a')] .filter(node => node.getAttribute("data-foo") === "bar")

megous 4y ago
Not everyone wants to be so wasteful.
- dhritzkiv 4y ago
  what do you mean by "wasteful"?
  - megous 4y ago
    Creating an array, populating it with however many elements just to be able to call some methods and destroying it immediately afterwards. And doing it all over the app, just because it's syntactically convenient. (all while you already have an iterable collection in the form of NodeList)
    - hombre_fatal 4y ago
      It is a bit weird to consume an iterator into an array when a NodeList is already iterable. Not sure why it caught on.
      - megous 4y ago
        I see it a lot with other iterables, too. People may like one liners and functional style more than a procedural `for (of)` construct, so they use `[...iterable].any_array_function(...)` everywhere, except when foced not to by async code :). Might also have something to do with Redux and immutable patterns. (the use of spread operator in general)
      - 4y ago