JavaScript---BOM模型之window对象，DOM模型的节点获取
来源：互联网 发布：淘宝服装挂拍技巧 编辑：程序博客网 时间：2024/06/05 05:31
javaScipt学习的第七天，
简单的描述一下本篇要学习的知识点：
- BOM模型中window对象中部分方法学习演示。
- BOM模型中window对象中部分事件学习演示
- DOM模型中的节点获取
BOM模型中window对象中部分方法学习演示。
confirm方法：
返回值 true/false ,弹出一个包含两个按钮（确定/取消）的确定对话框
<body> <input type="button" value="演示confirm方法按钮" onclick="demo1()"> <br/> <script type="text/javascript"> function demo1(){ var boo=window.confirm("演示confirm方法对话框"); alert( "接收confirm方法的返回值:"+boo); } </script </body>
moveBy(x1,y1)方法
:把窗口相对于当前位置移动 — 相对移动
<body> <input type="button" value="演示confirm方法按钮" onclick="demo1()"> <br/> <input type="button" value="演示moveBy方法按钮" onclick="demo2()"> <br/> <script type="text/javascript"> function demo1(){ var boo=window.confirm("演示confirm方法对话框"); alert( "接收confirm方法的返回值:"+boo); } function demo2(){ moveBy(10,10);//把当前窗口的位置相对移动(10,10) alert("dem02") // moveTo(120,210);//把当前窗口的位置移至位置:(120,210) } </script> </body>结果就不演示了，因为我发现很多浏览器好像没有用耶！
moveTo方法
:把窗口移动到某一位置— 绝对移动
<body> <input type="button" value="演示moveTo方法按钮" onclick="demo3()"> <br/> <script type="text/javascript"> function demo3(){ moveTo(120,210);//把当前窗口的位置移至位置:(120,210) } </script>setTimeout(参数1，参数2）方法：
:参数一为函数指针或者代码，参数二为毫秒数。经过参数二毫秒数后，执行参数一代码，或者函数指针所引导的函数。且只会执行一次
<body> <input type="button" value="演示setTimeout方法按钮" onclick="demo4()"> <br/> <script type="text/javascript"> function demo4(){ setTimeout("alert('时间到!');",3000);//3秒之后会执行第一个参数中的代码即alert(),,,只执行一次 } </script> </body>经过3秒后自然会弹出对话框 
setInterval(参数1，参数2）方法：
:参数一为函数指针或者代码，参数二为毫秒数。经过参数二毫秒数后，执行参数一代码，或者函数指针所引导的函数。会一直执行
<body> <input type="button" value="setInterval方法" onclick="demo()"> <br/> <script type="text/javascript"> function demo(){ setInterval("alert('时间到!');",1000);//1秒之后会执行第一个参数中的代码即alert(),,,只执行一次 } </script>结果和上面类似，但是会一直弹，就和闹钟一直每次到这个时候就“闹”
clearTimeout( setTimeoutID )
clearInterval ( setIntervalID )
两个用来清除前面定时器的方法，参数是给定时器设置的ID
function demo(){ var setIntervalID=setInterval("alert('时间到!');",1000);//1秒之后会执行第一个参数中的代码即alert(),,,只执行一次 var setTimeoutID=setTimeout("alert('时间到!');",1000);//1秒之后会执行第一个参数中的代码即alert(),,,只执行一次 clearTimeout(setTimeoutID); clearInterval(setTimeoutID); }接下来是前面几个知识点的HTML代码，
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>BOM模型演示</title> </head> <body> <input type="button" value="演示window中的方法" onclick=" demo1();"> <br /> <input type="button" value="演示window中的方法2" onclick=" demo2();"> <br /> <input type="button" value="演示window中的方法3---定时器" onclick=" demo3();"> <br /> <input type="button" value="演示window中的方法4---定时器2" onclick=" demo4();"> <br /> <script type="text/javascript"> function println(str){ document.write(str+"<br/>"); } function demo1(){ //close();//关闭窗口 window.close(); window.alert("aa"); var boo = window.confirm("你真的想关闭窗口??"); //println(boo);1 if(boo){ window.close(); } } function demo2(){ //moveBy(10,10);//把当前窗口的位置相对移动(10,10) moveTo(120,210);//把当前窗口的位置移至位置:(120,210) } //创建定时器 function demo3(){ window.resizeTo(20,20); // setTimeout("alert('时间到!');",3000);//3秒之后会执行第一个参数中的代码即alert(),,,只执行一次 setInterval(aa,50);//每隔50毫秒,会执行第一个参数中给定的函数,,,执行多次 } var isFirst=true; function aa(){ //println("hello定时器..."); if(isFirst){ moveBy(10,10); resizeBy(10,10); }else{ moveBy(-20,-20); resizeBy(-10,-10); } if(window.screenTop>window.screen.height || window.screenTop<10 ){ isFirst=!isFirst; } } //清除定时器 var idTimer,i=0; function demo4(){ window.resizeTo(20,20); //idTimer = setTimeout("alert('时间到!');",3000);//3秒之后会执行第一个参数中的代码即alert(),,,只执行一次 idTimer = setInterval(aa,50);//每隔50毫秒,会执行第一个参数中给定的函数,,,执行多次 } // 一个让窗口到处乱移动的函数 var isFirst=true; function aa(){ i++; if(i==200){ //clearTimeout(idTimer); clearInterval(idTimer); } if(isFirst){ moveBy(10,10); resizeBy(10,10); }else{ moveBy(-10,-10); resizeBy(-10,-10); } if(window.screenTop>window.screen.height || window.screenTop<10 ){ isFirst=!isFirst; } } </script> <hr/> <input type="button" value="演示window中的方法5---打开窗口" onclick="demo5();"> <br /> <script type="text/javascript"> var oNewWindow; function demo5(){ oNewWindow = open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no,titlebar=no"); } </script> </body></html>BOM模型中window对象中部分事件学习演示
事件
- onload: 浏览器完成整个页面加载时，就会触发。
- onblur: 浏览器中，从获得焦点到失去焦点时触发
- onfocus:在浏览器中，从失去焦点到获得焦点时触发
- onbeforeunload: 当窗口将要关闭时，就会触发。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>BOM模型演示</title> </head> <body> <input type="button" value="演示window中的方法" onclick=" demo1();"> <br /> <script type="text/javascript"> //该事件在整个页面加载完毕之后会激活 onload=function(){ alert("窗口加载完毕....."); }; onblur=function(){//获得焦点状态 变成 失去焦点状态 时 alert("失去焦点了....."); }; onfocus=function(){//失去焦点状态 变成 获得焦点状态 时 alert("获得焦点了....."); }; //窗口将要关闭时// onbeforeunload=function(){// var boo = confirm("你确认要关闭吗?");// if(!boo){// //下面这句，如果浏览器中存在一个其它页面，下面的新开窗口有效，否则无效// open("2_bom_window_event.html","_blank");// }// //alert("窗口马上要关闭了...做数据备份或其它善后处理...");// } </script> <hr/> <script type="text/javascript"> //alert("aaaa"); </script> </body></html>DOM模型中的节点获取
前面我们知道DOM模型可以把HTML网页封装是树，里面的标签、属性、文本都是树的节点，对于节点我们如何获取，以及节点有哪些属性呢？
innrText:
纯文本格式输入页面（不会去解析）
innrHTML:
将内容写入页面会解析
演示代码
oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出，不会解析oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示
//文本内容中innerText和innerHTML的对比 function demo4(){ var oDivElement = document.getElementById("div2"); var text = oDivElement.innerText; alert(text); //纯文本: 湖南城市学院 var html = oDivElement.innerHTML; alert(html);//整个HTML内容: <font color="red">湖南城市学院</font> //写 oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出，不会解析 alert("暂停一下..."); oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示 } //页面文档对象中的任意组成部分都是一个节点 //元素(Element):标签 节点(Node):标签、属性、文本内容 //所有节点(Node)都有3个属性:nodeName、nodeType、nodeValue /* 1.nodeName: 标签为标签名，属性为属性名， 文本内容为"#text" 2.nodeType: 标签为1，属性为2，文本内容为3 3.nodeValue： 标签为null, 属性为属性值， 文本内容为纯文字 */<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DOM模型演示---通过document获取页面节点</title> </head> <body> <input type="button" value="演示节点的3个属性1" onclick=" demo1();"> <br /> <input type="button" value="演示节点的3个属性2" onclick=" demo2();"> <br /> <input type="button" value="演示节点的3个属性3" onclick=" demo3();"> <br /> <input type="button" value="演示文本内容中innerText和innerHTML的对比" onclick=" demo4();"> <br /> <div id="div1">湖南城市学院</div> <div id="div2"> <font color="red">湖南城市学院</font></div> <script type="text/javascript"> //标签对象的3个属性 function demo1(){ var oDivElement = document.getElementById("div1"); alert("nodeName:"+oDivElement.nodeName);//DIV alert("nodeType:"+oDivElement.nodeType);//1 alert("nodeValue:"+oDivElement.nodeValue);//null } //属性对象(oAttribute)的3个属性 function demo2(){ var oDivElement = document.getElementById("div1"); var oAttr = oDivElement.getAttributeNode("id"); alert("nodeName:"+oAttr.nodeName);//id alert("nodeType:"+oAttr.nodeType);//2 alert("nodeValue:"+oAttr.nodeValue);//div1 } //文本内容对象的3个属性 function demo3(){ var oDivElement = document.getElementById("div1"); var oInnerContent = oDivElement.childNodes[0]; alert("nodeName:"+oInnerContent.nodeName);//#text alert("nodeType:"+oInnerContent.nodeType);//3 alert("nodeValue:"+oInnerContent.nodeValue);//湖南城市学院 } //文本内容中innerText和innerHTML的对比 function demo4(){ var oDivElement = document.getElementById("div2"); /*读 var text = oDivElement.innerText; alert(text); //纯文本: 湖南城市学院 var html = oDivElement.innerHTML; alert(html);//整个HTML内容: <font color="red">湖南城市学院</font> */ //写 oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出，不会解析 alert("暂停一下..."); oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示 } </script> </body></html> 1 0
- JavaScript---BOM模型之window对象，DOM模型的节点获取
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- JavaScript---DOM技术、BOM模型演示、window对象
- JavaScript Window -浏览器对象模型（BOM）
- 浏览器对象模型BOM之window对象
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- js的DOM（文档对象模型）获取节点
- JavaScript之BOM（浏览器对象模型）
- JavaScript之 ------ 浏览器对象模型 （BOM）
- javascript之BOM浏览器对象模型引入
- JavaScript的浏览器对象模型BOM
- JavaScript的组成--BOM浏览器对象模型
- JavaScript BOM浏览器对象模型
- javascript BOM 浏览器对象模型
- JavaScript：BOM(浏览器对象模型)
- JAvaScript和DOM（文档对象模型）和BOM（浏览器对象模型）
- DOM(文档对象模型)--1获取节点、节点的增删改
- JavaScript之 ------ 文档对象模型(DOM)
- Linux系统unzip解压后中文名乱码解决方法
- 线段树初步__ZERO__.
- Android保存图片到系统图库
- 归并排序（Merge Sort）递归、非递归 Java实现
- Web服务器使用JSP来创建网页的步骤
- JavaScript---BOM模型之window对象，DOM模型的节点获取
- CCTC 2017开幕在即，全部讲师和议程公布
- Redis作为缓存自我总结
- 推荐系统概述4
- 多版本通讯录
- mybatis核心组件
- Quake4之GUI(2)
- java中string和int互相转化
- 图片自适应
