2019-10-20 原生DOM节点操作

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li>我是第1个li节点</li>
            <li>我是第2个li节点</li>
            <li>我是第3个li节点</li>
            <li>我是第4个li节点</li>
            <li>我是第5个li节点</li>
        </ul>
    </div>
    <script>
        var Oul = document.querySelector("ul")
        var Ali = document.querySelectorAll("li")
        var Oli = document.getElementsByTagName("li")
        var getUl = Oli[2].parentNode; //和Ali一样
        var getfirstChild = Oul.firstChild; // 获取第一个子节点
        var getlastChild = Oul.lastChild; // 获取最后一个子节点
        var getnextSibing = getfirstChild.nextSibling;  // 获取相信的下一个同级节点 
        var getupSibing = getlastChild.previousSibling; // 获取相邻的上一个同级节点
        var appendli = document.createElement("li"); // 创造一个DOM元素标签
        appendli.innerText = "我是新来的li"
        Oul.appendChild(appendli) // 添加子节点到最后
        var insertli = document.createElement("li");
        insertli.innerText = "我想插队，插入某个li的前面"
        Oul.insertBefore(insertli,Oli[1]) // 插入某个子节点
        var replaceli = document.createElement("li");
        replaceli.innerText = "我想替换某个li" 
        Oul.replaceChild(replaceli,Oli[3]) //替换某个子节点
        // Oul.remove() //子节点全部删除
        Oul.removeChild(Oli[4]) // 删除某个子节点
        
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容