首页 > 代码库 > 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