DOM编程之:对象、事件(document、window、location、history、窗体弹出)
一、对象
1. doucment文档对象
(1). getElementById() //按元素的ID来访问
(2). getElementsByName() //按元素的name名称来访问(返回集合,因为同名的元素可能有多个)
(3). getElementsByTagName() //按标签名来访问(返回集合,因为同名的元素可能有多个)
(4). write()
2. window窗体对象
1.什么是window 对象?
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
2.window 对象常用属性:
screen: 有关客户端的屏幕和显示性能的信息
history: 有关客户访问过的URL的信息
location: 有关当前URL的信息
3.window 对象常用方法:
prompt: 显示可提示用户输入的对话框
alert: 显示带有提示信息和确定按钮的对话框
confirm: 显示一个带有提示信息、确定和取消的对话框
close: 关闭浏览窗口 //window.close();
open: 打开一个新的浏览器窗口,加载给定的URL地址 //window.open("1.html");
setTimeout: 在指定的毫秒数后调用函数或计算表达式
setInterval: 按照指定的周期来调用函数或表达式
4.Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
(1).对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
(2).对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
(3).实用的 JavaScript 方案(涵盖所有浏览器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
3. Screen对象
window.screen 对象包含有关用户屏幕的信息。
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
4. location对象
用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
5. history对象
window.history 对象包含浏览器的历史。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.back() 方法加载历史列表中的前一个 URL。
history forward() 方法加载历史列表中的下一个 URL。
6.navigator 对象
window.navigator 对象包含有关访问者浏览器的信息。
来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
navigator 数据可被浏览器使用者更改
二、事件
1.常用事件
onClick() 单击事件:用户单击鼠标按键时产生的事件,同时。onClick指定的事件处理程序或代码将被调用执行。
onChange() 改变事件:当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
onSelect() 选中事件:当text或textarea对象中的文字被选中时会引发该事件。如:
<ipnut type="text" value="默认信息”onselect="alert('您选中T文本框中的文字')">
onfocus() 获得焦点事件:用户单击text或textarea以及select对象,即光标落在文本框或选择框时会产生该事件。如:<select name="zhengjian" onfocus="alert('我是焦点')">
onblur() 失去焦点事件:失去焦点事件正好与获得焦点事件相对,当text或textarea以及select对象不再拥有焦点而退出后台时,引发该事件。<select name="zhengjian" onblur="alert('我失去焦点')">
onload() 载入文件事件:当页面文件载人时产生该事件。onload的一个作用就是在首次载入一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在<body>标记中。如:<body onload="alert('正在加载页面,请等待一')">window.onload = mya; //mya为函数名
onunload() 卸载文件事件:与载入文件事件onload()正好相反,当Web页面退出时引发的事件,并可更新Cookie的状态。如:<body onunload="confirm('你确定要离开本页?')">
onmouseover() 鼠标覆盖事件:是当鼠标位于元素上方时所引发的事件。如:<input type="boutton" value="按钮" onmouseover="window.status='请您注意下面的状态栏';return true">
onmouseout() 鼠标离开事件:是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果。
onmousedown() 鼠标按下(未释放)事件
onmouseup() 鼠标释放事件
ondbclick() 鼠标双击事件
onkeydown() 当键盘上某个键被按下时触发的事件。
onkeypress() 当键盘上的某个键被按下并且释放时触发的事件。
onkeyup() 当键盘上某个键被放开时触发的事件。
2.页面相关事件
onabort() 图片在下载时被用户中断时触发的事件。
onbeforeunload()当前页面的内容将要被改变时触发的事件。
onerror() 在加载文档或图像时发生错误。
onresize() 窗口或框架被重新调整大小。
如果大家想浏览我的下一篇文章,请留言
此文章属于原创,不准随意转载:https://blog.csdn.net/LYQ2332826438