您现在的位置是：首页 > 前端

当前栏目

【JavaScript】js中Dom操作增删改查技巧大全（示例）

JavaScript JS 操作技巧示例大全 dom 增删

2023-09-11 14:15:11 时间

getElementById	通过ID获取
getElementsByName	通过name属性
getElementsByTagName	通过标签名
getElementsByClassName	通过类名class=‘’
querySelector	通过选择器获取一个元素
querySelectorAll	通过选择器获取一组元素
document.documentElement	获取html的方法
ocument.documentElement	获取html标签
document.body	获取body的方法
获取节点的方法：父子兄弟等等
Node.parentNode	元素的父节点
Node.parentElement	元素的父Element（标签节点）节点
Node.childNodes	元素的所有子节点
Node.children	元素的所有Element（标签节点）节点
Node.firstChild	第一个节点
Node.firstElementChild	第一个Element（标签节点）子节点
Node.lastChild	最后一个节点
Node.lastElementChild	最后一个Element（标签节点）子节点
Node.previousSibling	元素的前一个节点
Node.nextSibling	元素的后一个节点
Node.childElementCount	当前节点所有Element子节点的数目

document.documentElement	获取整个Html Dom结构
element.childNodes	得到element（标签节点）的全部子节点
element.parentNode	得到element（标签节点）的父节点
element.nextSibling	得到element（标签节点）的下一个兄弟节点
element.previousSibling	得到element（标签节点）的上一个兄弟节点
element.firstChild	得到element的第一个节点
element.lastChild	得到element的最后一个节点

一、获取和操作HTML中Id的对象元素

innerText 和innerHTML的区别：

实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 100px;
        border: 2px solid gray;
        margin-top: 10px;
      }
      #sub {
        width: 100px;
        height: 50px;
        border: 2px solid rgb(240, 240, 240);
        margin-top: 10px;
        background-color: rgb(231, 219, 202);
      }
    </style>
  </head>
  <body>
    <input type="button" value="通过innerHtml获取和添加内容" id="btn1" />
    <input type="button" value="通过innerText 获取和添加内容" id="btn2" />
    <div id="fa">
        这是一个DIV
        <div id="sub">
            <p>
            我是子dIV</p></div>
    </div>
    <script>

        document.getElementById("btn1").onclick = function () {
            var ss = document.getElementById("fa");
            console.log(ss);
            var bb=ss.innerHTML;
            ss.innerHTML =ss.innerHTML+ "新增加的内容【innerHTML】";
            alert(ss.innerHTML);
        };

        document.getElementById("btn2").onclick = function () {
            var ss = document.getElementsByTagName("div");
            console.log(ss[0]);
            var bb=ss[0].innerText;
            ss[0].innerText =ss[0].innerText+ "新增加的内容【innerText】";
            alert(ss[0].innerText);
        };

     </script>
  </body>
</html>

二、绑定HTML中某元素对象的事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style>
    #cx {
      width: 200px;
      height: 40px;
      background-color: rgb(208, 237, 238);
    }
  </style>

  <body>
    <div id="cx">我是一个DIV</div>

    <button id="btn">点击按钮</button>
  </body>

  <script type="text/javascript">
    function uuu() {
      alert("你点击了DIV");
    }
    /* 获取 ID=cx的对象 方法一 */
    var m_cx = document.getElementById("cx");
    m_cx.onclick = uuu;
    /* 获取 ID=cx的对象 方法二 */
    m_cx.onclick = function () {
      alert("1");
    };
  </script>
</html>

