原生JavaScript对【DOM元素】的操作——增、删、改、查

最新推荐文章于 2022-06-21 19:16:39 发布

微风拂晚霞

最新推荐文章于 2022-06-21 19:16:39 发布

阅读量221

点赞数 2

分类专栏： Web前端文章标签： js dom html5

本文链接：https://blog.csdn.net/weixin_43921423/article/details/108137406

版权

Web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #first{
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="删除黑色" id="btn">
    <ul id="UL">
        <li id="first">first</li>
        <li></li>
        <li id="li3"><span>oMing</span></li>
        <li></li>
        <li>last</li>
    </ul>
    <input type="text" id="txt">
    <input type="button" value="添加" id="addBtn">
    <script>
        /* 改 && 查 */
        // 查找父元素
        var oBtn = document.getElementById("btn");
        // alert(oBtn.parentNode.parentNode.parentNode);

        // 查找子元素
        var oUl = document.getElementById("UL");
        var oLi = oUl.children;
        // alert(oLi[2].innerHTML);
        var oFirst = oUl.firstElementChild || oUl.firstChild;
        var oLast = oUl.lastElementChild || oUl.lastChild;
        oFirst.style.background = 'pink';

        // 查找兄弟元素
        var nextBro = oFirst.nextElementSibling;
        var prevBro = oLast.previousElementSibling;
        nextBro['style'].background = 'black';
        nextBro.innerHTML = "firstChild's nextBro";
        nextBro['style'].color = 'white';
        prevBro['style'].background = 'hotpink';

        /* 增 && 删 */
        // 创建元素
        var oTxt = document.getElementById("txt");
        var addBtn = document.getElementById("addBtn");
        addBtn.onclick = function(){
            var li = document.createElement("li");
            li.innerHTML = oTxt.value;
            //oUl.appendChild(li);
            //插入到指定位置
            oUl.insertBefore(li,oUl.children[0]);
            oTxt.value = '';
        }
        // 删除节点
        oBtn.onclick = function(){
            oUl.removeChild(nextBro);
        }  
    </script>
</body>
</html>

微风拂晚霞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JavaScript对【DOM元素】的操作——增、删、改、查

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #first{
复制链接

扫一扫