900字范文 > js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom

js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom

时间：2021-11-07 11:10:43

dom基础

<!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>dom</title></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">// 浏览器已经为我们提供文档节点对象，这个对象时window属性// 可以在页面中直接使用，文档节点代表的是整个网页//console.log(document);//获取button对象:var btn = document.getElementById("btn");console.log(btn);//修改按钮里的文字//先试试能不能获取到console.log(btn.innerHTML);btn.innerHTML="I am a button"</script></body></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></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">//事件，就是浏览器和用户之间的交互行为// 比如，点击按钮，鼠标移动，关闭窗口//获取按钮对象var btn=document.getElementById("btn");console.log(btn);//可以为按钮对应的时间绑定处理函数的形式来响应事件，//这样当事件被触发时，其对应的函数将会被调用//像这种为单击事件绑定的函数，我们称为单击响应函数btn.ondblclick=function(){alert("点一次哦~~");};</script></body></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><script type="text/javascript">/* onload事件会在整个页面加载完成之后才触发！！！为window绑定一个onload该事件对应的相应函数将会在页面加载完成之后执行这样就可以确保代码执行时所有的dom对象都已经加载完毕了*/window.onload = function () {//获取按钮var btn = document.getElementById("btn");//为按钮绑定响应函数btn.onclick = function () {alert("hello");}}</script></head><body><button id="btn">点我一下 </button></body></html>

通过类名

var btn = document.getElementsByClassName("btn")[0];btn.onclick = function () {alert("dfg");}getElementsByNamegetElementsByTagName都得到的是一个数组

获取元素节点

