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