JavaScript---BOM模型之window对象，DOM模型的节点获取
2017-05-08 13:28
881 查看
javaScipt学习的第七天，
简单的描述一下本篇要学习的知识点：
BOM模型中window对象中部分方法学习演示。
BOM模型中window对象中部分事件学习演示
DOM模型中的节点获取
返回值 true/false ,弹出一个包含两个按钮（确定/取消）的确定对话框
moveBy(x1,y1)方法
:把窗口相对于当前位置移动 — 相对移动
结果就不演示了，因为我发现很多浏览器好像没有用耶！
moveTo方法
:把窗口移动到某一位置— 绝对移动
setTimeout(参数1，参数2）方法：
:参数一为函数指针或者代码，参数二为毫秒数。经过参数二毫秒数后，执行参数一代码，或者函数指针所引导的函数。且只会执行一次
经过3秒后自然会弹出对话框
setInterval(参数1，参数2）方法：
:参数一为函数指针或者代码，参数二为毫秒数。经过参数二毫秒数后，执行参数一代码，或者函数指针所引导的函数。会一直执行
结果和上面类似，但是会一直弹，就和闹钟一直每次到这个时候就“闹”
clearTimeout( setTimeoutID )
clearInterval ( setIntervalID )
两个用来清除前面定时器的方法，参数是给定时器设置的ID
接下来是前面几个知识点的HTML代码，
onload: 浏览器完成整个页面加载时，就会触发。
onblur: 浏览器中，从获得焦点到失去焦点时触发
onfocus:在浏览器中，从失去焦点到获得焦点时触发
onbeforeunload: 当窗口将要关闭时，就会触发。
innrText:
纯文本格式输入页面（不会去解析）
innrHTML:
将内容写入页面会解析
演示代码
简单的描述一下本篇要学习的知识点：
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- 32-JavaScript-DOM-BOM简介-node常用方法和属性-window对象常用方法
- JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素
- 文档对象模型DOM（获取元素节点、设置节点属性）
- JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
- Javascript BOM即浏览器对象模型Brower Object Model（Window、Navigator、Screen、History、Location、弹出框、计时器）
- js的DOM（文档对象模型）获取节点
- javascript学习六~BOM和DOM简介，window，screen，navigator，location，history，节点增删改查
- JavaScript之DOM-6 BOM概述 、Window对象(Window对象概述、窗口与对话框、定时器)
- JavaScript Window -浏览器对象模型（BOM）
- 第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式
- JavaScript window对象 - 浏览器对象模型(BOM),使 JavaScript 有能力与浏览器“对话”
- DOM(文档对象模型)--1获取节点、节点的增删改
- JavaScript语言基础---(十四)DOM模型演示---通过document获取页面节点
- JAvaScript和DOM（文档对象模型）和BOM（浏览器对象模型）
- Javascript之BOM(window对象)
- BOM__Document对象简介-三种获取节点方式，通过节点层次关系获取节点，以及对象中的属性操作