• DOM查询


     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <script type="text/javascript">
     8  window.onload=function(){
     9  var body=document.getElementsByTagName("body")[0];
    10  console.log(body);
    11  /*
    12  在document中有一个属性body,它保存的是body的引用
    13  document.documentElement保存的是HTML根标签
    14  document.all代表页面中所有的元素
    15  */
    16  var all=document.all;
    17  alert(all.innerHTML);//HTMLAllCollection
    18  var body=document.body;
    19  //alert(body);//HTMLBodyElement
    20 
    21  all=document.getElementsByTagName("*");
    22  console.log(all.length);
    23  /*
    24  根据元素的class属性值查询一组元素节点对象
    25  getElementsByClassName()可以根据Class属性值获取一组元素节点对象,
    26  但是该方法不支持IE8及以下的浏览器
    27  */
    28  var box1=document.getElementsByClassName("box1");
    29  console.log(box1.length);
    30 
    31  /*
    32  获取页面中的所有的div
    33  */
    34  var divs=document.getElementsByTagName("div");
    35  console.log(divs.length);
    36  /*
    37  .box1 div
    38  document.querySelector()
    39  需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
    40  使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
    41  document.querySelectorAll()
    42  该方法和querySelector(),不同的是它返回符号条件的元素封装到一个数组,
    43  即使符合条件的只有一个也要返回数组
    44  */
    45  var b=document.querySelector(".box1 div");
    46  console.log(b.innerHTML);
    47  var a=document.querySelector(".box1");
    48  console.log(a.innerHTML);
    49  var box1=document.querySelectorAll(".box1");
    50  console.log(box1.length);
    51  for(var i=0;i<box1.length;i++)
    52  console.log(box1[i].innerHTML);
    53  };
    54   </script>
    55 
    56 <body>
    57 
    58 <div class="box1">
    59 <div>123</div>
    60 </div>
    61 <div class="box1">2</div>
    62 <div class="box1">3</div>
    63 </body>
    64 </html>

    DOM增删查改

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="UTF-8">
      5     <title></title>
      6 </head>
      7 <script type="text/javascript">
      8 function myClick(str,fun)
      9 {
     10    str=document.getElementById(str);
     11    str.onclick=fun;
     12 }
     13  window.onload=function(){
     14  myClick("01",function(){
     15 /*
     16 document.createElement()可以用于创建一个元素节点对象
     17 它需要一个标签名作为参数
     18 */
     19 var li =document.createElement("li");
     20 /*
     21 document.createTextNode()
     22 可以用来创建一个文本节点对象
     23 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
     24 */
     25 var b=document.createTextNode("深圳");
     26 /*将b设置li的子节点
     27 appendChild()
     28 向一个父节点中添加一个新的子节点
     29 用法 父节点.appendChild(子节点);
     30 */
     31 li.appendChild(b);
     32 var city=document.getElementById("city");
     33 //将广州添加到city下
     34 city.appendChild(li);
     35  });
     36 /*
     37 insertBefore()
     38 可以在指定的子节点前插入新的节点
     39 语法 父节点.insertBefore(新节点,旧节点)
     40 */
     41 myClick("02",function(){
     42 var li=document.createElement("li");
     43 var b=document.createTextNode("广州");
     44 li.appendChild(b);
     45 var city=document.getElementById("city");
     46 var bj=document.getElementById("bj");
     47 city.insertBefore(li,bj);
     48 });
     49 myClick("03",function(){
     50 var bj=document.getElementById("bj");
     51 var li=document.createElement("li");
     52 var b=document.createTextNode("广东");
     53 li.appendChild(b);
     54 /*
     55 replaceChild()
     56 可以使用指定的子节点替换已有的节点
     57 语法 父节点.replaceChild(新节点,旧节点);
     58 */
     59 city.replaceChild(li,bj);
     60 });
     61 myClick("04",function(){
     62 var bj=document.getElementById("bj");
     63 var city=document.getElementById("city");
     64 /*
     65 removeChild()
     66 可以删除一个子节点
     67 语法 父节点.removeChild(子节点);
     68 子节点.parentNode.removeChild(子节点);
     69 */
     70 city.removeChild(bj);
     71 bj.parentNode.removeChild(bj);
     72 });
     73 myClick("05",function(){
     74 var city=document.getElementById("city");
     75 alert(city.innerHTML);
     76 });
     77 myClick("06",function(){
     78 var bj=document.getElementById("bj");
     79 bj.innerHTML="成都";
     80 /*
     81 使用innerHTML也可以完成DOM的增删改的相关操作
     82 city.innerHTML+="<li>广州</li>";//一般会将两种方式结合使用
     83 
     84 //创建一个li
     85 var li=document.createElement("li");
     86 li.innerHTML="广州";
     87 //将li添加到city中
     88 city.appendChild(li);
     89 
     90 
     91 */
     92 });
     93  };
     94   </script>
     95 
     96 <body>
     97 
     98 <div>
     99     <p>你喜欢什么城市?</p>
    100     <ul id="city">
    101         <li>上海</li>
    102         <li id="bj">北京</li>
    103     </ul>
    104 </div>
    105 <input type="button" id="01" value="将深圳添加到#city下"/>
    106 <input type="button" id="02" value="将广州添加到北京下"/>
    107 <input type="button" id="03" value="使用广东节点替换北京节点"/>
    108 <input type="button" id="04" value="删除北京节点"/>
    109 <input type="button" id="05" value="读取#city内的HTML代码">
    110 <input type="button" id="06" value="设置#bj内的HTML代码">
    111 </body>
    112 </html>

    DOM增删查改

    
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <script type="text/javascript">

    function del(){
    /*
    点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,但是此时我们不希望出现默认行为,
    可以通过在响应函数的最后return false 来取消默认行为
    */
    //return false;在Firefox和IE里好像没有效果
    /*
    点击超链接以后需要删除超链接所在的那行
    这里我们点击那个超链接this就是谁
    获取当前的tr
    */
    var tr=this.parentNode.parentNode;
    //获取要删除要元素的名字
    var b=tr.getElementsByTagName("th")[0].innerHTML;
    //alert(b);
    /*
    confirm()用于弹出一个带有确认和取消按钮的提示框
    需要一个字符串作为参数,该字符串将会作为提示文字显示出来
    如果用户点击确定则会返回true,点击取消则会返回false
    */
    var flag=confirm("确认删除"+b+"吗?");
    if(flag)
    tr.parentNode.removeChild(tr);
    };

    window.onload=function(){
    //点击超链接删除一个员工的信息
    //获取使用超链接
    var allA=document.getElementsByTagName("a");
    for(var i=0;i<allA.length;i++){
    allA[i].onclick=del;
    }
    //为提交按钮绑定一个单击响应函数,获取文本框的内容用value值
    var addEmpButton=document.getElementById("addEmpButton");
    addEmpButton.onclick=function(){
    var name=document.getElementById("empName").value;
    var email=document.getElementById("email").value;
    var salary=document.getElementById("salary").value;
    //alert(name+" "+email+" "+salary);
    //需要将获取到的节点保存到tr
    var tr=document.createElement("tr");

    var nameTh=document.createElement("th");
    var emailTh=document.createElement("th");
    var salaryTh=document.createElement("th");
    var aTh=document.createElement("th");
    //超链接
    var a=document.createElement("a");//a标签

    //创建文本节点
    var nameText=document.createTextNode(name);
    var emailText=document.createTextNode(email);
    var salaryText=document.createTextNode(salary);
    var delText=document.createTextNode("Delete");//在a标签中插入delete

    //将文本条件到th中
    nameTh.appendChild(nameText);
    emailTh.appendChild(emailText);
    salaryTh.appendChild(salaryText);
    a.appendChild(delText);
    aTh.appendChild(a);

    //将td加入tr
    tr.appendChild(nameTh);
    tr.appendChild(emailTh);
    tr.appendChild(salaryTh);
    tr.appendChild(aTh);

    //向a中添加href属性
    a.href="javascript:;";
    a.onclick=del;
    //获取table
    var employeeTable=document.getElementById("employeeTable");
    var tbody=employeeTable.getElementsByTagName("tbody")[0];

    //将tr添加到table中
    tbody.appendChild(tr);
    };

    };
    </script>

    <body>
    <table id="employeeTable">
    <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
    </tr>
    <tr>
    <th>Tom</th>
    <th>tom@tom.com</th>
    <th>5000</th>
    <th><a href="javascript:;">Delete</a></th>
    </tr>
    <tr>
    <th>Jerry</th>
    <th>jerry@sohu.com</th>
    <th>8000</th>
    <th><a href="javascript:;">Delete</a></th>
    </tr>
    <tr>
    <th>Bob</th>
    <th>bob@sohu.com</th>
    <th>2000</th>
    <th><a href="javascript:;">Delete</a></th>
    </tr>
    </table>

    <div id="formDiv">
    <h4>添加新员工</h4>
    <table>
    <tr>
    <td class="word">name:</td>
    <td class="inp">
    <input type="text" name="empName" id="empName"/>
    </td>
    </tr>

    <tr>
    <td class="word">email:</td>
    <td class="inp">
    <input type="text" name="email" id="email"/>
    </td>
    </tr>

    <tr>
    <td class="word">salary:</td>
    <td class="inp">
    <input type="text" name="salary" id="salary"/>
    </td>
    </tr>

    <tr>
    <td colspan="2" align="center">
    <button id="addEmpButton" value="abc">Submit</button>
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
     

    添加新元素可以使用下面的方法,比上面增加元素节点的方法简单。

    var tr=document.createElement("tr");
    tr.innerHTML="<th>"+name+"</th>"
    +"<th>"+email+"</th>"+
    "<th>"+salary+"</th>"+
    "<th><a href='javascript:;'>Delete</a></th>";


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
    
        function del(){
        /*
        点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,但是此时我们不希望出现默认行为,
        可以通过在响应函数的最后return false 来取消默认行为
        */
        //return false;在Firefox和IE里好像没有效果
        /*
        点击超链接以后需要删除超链接所在的那行
        这里我们点击那个超链接this就是谁
        获取当前的tr
        */
        var tr=this.parentNode.parentNode;
        //获取要删除要元素的名字
        var b=tr.getElementsByTagName("th")[0].innerHTML;
         //alert(b);
        /*
        confirm()用于弹出一个带有确认和取消按钮的提示框
        需要一个字符串作为参数,该字符串将会作为提示文字显示出来
        如果用户点击确定则会返回true,点击取消则会返回false
        */
        var flag=confirm("确认删除"+b+"吗?");
        if(flag)
        tr.parentNode.removeChild(tr);
        };
    
        window.onload=function(){
        //点击超链接删除一个员工的信息
        //获取使用超链接
        var allA=document.getElementsByTagName("a");
        for(var i=0;i<allA.length;i++){
        allA[i].onclick=del;
        }
    
        var addEmpButton=document.getElementById("addEmpButton");
        addEmpButton.onclick=function(){
        var name=document.getElementById("empName").value;
        var email=document.getElementById("email").value;
        var salary=document.getElementById("salary").value;
    
        var tr=document.createElement("tr");
        tr.innerHTML="<th>"+name+"</th>"
        +"<th>"+email+"</th>"+
        "<th>"+salary+"</th>"+
        "<th><a href='javascript:;'>Delete</a></th>";
    
        //获取table
        var employeeTable=document.getElementById("employeeTable");
        var tbody=employeeTable.getElementsByTagName("tbody")[0];
        var a=tr.getElementsByTagName("a")[0];
        a.onclick=function(){
        var tr=this.parentNode.parentNode;
        var name=tr.getElementsByTagName("th")[0].innerHTML;
        var flag=confirm("确认删除"+name+"吗?")
        if(flag)
        tr.parentNode.removeChild(tr);
        };
    
        //将tr添加到table中
        tbody.appendChild(tr);
        };
    
        };
      </script>
    
    <body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th>Tom</th>
            <th>tom@tom.com</th>
            <th>5000</th>
            <th><a href="javascript:;">Delete</a></th>
        </tr>
        <tr>
            <th>Jerry</th>
            <th>jerry@sohu.com</th>
            <th>8000</th>
            <th><a href="javascript:;">Delete</a></th>
        </tr>
        <tr>
            <th>Bob</th>
            <th>bob@sohu.com</th>
            <th>2000</th>
            <th><a href="javascript:;">Delete</a></th>
        </tr>
    </table>
    
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                <input type="text" name="empName" id="empName"/>
                </td>
            </tr>
    
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                <input type="text" name="email" id="email"/>
                </td>
            </tr>
    
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary"/>
                </td>
            </tr>
    
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">Submit</button>
                </td>
            </tr>
        </table>
    </div>
    </body>
    </html>

    注意点:

     1 var allA=document.getElementsByTagName("a");
     2     for(var i=0;i<allA.length;i++){
     3     allA[i].onclick=function(){
     4     var tr=this.parentNode.parentNode;
     5     //var tr=allA[i].parentNode.parentNode;
     6     /*
     7    for循环会在页面加载完成之后立即执行,
     8    而响应函数会在超链接点击时才执行
     9    当响应函数执行时,for循环早已执行完毕
    10    所以当执行响应函数时,i==3 不能用allA[i]代替this
    11     */
    12     var b=tr.getElementsByTagName("th")[0].innerHTML;
    13     var flag=confirm("确认删除"+b+"吗?");
    14     if(flag)
    15     tr.parentNode.removeChild(tr);
    16     };
  • 相关阅读:
    Apache Shiro 使用手册(二)Shiro 认证
    jdk 环境变量
    IDEA 相关整理
    mysql 相关命令
    hbase 迁库移库步骤
    Linux 常用指令整理
    springboot aop + logback + 统一异常处理 打印日志
    查看jar包的jdk版本
    maven 将jar包推送到自己本机的maven库
    jar包内的文件导出的注意点
  • 原文地址:https://www.cnblogs.com/zuiaimiusi/p/11253579.html
Copyright © 2020-2023  润新知