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     };






        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/zuiaimiusi/p/11253579.html