如何获取DOM元素的父元素，实现购物车同尺寸商品数量自动叠加

我希望获取cartError元素的父元素，从而访问包含对应cart-item-size和itm-quantity字段的cart-item-details容器，需求是遍历购物车列表，当用户新增的商品与购物车内已有商品尺寸相同时，将对应商品的数量从1增加到2。

JS代码 #

var cartItems = document.getElementsByClassName('side-cart-   items')[0]
var cartItemSizes = cartItems.getElementsByClassName("cart-item-size")
for(var i=0; i < cartItemSizes.length;i++){
    cartError=cartItemSizes[i]
    if(cartError.innerText== size){
       var cartItem = cartError.parentElement
       var cartQuantity = cartError.getElementsByClassName('itm-quantity')
       console.log(cartQuantity.innerText)
       return
    }     
}

对应HTML结构 #

<div class="section side-cart-items">
                <div class="side-cart-item">
                    <div class="cart-item-image">
                        <img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
                    </div>
                    <div class="cart-item column">
                        <div class="cart-item-details">
                            <h2>Dunster Shorts</h2>
                            <p>size <span class="cart-item-size">36</span></p>
                            <p><span class="itm-quantity">1 </span>&times;<span class="itm-price">$285.00</span></p>
                        </div>
                        <button class="cart-item-remove">[ REMOVE ]</button>
                    </div>
                </div>
                <div class="side-cart-item">
                    <div class="cart-item-image">
                        <img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
                    </div>
                    <div class="cart-item column">
                        <div class="cart-item-details">
                            <h2>Dunster Shorts</h2>
                            <p>size <span class="cart-item-size">40</span></p>
                            <p><span class="itm-quantity">1</span> &times;<span class="itm-price">$200.00</span></p>
                        </div>
                        <button class="cart-item-remove">[ REMOVE ]</button>
                    </div>
                </div>
            </div>

原代码错误点 #

• side-cart-items类名输入时中间多了多余空格，会导致无法匹配到对应DOM元素
• 从cartError（即cart-item-size元素）下查找itm-quantity的逻辑错误，两个元素是同属cart-item-details容器下的不同子节点，不存在父子关系
• getElementsByClassName返回的是HTMLCollection类数组结构，直接访问.innerText无法获取到正确值，需要取集合的第一个元素
• 文本匹配和数值转换时没有处理空格，HTML内的换行、空格会导致匹配失败或数值转换错误

修正后代码 #

// 需提前定义size变量为用户新增商品的对应尺寸值，示例：const size = '36'
const cartItems = document.getElementsByClassName('side-cart-items')[0]
const cartItemSizes = cartItems.getElementsByClassName("cart-item-size")
for(let i=0; i < cartItemSizes.length;i++){
    const cartError = cartItemSizes[i]
    // 去除两端空格后再做尺寸匹配
    if(cartError.innerText.trim() === size.trim()){
        // 向上查找最近的cart-item-details父容器
        const cartItemDetails = cartError.closest('.cart-item-details')
        // 获取数量元素，转换为数字后+1再赋值
        const cartQuantity = cartItemDetails.getElementsByClassName('itm-quantity')[0]
        const currentCount = parseInt(cartQuantity.innerText.trim())
        cartQuantity.innerText = currentCount + 1
        return
    }     
}

核心说明 #

使用closest()方法向上查找指定类名的父元素，相比手动逐层获取parentElement容错性更高，即使后续HTML结构有小幅调整也不会直接失效。

内容的提问来源于stack exchange，提问作者Joseph Smart