Selecting all page elements?

Question

I was thinking about Grid-CSS, I read on some websites about frameworks that exist for it, and that in general are very bad, because they limit the capacity of the technology, so I thought, why no one makes a framework, where the javascript checks all elements, one by one, and if they possess data-attributes concerning the use of the grid, apply certain rules to these elements according to the values added by the developer (in general, the classes determine the properties used, but this would limit the number of columns, rows, where each thing starts or ends and so on, already, if it just assigns the values to these properties, the only limit would be placed by the developer himself)? (ex: <span data-grid-column-spacing="2/6">...</span>).

For that, I thought, create separate functions that select the data-attributes according to what is used, is a possibility, but thought, why not select all the elements at once, and then check and add the styles in each one ?

• So my question is, how can I select all the elements at once, regardless of the name of the element, or where on the page it is?

Answer 1

To select all elements of an HTML page, use querySelectorAll, through CSS or getelementsbytagname selectors, through the symbol * to select all nodes. See the implementations below:

getelementsbytagname

var elementos = document.getElementsByTagName('*');

querySelectorAll

var elementos = document.querySelectorAll('*');