Access nested Elements using HTMLRewriter

Developers Workers
#1

I want to use HTMLRewriter to get text from a few selectors.
I woul like to use .querySelector to navigate the element and get nested elements but it’s undefined. How can I get?

Example

<div data-code="ABC">
   <div class="title">Title</div>
   <div classs="price">9,99</div>
</div>
<div data-code="XYZ">
   <div class="title">Title</div>
</div>

class SearchResults {
    constructor() {
        this.values = []
    }

    element(element) {
        let data = {
            code: element.getAttribute("data-code"),
            title: element.querySelector(".title").innerText, <--- HERE
        }
        this.values.push( data )
    }
}


const url = "https://www.example.com"

async function handleRequest() {

  const response = await fetch(url)

   const scraper = new SearchResults()
   await new HTMLRewriter().on("[data-code]:not([data-code=''])", scraper).transform(response).arrayBuffer()
    
    
   console.log(scraper.values)

    const json = JSON.stringify(scraper.values, null, 2)


    return new Response(json, {
        headers: {
        "content-type": "application/json;charset=UTF-8"
        }
    })  

}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest())
})
#2

How can I use element.querySelector() in ElementHandler() ?
If I have this element

<div class="element">
    <div class="price">9.99</div>
</div>
<div class="element">
</div>

how can I access its child .price ?

I don’t want to do
await new HTMLRewriter().on(".element", handler1).on(".price",handler) because it doesn’t garantee I get the element in same orders or merge arrays correctly.