(func(){})

function出現 = 參數 是否需要回傳值 & 他要做什麼

image.png

image.png

image.png

image.png

image.png

<body>
    
    <button id="btnPickItem">挑選</button>
    <hr>
    
    <div id="tw">
        <h4>台灣水果</h4>
        <ul id="twList">
            <li class="grape">巨峰葡萄</li>
            <li>金鑽鳳梨</li>
            <li>麻豆文旦</li>
            <li>小玉西瓜</li>
            <li>大湖草莓</li>
        </ul>
    </div>

    <div id="jp">
        <h4>日本水果</h4>
        <ul id="jpList">
            <li><b class="grape">麝香葡萄</b></li>
            <li><b>夕張哈密瓜</b></li>
            <li><b>甘王草莓</b></li>
            <li><b>愛媛柑橘</b></li>
            <li><b>岡山白桃</b></li>
        </ul>
    </div>

    <div id="demo"></div>

    <script>

        const GetGrape = document.getElementById('btnPickItem');
        function funcGrape(){
            console.log(getElementById('grape'));
        }

        GetGrape.addEventListener('click',funcGrape);

      
        // * 比較底下幾種 尋找|篩選 元素的方式 *

        // 10. filter   ===> $().filter()
        // 11. find     ===> $().find()
        // 12. children ===> $().children()
        // 13. parent   ===> $().parent()
        // 14. closest  ===> $().closest()

    </script>

</body>

上面的是錯的