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> </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