在IE下,使用 document.documentElement.clientWidth 来代替 window.innerWidth
innerHeight:指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。
在IE下,使用 document.documentElement.clientHeight 来代替 window.innerHeight
document.documentElement 就是<html>标记对象
document.body 就是 <body>标记对象
----------------------------------------------------------------------------
window对象方法
alert():弹出一个警告对话框。
prompt():弹出一个输入对话框。
confirm():弹出一个确认对话框。如果单击“确定按钮”返回true,如果单击“取消”返回false。
close():关闭窗口
print():打印窗口
----------------------------------------------------------------------------
open()方法
功能:打开一个新的浏览器窗口。
语法:var winObj = window.open([url][,name][,options]);
说明:参数可有可无。如果没有指定参数,则打开一个选项卡式的窗口(大小是最大大化)。
参数:
url:准备在新窗口中显示哪个文件。url可以为空字符串,表示显示一个空的页面。
name:新窗口的名字,该名字给<a>标记的target属性来用。
options:窗口的规格。
width:新窗口的宽度
height:新窗口的高度
left:新窗口距离屏幕左边的距离
top:新窗口距离屏幕上边的距离
menubar:是否显示菜单栏,取值:yes、no
toolbar:是否显示工具栏。
location:是否显示地址栏。
status:是否显示状态栏。
scrollbars:是否显示滚动条,不能省略s字母。
返回值:返回一个window对象的变量,可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

onload事件:当网页加载完成,指<body>标记的所有内容全部加载完成,才触发该事件(条件)。通过onload事件属性,去调用JS的函数。onload属性只有<body>标记才有。
onclick事件:当单击时,去调用JS代码。所有HTML标记都具有该事件属性。
----------------------------------------------------------------------------
延时器方法——setTimeout()
setTimeout()
功能:设置一个延时器,换句话说:时间一到,就执行JS代码一次。
语法:var timer = window.setTimeout(code,millisec)
参数:
code:是任何合法的JS代码,一般情况下是JS函数。该函数要放在引号中。
 举例:window.setTimeout(“close()” , 2000)
 举例:window.setTimeout(init, 2000); //传函数地址,因此不需要加括号。如果加括号,是将函数的执行结果传到方法中。
 millisec:毫秒值。1秒=1000毫秒
返回值:返回一个延时器的id变量,这个id变量给clearTimeout()用来清除。
----------------------------------------------------------------------------
clearTimeout()
功能:清除延时器id变量
语法:window.clearTimeout(timer)
参数:timer就是由setTimeout()设置的延时器的id变量。
----------------------------------------------------------------------------
定时器方法
setInterval()
功能:设置一个定时器。定时器,重复不断的执行JS代码(周期性)。
语法: var timer = window.setInterval(code , millisec)
参数:
code:是任何合法的JS代码,一般情况下是JS函数。该函数要放在引号中。
 举例:window.setInterval(“init()” , 2000)
 举例:window.setInterval(init, 2000); //传函数地址,因此不需要加括号。如果加括号,是将函数的执行结果传到方法中。
 millisec:毫秒值。1秒=1000毫秒
返回值:返回一个定时器的id变量,这个id变量给clearInterval()用来清除。
clearInterval()
功能:清除定时器id变量
语法:window.clearInterval(timer)
参数:timer就是由setInterval()设置的定时器的id变量。
----------------------------------------------------------------------------
screen屏幕对象
Width:屏幕的宽度,只读属性。
Height:屏幕的高度,只读属性。
availWidth:屏幕的有效宽度,不含任务栏。只读属性。
availHeight:屏幕的有效高度,不含任务栏。只读属性。
----------------------------------------------------------------------------
navigator对象
appName:浏览器软件名称,主要用来判断客户使用的是什么核心的浏览器。
 如果是IE浏览器的话,返回值为:Microsoft Internet Explorer
 如果是Firefox浏览器的话,返回值为:Netscape