<!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><script type="text/javascript">/* 尝试定义一个函数，专门用来为指定元素绑定单击响应函数idbtr 要绑定单击响应函数的对象的id属性值fun 回调函数*/function myclick(idstr, fun) {var btn = document.getElementById(idstr);btn.onclick = fun;}window.onload = function () {//为id为btn01的按钮绑定一个单机响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function () {//查找#bj的节点var bj = document.getElementById("bj");//打印bj(可以通过查看元素内部的html代码查看获取到的对不对)alert(bj.innerHTML);}var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有的li节点//通过标签名获取一组元素标签节点//这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//alert(lis);//alert(lis.length);//遍历数组for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}}var btn03 = document.getElementById("btn03");btn03.onclick = function () {//查找name=gender的所有元素(input元素)var inputs = document.getElementsByName("gender");// alert(inputs.length);for (var i = 0; i < inputs.length; i++) {/* innerHTML用来获取元素内部的HTML代码,对于自结束标签（input）这个属性没有意思alert(inputs[i].innerHTML);*//*如果需要读取元素节点的属性，直接使用元素.属性名alert(inputs[i].value); 元素.id 元素.name 元素.value 但是class属性不能采用这种方式，要使用className*/alert(inputs[i].className);}}var btn04 = document.getElementById("btn04");btn04.onclick = function () {//查找#city下面的所有li节点//首先找到#cityvar city = document.getElementById("city");var lis = city.getElementsByTagName("li");// alert(lis.length);for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}}var btn05 = document.getElementById("btn05");btn05.onclick = function () {//返回#city的所有子节点var city = document.getElementById("city");/* childnodes会获取包括文本节点在内的所有节点标签之间的空白（换行）也会被当做节点在IE8以下的浏览器中不会把空白当做节点var cns=city.childNodes;alert(cns.length); //9children属性可以获取当前元素的所有子元素*/var cns = city.children;for (var i = 0; i < cns.length; i++) {alert(cns[i].innerHTML);}}var btn06 = document.getElementById("btn06");btn06.onclick = function () {//获取id为phone的属性var phone = document.getElementById("phone");//返回#phone的第一个子节点/*firstchild 可以获取到当前元素的第一个子节点（包括空白文本节点）firstElementChild 不包括空白但是兼容性不好*/var fir = phone.firstElementChild;alert(fir.innerHTML);}//为id为btn07的按钮绑定一个单击响应函数myclick("btn07", function () {//获取id为北京的节点var bj = document.getElementById("bj");//父节点肯定是一个var pn = bj.parentNode;// alert(pn);alert(pn.innerHTML);/*innerText 可以获取元素内部的文本内部，并且会自动将html标签去除，和innerhtml类似 */alert(pn.innerText);});//btn08myclick("btn08", function () {//返回id为Android的前一个兄弟节点var and = document.getElementById("android");/*也可能获取到空白文本(空格)*/// var andps=and.previousSibling;/*不会获取空白文本*/var andps = and.previousElementSibling;alert(andps);});//btn09myclick("btn09", function () {//获取id为username的value值属性var user = document.getElementById("username");//value值就是文本框中填写的内容alert(user.value);});//btn10myclick("btn10", function () {//获取id为username的value值属性var user = document.getElementById("username");//value值就是文本框中填写的内容user.value = "今天天气真不错";});myclick("btn11", function () {var bj = document.getElementById("bj");//alert(bj.innerHTML); 有标签//alert(bj.innerText) //获取北京的文本节点alert(bj.firstChild.nodeValue);});}</script></head><style>body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;}#btnList {float: left;}#total {width: 450px;float: left;}ul {list-style-type: none;margin: 0px;padding: 0px;}.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male" />Male<input class="hello" type="radio" name="gender" value="female" />Female<br><br>name:<input type="text" name="name" id="username" value="abcde" /></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body></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><script type="text/javascript">window.onload = function () {/*点击按钮切换图片切换图片，就是修改img标签的Src属性*///获取两个按钮var prev = document.getElementById("prev");var next = document.getElementById("next");/*获取img,因为返回的是一个数组，但数组中每次其实只有一张图片，所以我们加一个【0】，把第一张图片给取出来*/var img = document.getElementsByTagName("img")[0];//查看img得到的是什么（加上索引【0】，得到的就是元素了） alert(img);//创建一个数组，用来保存图片的路径var imgarr = ["./picture/jd (1).jpg", "./picture/jd (2).jpg", "./picture/jd (3).jpg", "./picture/tb (2).png", "./picture/tb (1).png"]//创建一个变量，来保存当前正在显示的图片的索引var index = 0;//设计提示文字var info=document.getElementById("info");info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";//分别为两个按钮绑定单击响应函数prev.onclick = function () {//修改元素的属性元素.属性=属性值/*这样得到的是定值，不太好img.src="./picture/jd (1).jpg";*/index--;if(index<0){//变成循坏index=imgarr.length-1;}info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";img.src = imgarr[index];}next.onclick = function () {index++;if(index>imgarr.length-1){index=0;}img.src = imgarr[index];info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";}}</script></head><style>* {margin: 0;padding: 0;}#outer {width: 590px;margin: 50px auto;background-color: antiquewhite;padding: 10px;text-align: center;}</style><body><div id="outer"><p id="info"></p><img src="./picture/jd (1).jpg" alt="京东"><button id="prev">上一张</button><button id="next">下一张</button></div></body></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><script type="text/javascript">window.onload = function () {var items = document.getElementsByName("items");//checkedAllBtn全选按钮，点击按钮以后，多选框全被选中var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function () {//设置多选框变成选中状态// alert(items.length);验证一下是否获取了for (var i = 0; i < items.length; i++) {items[i].checked = true;}//将全选按钮选中checkedAllBox.checked=true;};//checkedNoBtn全不选var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function () {// var items=document.getElementsByName("items");for (var i = 0; i < items.length; i++) {items[i].checked = false;}//将全不选按钮选中checkedAllBox.checked=false;};//checkedRevBtn反选var checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function () {// var items=document.getElementsByName("items");//也加默认设置为truecheckedAllBox.checked=true;for (var i = 0; i < items.length; i++) {/*if(items[i].checked){items[i].checked=false;}else{items[i].checked=true;}*/items[i].checked = !(items[i].checked);//如果不选的话，去掉全选if(!items[i].checked){checkedAllBox.checked=false;}}//在反选时，也要进行判断，可以直接复制过来但是比较麻烦}//sendBtn提交var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function () {for (var i = 0; i < items.length; i++) {if (items[i].checked) {alert(items[i].value);}}}//checkedAllBoxvar checkedAllBox = document.getElementById("checkedAllBox");checkedAllBox.onclick = function () {for (var i = 0; i < items.length; i++) {/* items[i].checked =checkedAllBox.checked;在事件的相应函数中，响应函数给谁绑定的this就是谁*/items[i].checked =this.checked;}}/*如果四个多选框全都（没）选中，则CheckBox也应该（没）选中给四个多选框分别绑定单击响应函数*/for(var i=0;i<items.length;i++){items[i].onclick=function(){checkedAllBox.checked=true;for(var j=0;j<items.length;j++){//如果有一个没选中if(!items[j].checked){checkedAllBox.checked=false;//一旦进入break，则退出循环break;}}};}};</script></head><body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选<br /><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反选" /><input type="button" id="sendBtn" value="提交" /></form></body></html>

dom的其他属性

<!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>dom其他属性</title><script type="text/javascript">window.onload = function () {/*获取body标签var body=document.getElementsByClassName("body")[0];在document中有一个属性body，它保存的是body的引用documentElement保存的是html根标签document.all代表页面中所有的元素(html head body meta title....)*/var body = document.body;var html = document.documentElement;// console.log(html);var all = document.all;// for(var i=0;i<all.length;i++)// console.log(all[i]);/*根据元素的class属性查询一组元素节点对象兼容性 ie9+ */var box1 = document.getElementsByClassName("box1");console.log(box1.length);/*获取box1中的所有div( .box1 div ) document.querySelector()需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象虽然IE8中没有getElementsByClassName，但是我们可以通过querySelector使用该方法只会返回唯一的元素如果满足条件的元素有多个，但是只会返回第一个*/var div = document.querySelector(".box1 div");console.log(div.innerHTML);/*document.querySelectorAll 该用法和selector用法类似，不同的是它会将符合条件的元素封装在一个数组里*///var box1 = document.querySelectorAll(".box1")[0];var box1 = document.querySelectorAll(".box1");console.log(box1.length);}</script></head><body><div class="box1"><div>我是div中的box1</div></div><div></div></body></html>

dom的增加

<!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>dom的增删改</title><script type="text/javascript">function myclick(idstr, fun) {var btn = document.getElementById(idstr);btn.onclick = fun;}window.onload = function () {//1.创建一个广州节点，绑定在#city下 myclick("btn01", function () {/*广州节点是一个li节点document.createElement 可以用于创建一个元素节点对象想创建什么标签就写什么，将新建好的对象返回document.createTextNode可以用来创建一个文本节点对象需要一个文本内容作为参数，并且将新的节点返回*/var li = document.createElement("li");var gztext = document.createTextNode("广州");/* Text是li的子节点，现在开始设置appendChild()向一个父节点添加一个新的子节点父节点.appendChild(子节点)*/li.appendChild(gztext);var city = document.getElementById("city");city.appendChild(li);});//将广州节点插入到#bj前面myclick("btn02", function () {var li = document.createElement("li");var gztext = document.createTextNode("广州");li.appendChild(gztext);/*insertBefore在指定的子节点前插入新的子节点，（找父节点，没有父节点就没有子节点）父节点.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 gztext = document.createTextNode("广州");li.appendChild(gztext);var bj = document.getElementById("bj");var city = document.getElementById("city");/*replaceChild可以使用指定的子节点替换已有的父节点（指定子节点的）父节点.replaChild(新结点，旧节点)*/city.replaceChild(li, bj);});//删除#bj节点myclick("btn04", function () {var bj = document.getElementById("bj");var city = document.getElementById("city");/*removeChild可以删除子节点父节点.removeChild(删除的节点)city.removeChild(bj);子节点.parentNode.removeChild(子节点);*/bj.parentNode.removeChild(bj);});//读取city内的html代码myclick("btn05",function(){var city=document.getElementById("city");console.log(city.innerHTML);});//设置bj内的html代码myclick("btn06",function(){var bj=document.getElementById("bj");bj.innerHTML="昌平";});//创建一个广州节点，添加到city下面myclick("btn07",function(){//使用innerHTML也可以完成相关操作var li=document.createElement("li");li.innerHTML+="广州";var city=document.getElementById("city");city.appendChild(li);});}</script></head><style>body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;text-align: left;}#btnList {float: left;}#total {width: 450px;float: left;}ul {list-style-type: none;margin: 0px;padding: 0px;}.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">1、创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div><div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div><div><button id="btn04">4、删除#bj节点</button></div><div><button id="btn05">5、读取#city内的HTML代码</button></div><div><button id="btn06">6、设置#bj内的HTML代码</button></div><div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div></div></body></html>

添加删除练习1

<!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><script type="text/javascript">//点击a删除tr的响应函数function delA() {/*点击超链接以后，需要删除超链接所在的那一行点击哪个超链接，this就是谁alert(this);获取到当前的tr*/var tr = this.parentNode.parentNode;/*获取要删除员工的名字var name=tr.getElementsByTagName("td")[0].innerHTML;或者*/var name = tr.children[0].innerHTML;/*删除之前弹出一个对话框alert("确认删除吗?")alert不行，没有取消删除confirm用于弹出一个带有确认和取消按钮的提示框它是有返回值的，如果用户点击确认，返回true*/if (confirm("确认删除" + name + "吗?")) {tr.parentNode.removeChild(tr);}/*点击超链接以后，超链接会跳转页面但是此时我们不希望跳转通过return false或者把超链接的href改为JavaScript:;*/return false;}window.onload = function () {/*1.点击超链接之后，删除员工的信息我们要做的就是，首先获取超链接*/var allA = document.getElementsByTagName("a");//为每个超链接绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}//2.添加var sub = document.getElementById("addEmpButton");sub.onclick = function () {//获取文本框input中的内容var name = document.getElementsByTagName("input")[0];// alert(name.value);查看是否正确获取到值var email = document.getElementById("email").value;// alert(email.value);var salary = document.getElementsByTagName("input")[2];// alert(salary.value);var tableobj = document.getElementById("employeeTable");var trobj = document.createElement("tr");//准备新添加一行元素，先获取一个td//因为步骤重复，这个地方合成一个函数function APPEND(info) {var tdobj = document.createElement("td");tdobj.innerHTML = info;trobj.appendChild(tdobj);}APPEND(name.value);APPEND(email);//把value在上面获取也行APPEND(salary.value);/* var tdobj = document.createElement("td");tdobj.innerHTML = email.value;trobj.appendChild(tdobj);var tdobj = document.createElement("td");tdobj.innerHTML = salary.value;trobj.appendChild(tdobj);*/var tdobj = document.createElement("td");var aobj = document.createElement("a");aobj.innerHTML = "Delete";//向a中添加href属性aobj.href = "javascript:;";//为新添加的a重新添加单击绑定函数aobj.onclick = delA;tdobj.appendChild(aobj);trobj.appendChild(tdobj);//获取tableobj的tbody(返回的是一个数组)var tbody = tableobj.getElementsByTagName("tbody")[0];tbody.appendChild(trobj);}}</script></head><style>#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th,td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}</style><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></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>

添加删除练习2

<!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><script type="text/javascript">//点击a删除tr的响应函数function delA() {var tr = this.parentNode.parentNode;var name = tr.children[0].innerHTML;if (confirm("确认删除" + name + "吗?")) {tr.parentNode.removeChild(tr);}return false;}window.onload = function () {var allA = document.getElementsByTagName("a");//为每个超链接绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}//2.添加var sub = document.getElementById("addEmpButton");sub.onclick = function () {//获取文本框input中的内容var name = document.getElementsByTagName("input")[0];// alert(name.value);查看是否正确获取到值var email = document.getElementById("email").value;// alert(email.value);var salary = document.getElementsByTagName("input")[2];// alert(salary.value);var trobj = document.createElement("tr");trobj.innerHTML = "<td>" + name.value + "</td>" + "<td>" + email + "</td>" + "<td>" + salary.value + "</td>" +"<td><a href='javascript:;'>Delete</a></td>";//获取添加的a元素，并给它绑定单击响应函数var a = trobj.getElementsByTagName("a")[0];a.onclick = delA;var tableobj = document.getElementById("employeeTable");/*在代码里面是没有body,但是检查的时候会发现，有，我们需要添加在tbody里面而且tbody是table里面的元素*/var tbody=tableobj.getElementsByTagName("tbody")[0];tbody.appendChild(trobj);}}</script></head><style>#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th,td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}</style><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></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>

a的索引问题

window.onload = function () {var allA = document.getElementsByTagName("a");//为每个超链接绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {/*for循坏在页面加载完成之后立即执行而响应函数会在超链接被点击时才执行当响应函数执行时，for循坏早已经执行完毕所以响应函数这个3，才是undefined*/alert("for循环正在执行"+i);allA[i].onclick = function () {alert("响应函数正在执行"+i);/*这个地方的this能不能换成allA[i],不可以var tr = this.parentNode.parentNode;*/}}//2.添加

js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。