Как мне получить доступ к вложенным div

Question

Как я могу получить доступ к вложенным Divs шаг за шагом?

Пример:

Var x = summaryContainer.parentElement.firstElementChild;
console.log(x); // This is printing <div class ="summary">  and after this I want to access <div class ="product"> 

Как я могу это сделать, может кто-нибудь помочь, пожалуйста

Я пробовал использовать .firstChild, но console.log выводит либо пустые, либо пустые строки.

<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>

Answer 1

Измените summary-container либо на ID, например: <div id="summary-container">, либо, если вы хотите продолжать использовать класс, добавьте document.querySelector (". Summary-container"), например:

document.querySelector(".summary-container").parentElement.firstElementChild