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

白昼怎懂夜的黑 提交于 2020-03-22 03:07:30

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>

运行视图

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!