Changing the Text of a Span Class by script (magento)

getElementsByClassName returns a collection and not a single element. In your example you have two elements with the same class name, you’d access the first one with the index 0 and the second one with the index 1.

<p class="old-price">
    <span class="price-label">De:</span>
    <span class="price" id="old-price-1046">R$2.500,00</span>
</p>

<p class="special-price">
    <span class="price-label">Preço Promocional</span>
    <span class="price" id="product-price-1046">R$2.299,90</span>
</p>

<script>
    document.getElementsByClassName('price-label')[1].innerHTML = "Por:";
</script>

This code will change the second one that says “Preço Promocional” for “Por:”

//EDIT

Now that I’ve seen the full page, in javascript you could achieve this with:

<script>
document.querySelectorAll('.special-price .price-label').forEach(function(node) {
    node.innerHTML = 'Por: ';
});
</script>

This will target all elements with the class price-label inside elements with the class special-price, loop through each and change their contents. This will change the main, related and recommended products as long as it’s put after they are created.

As a preferred alternative, try using the following css:

<style>
.special-price .price-label {
    display:none !important;
}
.special-price::before {
    content: 'Por: ';
}
</style>

This should hide the content and then prepend the text on the parent and doesn’t required to be placed at the end to work.

// EDIT (To address new information added in the comments for this answer)

In order to avoid changing the homepage, you can use the :not() css’ pseudo-class (info here) to exclude those instances of special-price that are found within the homepage. I searched for and id or class that was unique to the homepage (found the class cms-home on the body tag for the homepage) so I’m using that to both exclude and target the different price-labels. I also changed the font-size to match the original one:

<style>
// this targets price-label that's NOT in the homepage
body:not(.cms-home) .special-price .price-label {
    display:none !important;
}
body:not(.cms-home) .special-price::before {
    content: 'Por: ';
    font-size:15px;
}
// this targets price-label on the homepage
.cms-home .special-price .price-label {
    display:none !important;
}
</style>

If I understood correctly, on the homepage you’re simply hiding the text, while on the other pages you’re replacing it with “Por: “, this should do it (hopefully) unless there’s another special case I’m unaware of.