Solution 1 :

It should works fine

let summaryContainer = document.getElementsByClassName('summary-container')[0];
let spans = summaryContainer.getElementsByTagName("span");
let content = Array.prototype.slice.call(spans).map(span => span.innerText)

console.log(content)
        <div class="col-50">
            <div id ="orderSummary">
                <h2>Order summary</h2>
                <div class ="summary-container">
                    <div class ="summary">
                        <div class="product">
                            <span>Natural Straight</span>
                            <div class="price">$95,00</div>
                            <div class="quantity">
                                <span>1</span>
                            </div>
                            <div class="total">$95,00 </div>
                        </div>
                    </div>
                </div>

Problem :

How do I access span values
/// with this I can access but I want to access all span values can anyone
help p = summaryContainer.parentElement.firstElementChild;

 <div class="col-50"> 
 <div id ="orderSummary"> 
     <h2>Order summary</h2> 
 <div class ="summary-container">
    <div class ="summary"> 
       <div class="product">            
         <span>Natural Straight</span>          
         <div class="price">$95,00</div> 
         <div class="quantity"> 
         <span>1</span> 
        </div>
        <div class="total">$95,00 </div> 
        </div>
    </div>
    </div>

Comments

Comment posted by madhu

it is printing as undefined

Comment posted by YuliiaZ

@madhu how did you get

Comment posted by YuliiaZ

@madhu it’ll be easier to identify the problem if you can edit your question and add part of your js code.

Comment posted by madhu

still not able to access, I want to access them using DOM elements

Comment posted by YuliiaZ

@madhu I’ve added the code snippet to my answer, please run it to see the result. it’s working fine

By