Make DOM load in web_sys

Question

How would I modify this to get the result below? The thing is there is no iterable. I am not sure what I am doing at this point as this code was AI generated. But my desired result it the js code snippet below.

use web_sys::{Element, HtmlElement};

fn init_dropdowns() -> Result<(), JsValue> {
  let elems = web_sys::window()
    .unwrap()
    .document()
    .unwrap()
    .query_selector_all(".dropdown-trigger")?;

  let elems: Vec<Element> = elems
    .into_iter()
    .map(|elem| elem.unwrap())
    .collect();

  let elems: Vec<HtmlElement> = elems
    .into_iter()
    .map(|elem| elem.dyn_into::<HtmlElement>().unwrap())
    .collect();

  M::Dropdown::init(elems.as_ref(), &JsValue::NULL);

  Ok(())
}

Here is a what I would like it to be like

 document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.dropdown-trigger');
        var instances = M.Dropdown.init(elems);
        });