js中获取元素和获取节点的操作小结

话不多说直接上代码：

    const ulObj = document.querySelector("ul")
    //以下的方法是没有兼容性的问题
    //获取父级节点
    console.log(ulObj.parentNode);
    //获取父级元素
    console.log(ulObj.parentElement);
    //获取子级节点
    console.log(ulObj.childNodes);
    //获取子级元素
    console.log(ulObj.children);

    /**以下的方法是存在兼容性的问题,问题就是出在IE低版本上；
     * 这些低版本是不支持获取节点操作的，但是又把别的浏览器中的获取节点的操作换成了获取元素*/
    //获取第一个子节点
    console.log(ulObj.firstChild);
    //获取第一个子元素
    console.log(ulObj.firstElementChild);
    //获取最后一个子节点
    console.log(ulObj.lastChild);
    //获取最后一个子元素
    console.log(ulObj.lastElementChild);
    //获取上一个兄弟节点
    console.log(ulObj.previousSibling);
    //获取上一个兄弟元素
    console.log(ulObj.previousElementSibling);
    //获取下一个兄弟节点
    console.log(ulObj.nextSibling);
    //获取下一个兄弟元素
    console.log(ulObj.nextElementSibling);

　　删除子节点的操作

        //删除所有子节点
        ulObj.remove()
        //删除一个子节点
        ulObj.removeChild(document.querySelector("li:first-child"))