How to select elements to apply a transformation(rotation, etc) to?

Question

I am trying to rotate or transform all elements inside a div but I currently have this function. It rotates all elements on the page. How can I select a div or a class to rotate instead? Array.from(document.all).forEach(o => o.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)")

Answer 1

You need to use document.getElementsByClassName() or document.getElementsByTagName() :

var selected = document.getElementsByClassName('myClass');
Array.from(selected).forEach(o => o.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)")

Answer 2

function randomRotate(selector) {
  var elem = document.querySelector(selector);
  if (!elem) return;
  elem.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)"
}

randomRotate('.someClass');

Basically it doest the same as your code, but instead of taking all elements it looks for particular via selector. If there are multiple elements with such class it will apply rotation only for first of them.

So if you want to apply rotation to all objects with that class, you should use a bit another function:

function randomRotate(selector) {
  var elems = document.querySelectorAll(selector);
  if (elems.length === 0) return;
  elems.forEach(function(el){
    el.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)"
  })
}

randomRotate('.someClass')