1.查找兄弟元素

用JS製作導航顯示子菜單（滑鼠進入的時候，我們要a標簽顯示它的兄弟元素 ）

HTML:

        <nav>
            <ul>
                <li><a href="#">關於</a></li>
                <li><a href="#">技能</a></li>
                <li>
                    <a class="menutrigger" href="#">作品</a>
                    <span> </span>
                    <p> </p>
                    <ul class="submenu">
                        <li>作品1</li>
                        <li>作品2</li>
                        <li>作品3</li>
                    </ul>
                </li>
                <li>
                    <a class="menutrigger" href="#">博客</a>
                    <ul class="submenu">
                        <li>博客1</li>
                        <li>博客2</li>
                        <li>博客3</li>
                    </ul>
                </li>
                <li><a href="#">日曆</a></li>
                <li><a href="#">聯繫方式</a></li>
                <li><a href="#">其他</a></li>
            </ul>
        </nav>                                                                                                                                                                                                                                                                                                                                                                                                                        

JS:

            let aTages = document.getElementsByClassName('menutrigger')
            console.log(aTages)
            for(let i = 0; i < aTages.length; i++){
                aTages[i].onmouseenter = function(x){
                    console.log('mouseenter')
                    let a = x.currentTarget//這裡不用x.Target或者aTages[i]因為滑鼠位置有可能是在li也可能是在span等上面，這樣容易出現BUG，所以直接獲取當前操作對象
                    let brother = a.nextSibling//下一個節點（可能是回車,所以需要找到我們需要找的兄弟元素）-----------------------位置1
                    while(brother.nodeType ===3){ //若果兄弟元素類型是文本，詳細查看下麵圖片
                    //不使用if，這裡需要通過while迴圈排除其他一些非所需的兄弟元素，如span等
                    //使用while(brother.tagName !=='UL')也就是我們要找到是a的ul，如果不是就一直找，註意這的UL要大寫
                        brother = brother.nextSibling
                    }
                }
                aTages[i].onmouseleave = function(x){
                    console.log('mouseleave')

關於位置1