How to get the inner text of a span tag of the current DIV

Question

I have multiple product divs, like the following :

            <div class="special" id="special">
            <a href="patinete-12v.html" class="special-link">
                <p class="special-img">
                    <img src="img/vehicules/patinetes/25.png" alt="">
                </p>
                <h3><span id="pdctName">Patinete Crazy Eléctrico 12v</span></h3>
            </a>
            <p class="special-info">
                <span class="ribbon2 animated swing infinite">
                  <span>Oferta!</span>
                </span>
                <a href="#" class="special-categ">Ofertas especiales</a>
                <span class="special-price">200,00 €</span>
                <del style="margin-top: -9px;">250,00 €</del>
                <a href="0#" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Añadir a la cesta</a>
            </p>
        </div>

I need to get the inner text of the spans elements( <span class="special-price"> and <span id="pdctName"> ).

i tried this var pdctName = document.getElementById("special").querySelectorAll("span#pdctName"); but it gives me the value of the first divsion, and i actually want the value of the current div.

Answer 1

I have multiple product divs, like the following :

            <div class="special" id="special">
            <a href="patinete-12v.html" class="special-link">
                <p class="special-img">
                    <img src="img/vehicules/patinetes/25.png" alt="">
                </p>
                <h3><span id="pdctName">Patinete Crazy Eléctrico 12v</span></h3>
            </a>
            <p class="special-info">
                <span class="ribbon2 animated swing infinite">
                  <span>Oferta!</span>
                </span>
                <a href="#" class="special-categ">Ofertas especiales</a>
                <span class="special-price">200,00 €</span>
                <del style="margin-top: -9px;">250,00 €</del>
                <a href="0#" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Añadir a la cesta</a>
            </p>
        </div>

I need to get the inner text of the spans elements( <span class="special-price"> and <span id="pdctName"> ).

i tried this var pdctName = document.getElementById("special").querySelectorAll("span#pdctName"); but it gives me the value of the first divsion, and i actually want the value of the current div.