Re: [whatwg/dom] Add NodeList.setAttributes (#895)

Thanks a lot for everyone's comments! @mfreed7 I'm excited that Chromium would be supportive of a "setAttributes" function if there is evidence that there are common use cases.

There are multiple pieces of evidence here. If we're interested in seeing simply how widely spread this pattern is, we can look no further than "THE" JS library - jQuery: the attr function does exactly this: [attr](https://github.com/jquery/jquery/blob/master/src/attributes/attr.js#L10) calls the [access](https://github.com/jquery/jquery/blob/5c2d08704e289dd2745bcb0557b35a9c0e6af4a4/src/core/access.js#L43) function with the individual setAttribute function as callback, which then loops over the elements to call setAttribute once for each element. Since jQuery is basically everywhere, and attr() is a core function of it, I would say the pattern is pretty widely spread.

If we're interested in seeing that it's a pattern that is often used on a large number of elements, D3.js might be the best example. While D3.js is not as widespread as jQuery, it's still the primary framework used on the web for interactive graphics and is used by major news organizations such as NYT, and lots of other sources of graphics on the web. For D3.js, data binding is the key functionality (with enter, update and exit), and is used to represent many data points as many graphical elements. Every single example in the [D3.js Gallery](https://observablehq.com/@d3/gallery) that shows data (so basically everything except bare-bones maps) uses d3.attr() to update all of its nodes. E.g. the [force graph example](https://observablehq.com/@d3/temporal-force-directed-graph) updates all node and link positions in each frame using the attr function: 
```
function ticked() {
    node.attr("cx", d => d.x)
        .attr("cy", d => d.y);

    link.attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
}
```
In the [source code of D3.js' attr function](https://github.com/d3/d3-selection/blob/master/src/selection/attr.js#L53), you can see that similar to jQuery, it loops over all elements with its ".each" function, and passes the [attrFunction](https://github.com/d3/d3-selection/blob/7159e0c38b00107dac0a33bf61ab99565a839dee/src/selection/attr.js#L27), which is just a wrapper for element.setAttribute.

To summarize: Looping over elements to call setAttribute on each of them is extremely widespread as it is used in most JS libraries such as jQuery and D3.js. For D3.js, this pattern is perhaps the very core of the library itself, built around the enter-update-exit pattern that defines D3.js, and is often used to update hundreds of nodes in each frame, often resulting in multiple thousand .setAttribute calls in each frame due to multiple attributes.

Is this the kind of evidence you are looking for? If you have questions, I can try to find more specific evidence.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/895#issuecomment-714582150