How to observer multiple elements with a ResizeObserver?

Question

How do I observe multiple elements with ResizeObserver like all textareas? Using document.querySelectorAll() results in an error.

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
     // do something
  }
});

// Works
ro.observe(document.querySelector('textarea'));

// Doesn't work
ro.observe(document.querySelectorAll("textarea"));


Error: VM112:8 Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
    at <anonymous>:8:4

Answer 1

querySelectorAll returns a NodeList, you can use .forEach to iterate over each and pass it into the observer:

const boxes = document.querySelectorAll('.box');

const myObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width = Math.floor(entry.contentRect.width);
    const height = Math.floor(entry.contentRect.height);
    entry.target.value = `I'm ${ width }px and ${ height }px tall`;
  }
});

boxes.forEach(box => {
  myObserver.observe(box);
});

.box {
  text-align: center;
  border: 1px solid black;
  height: 100px;
  border-radius: 8px;
  display: flex;
}

<textarea class="box">
</textarea>
<textarea class="box">
</textarea>

EDIT: You could also observe single element at a time but they need to be initialized individually:

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  new ResizeObserver(entries => {
    const width = Math.floor(entries[0].contentRect.width);
    const height = Math.floor(entries[0].contentRect.height);
    entries[0].target.value = `I'm ${ width }px and ${ height }px tall`;
  }).observe(box);
});

.box {
  text-align: center;
  border: 1px solid black;
  height: 100px;
  border-radius: 8px;
  display: flex;
}

<textarea class="box">
</textarea>
<textarea class="box">
</textarea>