三、综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>调查表</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #total{
            width:300px;
            height:200px;
            margin:0 auto;
            margin: 20px;
            border:1px solid black;
            background-color: blanchedalmond;
        }
        #city li,#game li,#phone li{
            list-style: none;
            float: left;
            border:1px solid black;
            margin:0 10px;
            background-color: rgb(207, 245, 207);
        }
        .inner1{
            width:300px;
            height: 80px;
            border:1px solid black;
            margin: 10px auto 0;
            margin-left: 20px;
        }
        #btnList div button{
            width:220px;
            margin-top:10px;
        }
        #btnList div button:hover{
            color:red;
            background-color: yellow;

        }

    </style>
    <script>
        /*定义函数：专门为指定元素绑定单击响应函数
        *参数：idStr:绑定单击响应函数的对象id属性值
        *  */
        function myClick(idStr,fun){
            const btn = document.getElementById(idStr);
            btn.onclick=fun;
        }
        window.onload=function () {    //此处不加，会导致页面无法显示
            myClick("btn01",function () {
                //查找#zf节点
                const zf = document.getElementById("zf");
                //打印zf
                //通过innerHTML获取元素内部的html代码
                alert(bj.innerHTML);
            });

            myClick("btn02",function () {
                //查找li节点，封装到数组中
                // var lis = document.getElementsByName("li");
                //  alert(lis.length);
                 
                // for(var i=0; i<lis.length; i++){
                //     alert(lis[i].innerHTML);
                // }

                // 查找#city下的所有li节点
                //获得id为city的元素
                const city = document.getElementById("city");
                //查找#city下所有li节点
                const lis = city.getElementsByTagName('li');
                for(let i=0; i<lis.length; i++){
                    alert(lis[i].innerHTML)
                }});



            myClick("btn03",function () {
                //查找name=gender的所有节点
                const inputs = document.getElementsByName("gender");
                // alert(inputs.length);
                for(let i=0; i<inputs.length; i++){
                    //innerHTML用于获取元素内部的HTML代码，但是Input没有内部，对于单标签没有意义
                    //读取元素的属性
                    alert(inputs[i].value)
                    /*如果读取元素节点属性，直接使用元素.属性名
                    例子： 元素.id  元素.name  元素.value
                    注意：class属性不能采用这种方式，可以使用  元素.className*/
                }});

            myClick("btn04",function () {
                // 查找#city下的所有li节点
                //获得id为city的元素
                const city = document.getElementById("city");
                //查找#city下所有li节点
                const lis = city.getElementsByTagName('li');
                for(let i=0; i<lis.length; i++){
                    alert(lis[i].innerHTML)
                }});

            //返回#city下的所有子节点
            // childNodes属性会获取包括文本节点在内的所有节点（包括空格也是文本）
            // 注意：IE8以下的浏览器中不会将空白文本当成子节点
            //children属性可以获取当前元素的所有子元素
            myClick("btn05",function () {
                const city = document.getElementById("city");
                const cns = city.children;
                alert(cns.length);
            });

            myClick("btn06",function () {
                const phone=document.getElementById("phone");
                //包括空白文本节点
                // const pho1=phone.firstChild;
                //firstElementChild获得当前元素的第一个子元素
                const pho1=phone.firstElementChild;
                alert(pho1.innerHTML);
            });

            myClick("btn07",function () {
                //返回#zf的父节点
                const zf=document.getElementById("zf");
                const pn=zf.parentNode;
                //alert(pn.innerHTML);
                //innerText:该属性可以获取到元素内部的文本内容,与innerHTML不同，会自动将html标签去除
                alert(pn.innerText);
            });

            myClick("btn08",function () {
                //返回#android的前一个兄弟节点
                const android=document.getElementById("android");
                //前一个兄弟节点（可能获取到空白的文本）
                // const ad0=android.previousSibling;
                //前一个元素兄弟
                const ad=android.previousElementSibling;
                alert(ad.innerText);
            });

            myClick("btn09",function () {
                //读取#username的value属性值
                const um=document.getElementById("username");
                //读取um的属性值
                alert(um.value);
            });

            myClick("btn10",function () {
                //设置#username的value属性值
                const um=document.getElementById("username");
                //设置um的属性值
                um.value="xxxxx";
            });

            myClick("btn11",function () {
                //返回#zf的文本值
                const zf=document.getElementById("zf");
                // alert(zf.innerText);
                alert(zf.firstChild.nodeValue);
            });
        }
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            三国里的人物：
        </p>
        <ul id="city">
            <li id="zf">张飞#zf</li>
            <li>孔明</li>
            <li>刘备</li>
            <li>关羽</li>
        </ul>
        <br/>
        <br/>

        <p>超市里的水果:</p>
        <ul id="game">
            <li id="r1">香蕉</li>
            <li>苹果</li>
            <li>西红柿</li>
            <li>西瓜</li>
        </ul>
        <br/>
        <br/>

        <p>手机榜上的品牌：</p>
        <ul id="phone">
            <li>华为</li>
            <li id="xm">小米</li>
            <li>OPPO</li>
        </ul>
    </div>
</div>
<div class="inner1">
    <label>
        gender:
        <input type="radio" name="gender" value="male"/>
    </label>
    <label>
        Male:
        <input type="radio" name="gender" value="female"/>
    </label>
    Female
    <br>
    <br>
    <label>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </label>
