js中的DOM节点操作---增删改查

1.查找

DOM1：getElementById(),getElementsByTagName()

DOM扩展：querySelector()（返回第一个匹配的元素）,querySelectorAll()（返回全部匹配的元素）

HTML5：getElementsByClassName()

2.插入

appendChild()：末尾插入

insertBefore()：特定位置插入

3.替换

replaceChild()：接受两个参数，第一个为要插入的节点，第二个为要替换的节点

4.删除

removeChild()

实例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dom节点操作</title>

</head>
<body>
    
    <ul id="list"><li>1</li><li>2</li><li>3</li></ul>

    <button id="add">插入</button>
    <button id="replace">替换</button>
    <button id="remove">删除</button>

    <script >
        var list=document.getElementById('list');
        var add=document.querySelector('#add');
        var replace=document.querySelector('#replace');
        var remove=document.querySelector('#remove');

        var li=document.createElement('li');
        li.innerHTML='hello';

        function addNode(){
            //尾插
            //list.appendChild(li)
            //任意位置插
            list.insertBefore(li,list.childNodes[2])
        }
        function replaceNode(){

            //替换任意位置,要替换第一个或者最后一个只需将第二个参数改为list.firstChild / lastChild
            list.replaceChild(li,list.childNodes[1])
        }
        function removeNode(){
            //移除首/尾元素
            //list.removeChild(list.firstChild)
            // list.removeChild(list.lastChild)
            //移除任意位置上的元素
            list.removeChild(list.childNodes[1])
        }

        add.addEventListener('click',addNode);
        replace.addEventListener('click',replaceNode);
        remove.addEventListener('click',removeNode);
        
    </script>
</body>
</html>

运行视图

来源：https://www.cnblogs.com/xingguozhiming/p/8647804.html

标签

dom

js代码

queryselector

list