一 DOM复习
二 节点操作
三 onsubmit事件
四 事件传播
五 焦点
六 模态对话框
一 DOM复习
控制html页面的所有标签对象（document，element）
1 属性操作
??（1）element.innerHTML element.Text
(2) element.属性=值 ?
?????
?getAttribute("属性名")
?setAttribute("属性名"，"属性值")
（3）element.claaslist.add
?????element.claaslist.remove()
二节点操作
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????height: 200px; ???????????width: 200px; ???????????border:1px solid red; ???????} ???</style> ?<script> ?????window.onload=function () { ?????????var ele_add=document.getElementsByClassName(‘addBtn‘)[0]; ???var ele_replace=document.getElementsByClassName(‘replaceBtn‘)[0]; ???var ele_del=document.getElementsByClassName(‘delBtn‘)[0]; ???ele_add.onclick=function () { ???????//新建节点 ???????var ele_a=document.createElement(‘a‘); ???????//属性值添加 ???????ele_a.innerHTML="点击"; ???????ele_a.setAttribute("href","http://baidu.com"); ???????ele_p=document.getElementsByClassName(‘c1‘)[0] ???????ele_p.appendChild(ele_a) ???????//新建节点// ???????var ele_img=document.createElement("img"); ???????//属性的赋值// ???????ele_img.src="Bootstrap_i2.png";// ???????ele_img.height=50;// ???????ele_img.width=50;// ???????var ele_p1=document.getElementById(‘p1‘)// ???????var ele_p=document.getElementsByClassName(‘c1‘)[0];// ???????ele_p1.appendChild(ele_img)// ???????ele_p.appendChild(ele_img) ???} ???ele_del.onclick=function () { ???????????//删除节点 ???????ele_p=document.getElementsByClassName(‘c1‘)[0]; ???????var ele_p1=document.getElementById(‘p1‘); ???????ele_p.removeChild(ele_p1); ???} ???ele_replace.onclick=function () {// ???????//替换节点 ????????var ele_a=document.createElement(‘a‘);// ??????// 属性值添加 ???????ele_a.innerHTML="点击"; ???????ele_a.setAttribute("href","http://baidu.com"); ???????var ele_p1=document.getElementById(‘p1‘); ???????var ?ele_p=document.getElementsByClassName(‘c1‘)[0]; ???????ele_p.replaceChild(ele_a,ele_p1);// ???} ???var eles=document.getElementsByClassName(‘del‘); ???for (var i=0;i<eles.length;i++){ ???????eles[i].onclick=function () { ???????????console.log(this.parentElement.parentElement); ???????????var ele_tr=this.parentElement.parentElement; ???????????var ele_tbody=document.getElementById(‘t1‘); ???????????ele_tbody.removeChild(ele_tr) ???????} ???} ?????}</script></head><body><div class="c1"> ???<p id="p1">p1</p></div><button class="addBtn">ADD</button><button class="delBtn">del</button><button class="replaceBtn">replace</button><hr><table> ???<tbody id="t1"> ???<tr> ???????<td><input type="checkbox"></td> ???????<td><input type="text"></td> ???????<td><button class="del">del</button></td> ???</tr> ???<tr> ???????<td><input type="checkbox"></td> ???????<td><input type="text"></td> ???????<td><button class="del">del</button></td> ???</tr> ???<tr> ???????<td><input type="checkbox"></td> ???????<td><input type="text"></td> ???????<td><button class="del">del</button></td> ???</tr> ???</tbody></table><script>// ???var ele_add=document.getElementsByClassName(‘addBtn‘)[0];// ???var ele_replace=document.getElementsByClassName(‘replaceBtn‘)[0];// ???var ele_del=document.getElementsByClassName(‘delBtn‘)[0];// ???ele_add.onclick=function () { ???????//新建节点// ???????var ele_a=document.createElement(‘a‘); ???????//属性值添加// ???????ele_a.innerHTML="点击";// ???????ele_a.setAttribute("href","http://baidu.com");// ???????ele_p=document.getElementsByClassName(‘c1‘)[0]// ???????ele_p.appendChild(ele_a) ???????//新建节点// ???????var ele_img=document.createElement("img"); ???????//属性的赋值// ???????ele_img.src="Bootstrap_i2.png";// ???????ele_img.height=50;// ???????ele_img.width=50;// ???????var ele_p1=document.getElementById(‘p1‘)// ???????var ele_p=document.getElementsByClassName(‘c1‘)[0];// ???????ele_p1.appendChild(ele_img)// ???????ele_p.appendChild(ele_img)// ???}// ???ele_del.onclick=function () { ???????????//删除节点// ???????ele_p=document.getElementsByClassName(‘c1‘)[0];// ???????var ele_p1=document.getElementById(‘p1‘);// ???????ele_p.removeChild(ele_p1);// ???}// ???ele_replace.onclick=function () {// ???????//替换节点// ????????var ele_a=document.createElement(‘a‘);// ??????// 属性值添加// ???????ele_a.innerHTML="点击";// ???????ele_a.setAttribute("href","http://baidu.com");// ???????var ele_p1=document.getElementById(‘p1‘);// ???????var ?ele_p=document.getElementsByClassName(‘c1‘)[0];// ???????ele_p.replaceChild(ele_a,ele_p1);//// ???} ???var eles=document.getElementsByClassName(‘del‘); ???for (var i=0;i<eles.length;i++){ ???????eles[i].onclick=function () { ???????????console.log(this.parentElement.parentElement); ???????????var ele_tr=this.parentElement.parentElement; ???????????var ele_tbody=document.getElementById(‘t1‘); ???????????ele_tbody.removeChild(ele_tr) ???????} ???}</script></body></html>三 onsubmit事件
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><form action="" id="submit"> ???<p>姓名<input type="text" ?name=‘user‘ id="username"></p> ???<p>年龄<input type="text" ?name=‘age‘ id="age"></p> ???<input type="submit" ></form><input type="text" id="test"><script> ???var ele_form=document.getElementById(‘submit‘); ???var ele_user=document.getElementById(‘username‘); ???var ele_age=document.getElementById(‘age‘); ???ele_form.onsubmit=function (event) { ???????var username=ele_user.value; ???????var userage=ele_age.value; ???????alert(username); ???????alert(userage); ???????//阻止默认事件发生 ??????// 方式一 ???????//return false ???????//方式二 ???????event.preventDefault() ???????//event对象：某次事件触发时所有的状态信息 ???}</script><script> ???var ele_test=document.getElementById(‘test‘); ???ele_test.onkeydown=function (e) {// ???????if (e.keyCode==13){ alert(6666)} ???????if (e.keyCode==13){ console.log(6666)} ???}</script></body></html>四 事件传播
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????height:500px; ???????????width:400px; ???????????border:1px solid red; ???????????background-color: greenyellow; ???????} ???????.c2{ ???????????height:200px; ???????????width:200px; ???????????border:1px solid green; ???????????background-color: #2459a2; ???????} ???</style></head><body><div class="c1"> ???<div class="c2"></div></div><script> ???var ele_b=document.getElementsByClassName(‘c1‘)[0]; ???var ele_s=document.getElementsByClassName(‘c2‘)[0]; ????ele_b.onclick=function () {alert(6666) ????} ??????ele_s.onclick=function (event) {alert(222) ??????????event.stopPropagation();//阻止事件传播 ????}</script></body></html>五 焦点
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><input type="text" id="search" placeholder="username">//模拟placeholder 只是一个提示功能，而value是一个默认的值，如果不写点提交就可以发送出去<script> ???var ele_search=document.getElementById(‘search‘); ???ele_search.onfocus=function () { ???????this.value=‘‘ ???} ????ele_search.onblur=function () { ???????if (this.value.trim()==""){ ???????????this.value=‘username‘ ???????} ???}</script></body></html>六 模态对话框
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.back{ ???????????width: 100%; ???????????height: 2000px; ???????} ???????.shade{ ???????????position: fixed; ???????????top:0; ???????????left:0; ???????????right:0; ???????????bottom:0; ???????????background-color:gray ; ???????????opacity: 0.5; ???????} ???????.hide{ ???????????display: none; ???????} ???????.model{ ???????????position: fixed; ???????????top:100px; ???????????left:40%; ???????????width:400px; ???????????height: 400px; ???????????background-color: white; ???????} ???</style></head><body><div class="back"> ???????<button id="add">add</button></div><div class="shade hide"></div><div class="model hide"><form action=""> ???????<p>姓名<input type="text"></p> ???????<p>年龄<input type="text"></p> ???????<input type="button" id="btn" value="提交"> ???</form></div><script> ???var ele_add=document.getElementById("add"); ???var ele_mdoel=document.getElementsByClassName("model")[0]; ???var ele_shade=document.getElementsByClassName("shade")[0]; ???ele_add.onclick=function () { ???????ele_mdoel.classList.remove("hide"); ???????ele_shade.classList.remove("hide") ???}</script></body></html>JS进阶
原文地址：http://www.cnblogs.com/1a2a/p/7647678.html