Retrieve all generated HTML with JavaScript in MS Teams (browser)

I'm having trouble understanding why I can't retrieve the 'send' button in a MS Teams chat (when using the teams.microsoft.com site instead of the app) with JavaScript. I'm using Chrome on my MacOS (Ventura 13.6.1, and Chrome version 118.0.5993.117).

When I paste this code into the console:

let buttonArray = document.querySelectorAll('button')
for (let index = 0; index < buttonArray.length; index++) {
  let element = buttonArray[index]
  console.log(`>> data-tid: ${element.getAttribute('data-tid')}`);
}
console.log(`> length: ${buttonArray.length}`);

... I can't see any data-tid named "newMessageCommands-send".

But when I inspect the send button of the chat at the bottom, I can definitely see a button with that data-tid attribute within the document elements. So, after I inspect and run that same previous code, I now get a bunch of different buttons with other data-tid names, including the one I need "newMessageCommands-send".

I tried clicking random spots in the chat window to see if that would trigger the new buttons to shop up in JavaScript, but they only appear if I inspect the send button.

What am I missing? Is there a way to be able to do this when the page is done loading?

document.querySelector('button[data-tid="newMessageCommands-send"]').style.backgroundColor = 'red';

This only works if I first inspect the send button and then paste this code into the console.

You are probably using the wrong document context. There are multiple documents open when you run teams client (i.e. it has multiple IFRAME elements), to prevent user applications interacting with the Teams client document directly, but allow only interactions using the Teams API. In other words, probably the document you use for scripting in the console is not the document you see in the inspector (there are multiple, one per frame). It's called isolation.