</div>
<div id="btnList">
    <div><button id="btn01">1.查找#zf节点内容</button></div>
    <div><button id="btn02">2.查找所有li节点</button></div>
    <div><button id="btn03">3.查找name=gender的所有节点</button></div>
    <div><button id="btn04">4.查找#city下的所有li节点</button></div>
    <div><button id="btn05">5.返回#city下的所有子节点</button></div>
    <div><button id="btn06">6.返回#phone的第一个子节点</button></div>
    <div><button id="btn07">7.返回#zf的父节点</button></div>
    <div><button id="btn08">8.返回#xm的前一个兄弟节点</button></div>
    <div><button id="btn09">9.读取#username的value属性值</button></div>
    <div><button id="btn10">10.设置#username的value属性值</button></div>
    <div><button id="btn11">11.返回#zf的文本值</button></div>
</div>
</body>
</html>

四、增删改操作

createElement()	创建HTML元素
createTextNode()	创建一个文本节点对象
appendChild()	向一个父节点中添加一个新的子节点
insertBefore()	在指定的子节点前插入新的子节点
replaceChild()	可以使用指定的子节点替换已有的子节点
removeChild()	可以删除一个子节点

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /* *{
            margin:0;
            padding:0;
        }*/
        #total{
            width:400px;
            border:1px solid black;
            margin:0 auto;
        }
        #city li{
            list-style: none;
            float: left;
            margin-left:20px;
            margin-bottom: 20px;
            border:1px solid black;
            background-color: #ff6700;
        }
        /*解决高度塌陷问题*/
        .clearfix::before,.clearfix::after{
            Content:"";
            Display:table;
            Clear:both
        }
        .btnList button{
            margin-top: 20px;
            width:300px;
        }
    </style>
</head>
<body>
<div id="total" class="clearfix">
    <div id="inner">
        <p>你喜欢哪个城市？</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>天津</li>
            <li>杭州</li>
        </ul>
    </div>
</div>
<div class="btnList">
    <div><button  id="btn01"> 创建一个“广州”节点添加到#city下</button></div>
    <div><button  id="btn02">将“广州”节点插入到#bj前面</button></div>
    <div><button  id="btn03">使用“广州”节点替换#bj节点</button></div>
    <div><button  id="btn04">删除#bj节点</button></div>
    <div><button  id="btn05">读取#city内的HTML代码</button></div>
    <div><button  id="btn06">设置#bj内的HTML代码</button></div>
    <div><button  id="btn07">向city中添加广州-方法1</button></div>
    <div><button  id="btn08">向city中添加广州-方法2</button></div>
</div>
</body>
</html>
<script>
    function myClick(idStr,fun) {
        var btn=document.getElementById(idStr);
        btn.onclick=fun;
    }
    //创建一个“广州”节点添加到#city下
myClick("btn01",function () {
//创建广州节点<li>广州</li>
    //创建li元素节点
    var li=document.createElement("li");
    //创建文本节点
    var cityText=document.createTextNode("广州");
    //将广州子节点添加到li中
    li.appendChild(cityText);
    //获取id为city的节点
    var city=document.getElementById("city");
    //将广州添加到city下
    city.appendChild(li);
});

    //将“广州”节点插入到#bj前面
    //先绑定按钮2
    myClick("btn02",function () {
    //创建一个广州节点
        var li=document.createElement("li");
        var cityText=document.createTextNode("广州");
        li.appendChild(cityText);
        //获取北京的节点id,必须父节点调用
        // 用法： 旧节点的父节点.insertBefore(新节点，旧节点)
        var bj=document.getElementById("bj");
        var city=document.getElementById("city");
        city.insertBefore(li,bj);
    });

    //使用“广州”节点替换#bj节点
myClick("btn03",function () {
    //创建一个广州节点
    var li=document.createElement("li");
    var cityText=document.createTextNode("广州");
    li.appendChild(cityText);
    //获取北京节点和其父节点
    var bj=document.getElementById("bj");
    var city=document.getElementById("city");
    //替换北京节点
    // 用法： 旧节点的父节点.replaceChild(新节点，旧节点)
    city.replaceChild(li,bj);
});

    // 删除#bj节点
myClick("btn04",function () {
    var bj=document.getElementById("bj");
    var city=document.getElementById("city");
    // 用法： 父节点.removeChild(删除子节点);
   //方法一：city.removeChild(bj);
    //方法二： 子节点.parentNode.removeChild(子节点);  子节点的父辈节点
    bj.parentNode.removeChild(bj);
});

    // 读取#city内的HTML代码
    myClick("btn05",function () {
        var city=document.getElementById("city");
alert(city.innerText);
    });

    //设置#bj内的HTML代码
    myClick("btn06",function () {
        var bj=document.getElementById("bj");
bj.innerHTML="东京";
    });

    //向city添加广州，使用innerHTML也可以进行DOM的增删改
    //反观第一种方法，这种方法更好，但动作太大，所有节点重新设置
    myClick("btn07",function () {
        var city=document.getElementById("city");
        city.innerHTML+="<li>广州</li>";
    });

    //向city添加广州  折中的方法---推荐使用！！！！！
    myClick("btn08",function () {
        var city=document.getElementById("city");
        var li=document.createElement("li");
        //向li中设置文本
        li.innerHTML="广州";
        //将li添加到city中
        city.appendChild(li);
    });
