獲取 DOM 元素的更好方法

Question

我想在單擊按鈕時獲取特定元素。 我 select 使用 DOM Traversal 方法點擊的數據，有什么方法可以讓我更快地獲取元素？

<div class="item" id="dessert">
                <div class="item-image-div">
                    <img src="mcd/<?= $row["image"]; ?>" alt="" class="item-image" onclick="getSrc(this.src)">
                </div>
                <div class="item-detail">
                    <div class="item-name" onclick="getSrc(this.name)"><?= $row["item"]; ?></div>
                    <div class="item-order">
                        <div class="item-price"><?= $row["price"]; ?></div>
                        <button class="order">
                            <img src="icon/order.png" alt="" width="40px">
                        </button>
                    </div>
                </div>
            </div>

let orderBtn = document.querySelectorAll('.order');
    orderBtn.forEach(function(btn){
        btn.addEventListener('click', (e)=>{
            if (e.target.parentElement.classList.contains('order')) {
                let fullPath = e.target.parentElement.parentElement.parentElement.previousElementSibling.children[0].src;
                let pos = fullPath.indexOf('mcd') + 3;
                let partPath = fullPath.slice(pos);

                let itemId = e.target.parentElement.parentElement.parentElement.parentElement.id;
                const item = {};
                item.img = `${partPath}`;
                console.log(item);

                let itemName = e.target.parentElement.parentElement.previousElementSibling.textContent;
                let itemPrice = e.target.parentElement.previousElementSibling.textContent;
                console.log(itemName);
                console.log(itemPrice);
            }
        });
    });

Answer 1

不是向button添加偵聽器並在處理程序內部檢查單擊的父級是.order ，而是向<img>添加偵聽器。 （或者，這甚至需要嗎？你能允許點擊<img>和外部<button>嗎？如果可能的話，這對我來說更有意義）

利用.closest避免使用大量難以閱讀的.parentElement訪問。

使用querySelector以可讀的方式向下導航到整個.item的后代。

document.querySelectorAll('.order > img').forEach((img) => {
    img.addEventListener('click', () => {
        const item = img.closest('.item');
        const fullPath = item.querySelector('img').src;
        const pos = fullPath.indexOf('mcd') + 3;
        const partPath = fullPath.slice(pos);
        const itemId = item.id;
        const itemName = item.querySelector('.item-name').textContent;
        const itemPrice = item.querySelector('.item-price').textContent;
    });
});