本节讲Dom和Bom模型概念讲解(节点获取,window对象)。
out.js:
写了2个输出到页面的函数。
function println(param){
document.write(param+"<br/>");
}
function print(param){
document.write(param);
}window对象中的方式：
方法：
confirm ：
bConfirmed = window.confirm( [sMessage])
显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
setInterval ：
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])
每经过指定毫秒值后计算一个表达式。
setTimeout ：
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
经过指定毫秒值后计算一个表达式。
clearInterval:
window.clearInterval(iIntervalID)
使用 setInterval 方法取消先前开始的间隔事件。
navigate:
在当前窗口中装入指定 URL。
open:
打开新窗口并装入给定 URL 的文档。
moveBy:
将窗口的位置移动指定 x 和 y 偏移值。
moveTo:
将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
演示代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bom模型演示2---window对象中的方式</title>
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript">
//1. confirm方法
function methodDemo(){
//window. 可不写
var boo = window.confirm("真的要删除吗？");
alert(boo);
}
//2 setTimeout方法---只激活一次动作，setInterval方法
//---每隔设定的时间就激活一次动作
var timer1, timer2;
function methodDemo2(){
//setTimeout("alert('时间到...')",2000);//过3秒，执行:alert('时间到...')
//setTimeout("methodDemo()",3000);//过3秒，执行methodDemo()方法
//setTimeout(methodDemo,3000);//和上面那句一样的
timer1 = setInterval("alert('时间到...')", 3000);//每隔2秒，会执行一次：alert('时间到...')
timer2 = setInterval(methodDemo, 3000);//每隔2秒，会执行一次：alert('时间到...')
}
function timeStop1(){
clearInterval(timer1);
}
function timeStop2(){
clearInterval(timer2);
}
//3 moveBy---相对移动和moveTo方法---移动到
function moveWindow(){//--IE11.3支持，360 8.1不支持
//window.moveBy(10, 10);//“window.”可以省略
//moveBy(-10, -10);
//moveTo(40, 50);
//窗口抖动
for(var x=0;x<500;x++){
moveBy(15,0);
moveBy(0,15);
moveBy(-15,0);
moveBy(0,-15);
}
}
//4 open--打开窗口 close--关闭窗口
var timer3;
var aNewWindow;
function openWindow(){
aNewWindow = window.open("ad.html",null,"height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
aNewWindow.moveTo(100,200);
//timer3 = setTimeout(closeWin,3000);//这句实现的功能可以写在ad.html中
}
function closeWin(){
aNewWindow.close();
}
</script>
<input type="button" value="confirm方法" onclick="methodDemo()"/>
<input type="button" value="定时器-开始" onclick="methodDemo2()"/>
<input type="button" value="定时器1-停止" onClick="timeStop1()"/>
<input type="button" value="定时器2-停止" onClick="timeStop2()"/>
<br/>
<input type="button" value="移动窗口" onClick="moveWindow()" />
<input type="button" value="打开窗口" onClick="openWindow()" />
</body>
</html>ad.html:
<html>
<head>
<title>广而告之</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>特价大优惠!!!</h1>
<h2>走过路过，不要错过!!!</h2>
<h3>电器大赌场!!!</h3>
<h3>特价大优惠!!!</h3>
<script type="text/javascript">
//setTimeout("close()",3000);//绿色广告，3秒后自己关闭
</script>
<script type="text/javascript">
//垃圾广告，用户关闭之后，又打开
onunload = function(){
open("ad.html","_blank","height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
};
setInterval(focus,1000);// 如果当前窗口在后面 就每过1s---闪烁--IE11.3支持，360 8.1不支持
//setInterval("focus()",1000);
</script>
</body>
</html>
里面窗口抖动和那个关闭窗口继续弹窗口和setInterval(focus,1000);
IE11.3支持，360 8.1不支持
window对象中的事件
onload 在浏览器完成对象的装载后立即触发。
onbeforeunload 在页面将要被卸载前触发。
onunload 在对象卸载前立即触发。
演示代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bom模型演示3---window对象中的事件</title>
</head>
<script type="text/javascript">
//“window.”可以省略。onload事件是在浏览器解析完页面文档时触发，
//只有当该事件触发时才会调用它的事件处理方法
window.onload = function(){
//window.status="欢迎来到湖南城市学院...";//浏览器的状态栏-360浏览器8.1不支持 -IE11.3支持
//alert("2222...");
setInterval(horse, 500);
}
window.onunload=function(){//是浏览器关闭之后才触发的-360浏览器8.1不支持 -IE11.3支持
alert("ddddd...");//我们看不到
}
//是浏览器将要关闭之前触发的-360浏览器8.1不支持 -IE11.3支持
window.onbeforeunload = function(){
alert("kkkkk...");//我们看得到
}
var strs = ['欢', '迎', '来', '到', '湖', '南', '城', '市', '学', '院', ''];
var index = 0;
function horse(){
window.status = window.status + strs[index++];
if (index == strs.length) {
window.status = "";
index = 0;
}
}
</script>
<body>
<h1>湖南城市学院</h1>
<script type="text/javascript">
alert("1111...");
</script>
</body>
</body>
</html>
状态栏：（浏览器右下角位置） 
window对象中的document对象
/*
* ※※获取元素的3种方式：
* 1、getElementById(): 通过标签中的id属性值获来取该标签对象
* 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
* 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
※※所有节点(标签、属性、文本)都有3个属性：nodeName、nodeType、nodeValue
1、nodeName： 节点的名称
2、nodeType："标签"为1， "属性"为2，"文本"为3
3、nodeValue："标签"节点是没有值的即null，属性和文本节点是有值的
*/
演示代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dom模型演示1---window对象中的document对象</title>
</head>
<script type="text/javascript">
/*
* ※※获取元素的3种方式：
* 1、getElementById(): 通过标签中的id属性值获来取该标签对象
* 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
* 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
※※所有节点(标签、属性、文本)都有3个属性：nodeName、nodeType、nodeValue
1、nodeName： 节点的名称
2、nodeType："标签"为1， "属性"为2，"文本"为3
3、nodeValue："标签"节点是没有值的即null，属性和文本节点是有值的
*/
//1、getElementById(): 通过标签中的id属性值获来取该标签对象
function getElementDemo1(){
var divNode = document.getElementById("divId1");
alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
alert(divNode.innerText);//标签容器包含的文字
}
//2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
function getElementDemo2(){
var aNode = document.getElementsByName("userName");
alert(aNode);//Object，其实是一个数组※※※※
alert(aNode[0].nodeName+","+aNode[0].nodeType+","+aNode[0].nodeValue);
//注意，是编辑框元素，但它的nodeValue值仍是null，因为是标签节点。而如果要获取该编辑框中的内容，则采用如下方式:
alert(aNode[0].value);//其实是读取aNode[0]节点中的属性"value"的值
}
// 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
function getElementDemo3(){
var aNode = document.getElementsByTagName("input");
alert(aNode);//Object，其实是一个数组※※※※
alert(aNode[0].nodeName+","+aNode[0].nodeType+","+aNode[0].nodeValue);
}
</script>
<body>
<div id="divId1">
div区域1中的文字
</div>
<br/>
<input type="button" value="获取元素byId-1" onClick="getElementDemo1()">
姓名:<input type="text" name="userName"/>
<hr/>
<input type="button" value="获取元素byName-2" onClick="getElementDemo2()">
<input type="button" value="获取元素byTagName-3" onClick="getElementDemo3()">
</body>
</body>
</html>获取元素byName-2:
编辑框中的字符： 
Dom模型演示—节点获取方式的一个示例
演示代码：
<html>
<head>
<title>Dom模型演示2---节点获取方式的一个示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
onload = function(){
var divNode = document.getElementById("link1");
var aNodes = divNode.getElementsByTagName("a");//获取当前div元素下面的所有节点
for(var x=0;x<aNodes.length;x++){
aNodes[x].target="_blank";//新窗口打开
aNodes[x].innerHTML="<b><font color='red'>商品"+(x+1)+"</font></b>";
//aNodes[x].innerText="<b><font color='red'>商品"+(x+1)+"</font></b>";
//innerHTML 设置或获取位于对象起始和结束标签内的 HTML。( HTML格式)
//innerText 设置或获取位于对象起始和结束标签内的文本(文本格式)。
}
}
</script>
</head>
<body>
<h2>友情链接：</h2>
<a href="http://www.hncu.net">城院首页</a>
<a href="http://www.sina.com">新浪首页</a>
<br/>
<h2>特价商品:</h2>
<div id="link1">
<a href="a.html">水杯</a>
<a href="b.html">风扇</a>
<a href="c.html">鼠标</a>
<a href="d.html">背包</a>
</div>
</body>
</html>
a.html代码：
<html>
<head>
<title>水杯</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>特价水杯!!!</h1>
<h1>特价水杯!!!</h1>
<h1>特价水杯!!!</h1>
</body>
</html>
JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)的更多相关文章
-
JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解
这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...
-
Linux 网络编程的5种IO模型：多路复用(select/poll/epoll)
Linux 网络编程的5种IO模型:多路复用(select/poll/epoll) 背景 我们在上一讲 Linux 网络编程的5种IO模型:阻塞IO与非阻塞IO中,对于其中的 阻塞/非阻塞IO 进行了 ...
-
Linux 网络编程的5种IO模型：信号驱动IO模型
Linux 网络编程的5种IO模型:信号驱动IO模型 背景 上一讲 Linux 网络编程的5种IO模型:多路复用(select/poll/epoll) 我们讲解了多路复用等方面的知识,以及有关例程. ...
-
Linux 网络编程的5种IO模型：异步IO模型
Linux 网络编程的5种IO模型:异步IO模型 资料已经整理好,但是还有未竟之业:复习多路复用epoll 阅读例程, 异步IO 函数实现 背景 上一讲< Linux 网络编程的5种IO模型:信 ...
-
网络编程懒人入门(九)：通俗讲解，有了IP地址，为何还要用MAC地址？
1.前言 标题虽然是为了解释有了 IP 地址,为什么还要用 MAC 地址,但是本文的重点在于理解为什么要有 IP 这样的东西.本文对读者的定位是知道 MAC 地址是什么,IP 地址是什么. (本文同步 ...
-
javascript、ECMAScript、DOM、BOM关系
ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...
-
Javascript组成--ECMAScript，DOM，BOM
ECMAScript 部分 ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript; “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力”,即EC ...
-
网络编程第六讲Select模型
网络模型第六讲Select模型 一丶Select模型是什么 以前我们讲过一个迭代模型.就是只服务一个客户端连接.但是实际网络编程中.复杂的很多. 比如一个 C/S架构程序 (客户端/服务端) 客户端很 ...
-
JavaScript组成部分——ECMAScript、DOM、BOM、
1.JavaScript组成部分 虽然 JavaScript 和 ECMAScript 通常被人们用来表达相同的含义,但 JavaScript 的含义却比ECMA-262标准中规定的要多得多. 一个完 ...
随机推荐
-
1Z0-053 争议题目解析606
1Z0-053 争议题目解析606 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 606.Identify the channel settings that can be per ...
-
【POJ 3693】Maximum repetition substring 重复次数最多的连续重复子串
后缀数组的论文里的例题,论文里的题解并没有看懂,,, 求一个重复次数最多的连续重复子串,又因为要找最靠前的,所以扫的时候记录最大的重复次数为$ans$,扫完后再后从头暴力扫到尾找重复次数为$ans$的 ...
-
windows下更新python报错permission denied
注意退出所有python进程,可能是在使用中导致权限不足以删除
-
关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结
关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...
-
fzyzojP1635 -- 平均值
做法大概有两种: 1.二分平均值,每个值减去平均值,求有没有一个区间的总和大于等于0 (类比,中位数是二分之后,比mid大的为1,小的为0,看有没有区间大于等于0这样) 最值问题——判定问题 单调队列 ...
-
eShopOnContainers 看微服务④：Catalog Service
服务简介 Catalog service(目录服务)维护着所有产品信息,包括库存.价格.所以该微服务的核心业务为: 产品信息的维护 库存的更新 价格的维护 架构模式 先看代码结构(下图). 主要依赖: ...
-
SNF软件开发机器人-子系统-导出-导入功能-多人合作时这个功能经常用到
导出 导出可以将资源表和子系统导出并形成一个json文件. 1.效果展示: 2.使用说明: 点击导出按钮后会弹出一个导出页面.页面的左侧可以选择功能,右侧可以选择资源表,选择功能的同时右侧中功能所需的 ...
-
【大数据】SparkStreaming学习笔记
第1章 Spark Streaming概述 1.1 Spark Streaming是什么 Spark Streaming用于流式数据的处理.Spark Streaming支持的数据输入源很多,例如:K ...
-
CodeForces - 1017C The Phone Number
题面在这里! 一开始有一种构造猜想,可以把答案降到 sqrt(N) 级别. 考虑把 {1,2,...,n} 分成 sqrt(N) 段,每一段是连续的sqrt(N)个数.然后我们倒着把每一段数放上. 比 ...
-
c++ builder xe2 debug正常 release崩溃 解决一例
今天修改了以前一个项目的代码,是一个exe程序 C++ builder xe2 编译.以前都是好的.今天改了一下版本号 编译了一下,居然不能用了.直接崩溃 提示内存非法访问.而且显然还没有进入Win ...