JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hello</p>
<h1>Byw</h1>

<div>
  <h1>scrounge up</h1>
  
  <div>
    <p>Hey. I just got here, can you tell me what you're doing? What's the end result?</p>
  </div>
</div>

<section>
  <button>fit like a glove</button>
</section>

<ul>
  <li no-translate>manly (я не буду переведен из-за no-translate)</li>
  <li>upon</li>
  <li>think</li>
</ul>

<footer>
  <section>
    <figure>
      <blockquote>
        History, Stephen said, is a nightmare from which I am trying to awake.
      </blockquote>
      <figcaption no-translate>—James Joyce, <cite>Ulysses</cite></figcaption>
    </figure>
  </section>
</footer>

JavaScript

const iterator = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL, {
    acceptNode(node) {
        if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('no-translate')) 
            return NodeFilter.FILTER_REJECT

        if (node.nodeType === Node.ELEMENT_NODE) 
            return NodeFilter.FILTER_SKIP

        if (node.nodeType === Node.TEXT_NODE && /^(\n| )+$/.test(node.textContent))
            return NodeFilter.FILTER_SKIP

        return NodeFilter.FILTER_ACCEPT
    }
})

let node

while ((node = iterator.nextNode())) {
	translateNode(node)
}

async function translateNode(node) {
	const translatedtext = await translateText(node.textContent)
  
  node.textContent = translatedtext
}

function translateText(text, to) {
	return new Promise(res => {
  	// запрос к translate api
  
  	res('Must be translated')
  })
}