appVersion:浏览器软件的核心版本号。
systemLanguage:系统语言
userLanguage:用户语言
platform:平台
----------------------------------------------------------------------------
Location地址栏对象
href:获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
host:主机名
hostname:主机名
pathname:文件路径及文件名
search:查询字符串。
protocol:协议,如:http://、ftp://
hash:锚点名称。如:#top
reload([true]):刷新网页。true参数表示强制刷新
注意:所有的属性,重新赋值后,网页将自动刷新。
<meta http-equiv = “refresh” content = “5;url=http://www.sina.com.cn” />
----------------------------------------------------------------------------
history对象
length:历史记录的个数
go(n):同时可以实现“前进”和“后退。”
i.history.go(0) 刷新网页
ii.history.go(-1) 后退
iii.history.go(1) 前进一步
iv.history.go(3) 前进三步
forward():相当于浏览器的“前进”按钮
back():相当于浏览器的“后退”按钮
----------------------------------------------------------------------------
DOM的分类
核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法。
HTML DOM:针对HTML文档提供的专用的属性方法。
XML DOM:针对XML文档提供的专用的属性和方法。(就业班讲)
CSS DOM:提供了操作CSS的属性和方法。
Event DOM:事件对象模型。如:onclick、 onload等。
----------------------------------------------------------------------------
核心DOM中的公共的属性和方法
提示:核心DOM中查找节点(标记),都是从根节点开始的(html节点)。
1、节点访问
nodeName:节点名称。
nodeValue:节点的值。只有文本节点才有值,元素节点没有值。nodeValue的值只能是“纯文本”,不能含有任何的HTML标记或CSS属性。
firstChild:第1个子节点。
lastChild:最后1个子节点。
childNodes:子节点列表,是一个数组。
parentNode:父节点。
----------------------------------------------------------------------------
查找<html>标记的方法
document.firstChild
document.documentElement
查找<body>标记的方法
document.firstChild.lastChild
document.body

为什么,document.body.firstChild 找不到<table>节点?
核心DOM的属性和方法,主要是针对HTML4.0开发的。
在Firefox下,会把空格或换行,当成文本节点。
HTML4.0是有没有DTD类型定义的。
----------------------------------------------------------------------------
2、对节点的属性操作
setAttribute(name,value):给某个节点添加一个属性。
getAttribute(name):获取某个节点属性的值。
removeAttribute(name):删除某个节点的属性。
----------------------------------------------------------------------------
3、节点的创建
document.createElement(tagName):创建一个指定的HTML标记,一个节点
tagName:是指不带尖括号的HTML标记名称。
举例:var imgObj = document.createElement(“img”)
parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下。
parentNode代表父节点,父节点必须存在。
childNode代表子节点。
举例:document.body.appendChild(imgObj)
parentNode.removeChild(childNode):删除某个父节点下的子节点。
parentNode代表父节点。
childNode代表要删除的子节点。
举例:document.body.removeChild(imgObj)
----------------------------------------------------------------------------
HTML DOM访问
HTML元素的方法(最常用)
1、getElementById()
功能:查找网页中指定id的元素对象。
语法:var obj = document.getElementById(id)
参数:id是指网页中标记的id属性的值。
返回值:返回一个元素对象。
举例:var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
功能:查找指定的HTML标记,返回一个数组。
语法:var arrObj = parentNode.getElementsByTagName(tagName)
参数:tagName是要查找的标记名称,不带尖括号。
返回值:返回一个数组。如果只有一个节点,也返回一个数组。
举例:var arrObj = ulObj.getElementsByTagName(“li”)
----------------------------------------------------------------------------
元素对象的属性
tagName:标签名称,与核心DOM中nodeName一样。
className:CSS类的样式。
id:同HTML标记id属性一样。
title:同HTML标记的title属性一样。
style:同HTML标记的style属性一样。
innerHTML:包含HTML标记中的所有的内容,包括HTML标记等。
offsetWidth:元素对象的可见宽度,不带px单位。
offsetHeight:元素对象的可见高度,不带px单位。
scrollWidth:元素对象的总宽度,包括滚动条中的内容,不带px单位。
scrollHeight:元素对象的总高度,包括滚动条中的内容,不带px单位。
scrollTop:指内容向上滚动上去了多少距离(有滚动条时才有效),默认值为0
scrollLeft:指内容向左滚动过去了多少距离(有滚动条时才有效)。
onscroll:当拖动滚动条时,调用JS函数。
----------------------------------------------------------------------------

Prev | Next
Pg.: 1 2 3 4 5 6 7


Back to home | File page

Subscribe | Register | Login | N