Believe it or not, I still misunderstand what's actually being done here.

Because all I want is to just replace a character in a very specific element, I may have some psychological block in my mind to understand anything which seems to me "unconnected" for that task.

I imagine, perhaps wildly, just a 1-3 line command that will do that.

In my mind, perhaps even the following should have been enough:

if (e.nodeType == Node.TEXT_NODE) {
  e.nodeValue = e.nodeValue.replaceAll("a", "");
}

Anyway, here:

function replaceIn(e) {
  if (e.nodeType == Node.TEXT_NODE) {
    e.nodeValue = e.nodeValue.replaceAll("a", "");
  } else {
    e.childNodes.forEach(replaceIn);
  }
}

I don't understand where should I declare what is the element that I work on.

I mean I don't understand where document.querySelector('#myElement'); should come.

deleted user You simply call the function with the element: replaceIn(document.querySelector('whatever')). Or, as it was made in your other question: replaceIn(document.body).

There's no replaceAll because the elements in a page are organized in a DOM-tree - it's a hierarchical structure (as explained here, each part of the page will be in a different node). Calling replace in one node just changes that node, but you need to traverse through all the other nodes to accomplish the task. That's what the for and the recursive call are doing: you get the child nodes, and for each one you call the function again (and that will replace that node, call the function in its child nodes, which will replace, call the function in its child nodes, and so on, until all nodes are replaced)

Consider the analogy of the labyrinth in Dirk's answer: to do the task in all rooms you need to visit all of them. There's no way to do that without actually visiting every single room.

In a similar way, you can't replace all the nodes without actually visiting every single node. That's why you need to call the function in every child node (therefore, you need the for loop, it doesn't matter if it's a for..of, forEach, etc).

hkotsubo‭

Yes I know the DOM is hierarchal.

Here is something I have ran in the console and didn't work:

function replaceIn(e) {
  if (e.nodeType == Node.TEXT_NODE) {
    e.nodeValue = e.nodeValue.replaceAll("א", "");
  } else {
    e.childNodes.forEach(replaceIn(document.body));
  }
}

undefined

Words with א remain the same.

e.childNodes.forEach(replaceIn(document.body)) is wrong, the correct is e.childNodes.forEach(replaceIn) - that's because the forEach method receives the function that will be called for each element. By doing replaceIn(document.body), you're calling the function, and the result is being passed to forEach

hkotsubo‭

I understand now

I missed the function call.

When I ran the code you developed as follows, it worked, all א's were vanished:

function replaceIn(e) {
    if (e.nodeType == Node.TEXT_NODE) {
        e.nodeValue = e.nodeValue.replaceAll("א", "");
    } else {
        e.childNodes.forEach(replaceIn);
    }
}

replaceIn(document.body);

I do need to better understand what's actually being done and now, at least, thanks to your help, I have the shortest and simplest example to study.

I really like if-else conditionals but in this case for some reason it gives me hard time to understand what is going on.