首页 > 代码库 > dom
dom
1.对话窗口
(1)警告对话框
alert(‘error‘);
(2)确认对话框
confirm(‘please cofirm this message‘);//返回true或false
(3)提示对话框
var v= prompt(‘what say you ?‘,123);//第一个参数提示信息;第二个参数可选,作为默认值;
2.
当前窗口在屏幕上的位置:
window.screenX ;
window.screenY ;
屏幕属性:
window.screen.height;//返回屏幕高度,像素为单位
window.screen.width;//返回屏幕宽度,像素为单位
window.screen.availHeight;//返回可用像素
3.浏览器历史 ->>> window.history属性
3个实用方法:
back();//和用户单击后退(Back)按钮一样
forward();//和用户单击前进(Forward)按钮一样
go( num);//前往历史中的特定地点,如:num =1时,等价于forward();num=-1时,等价于back();num=2时,表示调用两次back();
4.重定向浏览器
window.location.href=http://www.mamicode.com/‘http://www.baidu.com‘;//修改localtion的href的值;前一个页面,会出现在浏览器历史中,可以使用后退按钮访问。
window.location.replace(‘http://www.baidu.com‘);//新的位置代替当前位置。
window.home();//重定位到浏览器的用户主页
5. DOM使用
(1)html文档节点-->>>每个节点都有提供自身信息的文本属性:
nodeName //节点名称 ;对于Html元素来说,nodeName全是大写的HTML标记;对于文本节点,nodeNmae则是#text;对于document节点,nodeName是#document
nodeValue //节点值
nodeType //节点类型 ; nodeType值为一个数字:对于HTML元素是1, 文本是2, 注释是8, 文档是9。
(2)在javascript中,document.documentElement表示html文档的根节点;
document.body;//引用Html主体
document.forms;//是页面中所有表单的数组。document.forms[0]或document.forms[‘formName‘]引用某一表单
document.images;//是页面中所有图像的数组。document.images[0]或document.images[‘imgName‘]引用某一图片
document.links;//是页面中所有的链接的数组。document.links[0]或document.links[‘imgName‘]引用某一链接
document.getElementById(id);//通过id找到某一元素,如果没找到返回null;
document.getElementsByTagName( Tagname);//找到特定类型的所有元素,返回选择元素的一个类数组列表(注意方法名称复数形式Elements)
//var hLinks=header. document.getElementsByTagName(‘a‘);//扎到页面首部(header)内的所有链接
(3)为了在javascript中使用css选择符,可以调用querySelector( arg)或去querySelectorAll(arg),前者最多返回一个元素(第一个符合条件的元素)
①获得浏览器元素的引用之后,可以通过style属性获得当前元素CSS样式(style属性对于height,width,background等各种样式有单独的属性):
如: var e=docuemnt.getElementById(id);
e.style.fontSize=‘10em‘;//单位不能省略
e.style.color=‘red‘;
注意:style属性所赋的值被当作‘内联样式’,她将优先于其他地方定义的样式。即它反映的只是内嵌的样式,而不是所有使用的样式
②IE --->> currentStyle属性,找到所有使用的样式
var info=currentStyle.fontSize;
③不支持currentStyle属性的浏览器 -->>> window.getComputedStyle(arg);//方法
//参数arg是对元素的引用,返回值可以当成关联数组或者对象来处理;
如:var elementStyle=window.getComputedStyle(elem);
elementStyle[‘display‘];//内联
elementStyle.display;//内联
这种方式只能读取样式,不能修改样式,而且返回值的大小带有单位。
(4)创建元素
document.createElement(arg);//创建指定类型的html元素;
如:
var p=document.createElement(‘p‘);
p.innerText=‘this is some test‘;
p.className=‘enhanced‘;//引用css类,使用className
document.createTextNode(text);//为页面添加文本
6.Cookie
javascript中的cookie通过document对象的cookie属性访问
document.cookie=value;//创建cookie
cookie值使用特定语法:cookieName=cookieValue;多个值之间添加分号
如:document.cookie=‘fontSize=14px‘;//发送此语句,cookie将使用默认的到期时间、路径,和域。
可以修改cookie的值,document.cookie=‘fontSize=14px;expires‘
+Date.now()+1000*10
+‘;path=/subdirectory;domain=*.exemplecom.com‘;
读取cookie:
多个cookie使用分号分隔,所以为读取每个cookie,必须先拆解字符串
var cookies=document.cookie.split(‘;‘);
for (var i=0;count=cookie.length; i<count;i++;){
//cookie[i] will be name=value.
}
删除cookie:
在javascript中删除cookie只需设置同名的cookie,不提供值,并将到期时间设置为过去的一个时刻即可。
7.定时器
(1)创建一次性定时器
setTimeout(fn,time);//第一个参数为要调用的函数,第二个为毫秒数。
(2)创建重复定时器
var interval=setInterval(fn,time);//在指定的时间间隔重复调用函数;
//有返回值interval,作为定时器标识符
clearInterval(interval);//停止定时器;以定时器标识符为参数;
dom