DOM操作里的window对象和document对象
事件：事先设置好的程序，当点击的时候，被触发。
1 <body> 2 <input type="button" value="点击" onclick="dianJi()"/> 3 </body> 4 <script type="application/javascript"> 5 function dianJi(){ 6 alert("点击了"); 7 } 8 </script>
一、window对象
打开一个窗口
1 <body> 2 <input type="button" value="点击" onclick="show()"/> 3 </body> 4 <script type="application/javascript"> 5 function show(){ 6 window.open("http://www.baidu.com","_black",""); 7 } 8 </script>
关闭窗口
1 <body> 2 <input type="button" value="点击" onclick="show()"/> 3 <input type="button" value="关闭" onclick="guan()"/> 4 </body> 5 <script type="application/javascript"> 6 function guan(){ 7 window.close("http://www.baidu.com","_black",""); 8 } 9 </script>
间隔执行
1 <body> 2 <input type="button" value="开始" onclick="start()"/> 3 <input type="button" value="停止" onclick="end()"/> 4 </body> 5 <script type="application/javascript"> 6 function show(){ 7 alert("hello"); 8 } 9 var id; 10 function start(){ 11 id=window.setInterval("show()",1000);; 12 } 13 function end(){ 14 window.clearInterval(id); 15 } 16 </script>
延迟执行
1 <script type="application/javascript"> 2 window.setTimeout("show()",1000); 3 function show(){ 4 alert("hello"); 5 } 6 </script>
页面重定向
1 <body> 2 <input type="button" value="开始" onclick="start()"/> 3 </body> 4 <script type="application/javascript"> 5 function start(){ 6 window.location.href="http//:www.baidu.com"; 7 } 8 </script>
二、document对象
1.找到元素
根据id找元素，只能找一个。
1 <body> 2 <div id="test"></div> 3 </body> 4 <script type="application/javascript"> 5 var a=document.getElementById("test"); 6 alert(a); 7 </script>
根据class名找元素，可找到多个，返回数组。
1 <body> 2 <div id="test"></div> 3 <div class="test"></div> 4 <span class="test"></span> 5 </body> 6 <script type="application/javascript"> 7 var a=document.getElementsByClassName("test"); 8 alert(a[0]); 9 </script>
根据标签名找到多个，返回数组。
1 <body> 2 <div id="test"></div> 3 <div class="test"></div> 4 <span class="test"></span> 5 </body> 6 <script type="application/javascript"> 7 var a=document.getElementsByTagName("div"); 8 alert(a[0]); 9 </script>
根据name找，主要针对表单元素。
1 <body> 2 <input type="test" name="uid"/> 3 </body> 4 <script type="application/javascript"> 5 var a=document.getElementsByName("uid"); 6 alert(a[0]); 7 </script>
找子元素
1 <body> 2 <div id="test"> //空格也算文本 3 <div></div> 4 <span></span> 5 </div> 6 </body> 7 <script type="application/javascript"> 8 var a=document.getElementsById("test"); 9 alert(a.childNodes[0]); 10 </script>
找父级元素
1 <body> 2 <div id="test"> 3 <div></div> 4 <span></span> 5 </div> 6 </body> 7 <script type="application/javascript"> 8 var a=document.getElementsById("test"); 9 alert(a.parentNode); 10 </script>
找上面的同级元素
1 <body> 2 <div id="test"> 3 <div></div> 4 <span></span> 5 </div> 6 </body> 7 <script type="application/javascript"> 8 var a=document.getElementsById("test"); 9 alert(a.previousSibling); 10 </script>
找下面的同级元素
1 <body> 2 <div id="test"> 3 <div></div> 4 <span></span> 5 </div> 6 </body> 7 <script type="application/javascript"> 8 var a=document.getElementsById("test"); 9 alert(a.nextSibling); 10 </script>
2.控制元素
移除id这个元素，源代码不会变
1 <body> 2 <div id="test"> 3 <div></div> 4 <span></span> 5 </div> 6 </body> 7 <script type="application/javascript"> 8 var a=document.getElementsById("test"); 9 a.remove(); 10 </script>
添加一个span标签
1 <body> 2 <div id="test"> 3 <div></div> 4 5 </div> 6 </body> 7 <script type="application/javascript"> 8 var s=document.createElement("span"); 9 a.appendChild(s); 10 </script>
3.操作内容
取元素的文本内容
1 <body> 2 <div id="test">hello</div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 alert(a.innerText); 7 </script>
给元素赋文本值
1 <body> 2 <div id="test"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 a.innerText ="world"; 7 </script>
取HTML代码内容
1 <body> 2 <div id="test"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 alert(a.innerHTML); 7 </script>
给元素加代码
1 <body> 2 <div id="test"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 a.innerHTML="<b>加粗</b>"; 7 </script>
给元素赋值
1 <body> 2 <input type="text" name="uid" id="uid"/> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("uid"); 6 a.value="用户名"; 7 </script>
取值
1 <body> 2 <input type="text" name="uid" id="uid" value="hello"/> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("uid"); 6 alert(a.value); 7 </script>
4.操作属性
添加属性
1 <body> 2 <div id="text"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 a.setAttribute("bs","100"); 7 </script>
获取、移除属性
1 <body> 2 <div id="text"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 a.setAttribute("bs","100"); 7 alert(a.getAttribute("bs"));
8 a.removeAttribute("bs"); 9 </script>
5.操作样式
设置样式
1 <body> 2 <div id="text"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 a.style.backgroundColor="red"; 7 </script>
获取、移除样式
1 <body> 2 <div id="text" width="200"></div> 3 </body> 4 <script type="application/javascript"> 5 var s=document.getElementById("text"); 6 alert(a.style.width);
7 a.style.width=""; 8 </script>
关于鼠标的事件
onclick 鼠标单击触发
ondblclick 鼠标双击触发
onmouseover 鼠标移上去触发
onmouseout 鼠标离开触发
onmousemove 鼠标移动触发
关于键盘的事件
onkeydown 按键按下触发
onkeyup 按键抬起触发
onkeypress 按键触发
关于表单事件
onfocus 获得焦点触发
onblur 失去焦点触发，输入一个东西，出来提示该用户名不可用
onchange 内容改变触发，下拉列表里，前面选好后，后面触发