</script>

五、图片浏览器实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style>
    .logo {
      width: 300px;
      height: 300px;
      background-color: #999999;
      border: 5px rgb(204, 201, 201) solid;
      overflow: hidden;
    }
    .logo img {
      width: 100%;
      height: 100%;
    }
    button {
      width: 150px;
      height: 60px;
      font-size: 25px;
      margin-right: 20px;
    }
  </style>

  <body>
    <div class="logo">
      <img src="images/logo.jpg" />
    </div>
    <br /><br />
    <button id="btn_1">上一张</button>

    <button id="btn_2">下一张</button>
  </body>

  <script type="text/javascript">
        var img = document.getElementsByTagName("img")[0];

        var img_now=0;
        var imgs=["tb1.jpg","tb2.jpg","tb3.jpg","tb4.jpg","tb5.jpg"];

        var btn_1 = document.getElementById("btn_1");
        btn_1.onclick = function () {
          img_now=img_now-1;
          if(img_now==-1){img_now=4};
          img.src="images/"+imgs[img_now];
        };

        var btn_2 = document.getElementById("btn_2");
        btn_2.onclick = function () 
        {
          img_now=img_now+1;
          if(img_now==5){img_now=0};
          img.src="images/"+imgs[img_now];
        }
          
        
  </script>
</html>

四、选择框，选择状态选取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="All" value="全选" /><br />
    <input type="button" id="uncheck" value="不选" /><br />
    <input type="button" id="othercheck" value="反选" /><br />
     <div id="div">
         <input type="checkbox" />1 &emsp13;
         <input type="checkbox" />2 &emsp13;
         <input type="checkbox" />3 &emsp13;
         <input type="checkbox" />4 &emsp13;
         <input type="checkbox" />5 &emsp13;<br />
        <input type="checkbox" />6 &emsp13;
        <input type="checkbox" />7 &emsp13;
        <input type="checkbox" />8 &emsp13;
        <input type="checkbox" />9 &emsp13;
        <input type="checkbox" />10 &emsp13;

    </div>
</body>

<script>
     window.onload=function(){
        var CheckAll=document.getElementById('All');
        var UnCheck=document.getElementById('uncheck');
        var OtherCheck=document.getElementById('othercheck');
        var div=document.getElementById('div');
         var    CheckBox=div.getElementsByTagName('input');
         CheckAll.onclick=function(){
                 for(i=0;i<CheckBox.length;i++){
                        CheckBox[i].checked=true;
                    };
            };
        UnCheck.onclick=function(){
                for(i=0;i<CheckBox.length;i++){
                        CheckBox[i].checked=false;
                    };
            };
        othercheck.onclick=function(){
                for(i=0;i<CheckBox.length;i++){
                        if(CheckBox[i].checked==true){
                                CheckBox[i].checked=false;
                            }
                        else{
                         CheckBox[i].checked=true
                            }
                        
                    };
            };
    };
   </script>


</html>

猜你喜欢

[RxJS] Adding Conditional Logic with Filter
开发工具栏、状态栏图标资源
关于Linux中Vim编译器的使用
Android软件加安全码
mac sourcetree启用外部合并工具（beyond compare）
[uboot]uboot下的mmc设备分区和启动
一篇文章3分钟的时间让你入门API测试
SysInfoTools MS SQL Transaction Log Recovery 22.0
RFSoC应用笔记 - RF数据转换器 -17- API使用指南之ADC状态指示函数
第七届蓝桥杯JavaC组省赛真题
WinForm EF+MySql企业管理软件C/S项目实战演练
Nagios 在不同平台下的安装
计算机软件考试——嵌入式系统设计师知识点汇总
translate3d 对 z-index 居然有影响
简单的 Helper 封装 -- CookieHelper
读书笔记：《招聘面试新法》
dfs 正则表达式
设计网站中的精品，你可能需要它--第四期
QT怎样插入图片

相关主题

JavaScript（11）
JavaScript学习
JavaScript之JSON
Javascript事件环
JavaScript的实现
JavaScript：函数

zl程序教程