How can I get element values inside an element selected by ID?

I read code on element using

const elem = document.getElementById("TcHmiRecipeEdit")
console.log(elem);

results:

What code in Javascript I need to use to get values Marked in the photo. I'm starting my adventure with javascript and what we have a huge problem with is actually extracting values from the code as in the example above.

querySelector and querySeletorAll are suitable for this purpose.

querySelector, querySelectorAll

document.querySelectorAll('#TcHmiRecipeEdit table th').forEach(el => {
	console.log(el.textContent);
});

Spreading a querySelectorAll and mapping the textContent

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const thVals = [...document.querySelectorAll('#TchmiRecipeEdit table th')]
  .map(th => th.textContent.trim());

console.log(thVals)

<!-- language: lang-html -->

<div id="TchmiRecipeEdit" style="inset: 16px;">
  <div class=" TCHES Controls Beckhoff TcHiRecipeEdit template tched-box " tabindex="-1 ">
    <div class="Tched Controls Beckhoff TcHnRecipeEdit-editing pane ">
      <div class="TcHed_Controls Beckhoff TcHndRecipeEdit-editing-box">
        <div class="Tchad Controls Beckhoff TcHniRecipeEdit-editing-area">
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>in</th>
                <th>Unit</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->