JavaScript中的定时器,JavaScript中的DOM节点,获取元素的样式

1.window对象

window对象是ECMAScript中定义的浏览器端的全局对象

global是服务器端的全局对象

页面中定义的全局变量和函数,都会成为window对象的属性和方法

2. 定时器

2.1setTimeout定时器

setTimeout(function(){
    //要执行的代码
},5000)
这个定时器的含义是指,执行到这行代码时,等5s后将参数一的代码加入到队列中去,然后等到js引擎一有空就立马执行

参数一,执行的函数,参数二,时间(毫秒为单位)

这种定时器只会执行一次

clearTimeout() 取消定时器在参数一执行前取消才有用,取消之后参数一就不会执行了

2.2 setInterval定时器

setInterval(function(){
    //执行代码
},1000)

设置循环定时器 参数一,执行的函数,参数二,多少时间执行一次(毫秒为单位)

当时间一到,将参数一放到执行队列中,等到浏览器空闲的时候才会执行这种定时器会按照时间循环执行

2.3 定时器的时间显示应用

 var p = document.getElementById("p1")
    setInterval(function () {
        var date = new Date();
        if(date.getMonth()<10){
            date.getMonth()
        }
        var msg = date.getFullYear()+"年"+
                (date.getMonth()+1)+"月"+
                date.getDate()+"日"+
                date.getHours()+":"+
                date.getMinutes()+":"+
                date.getSeconds();
        p.innerHTML=msg;
    },200)

 var p = document.getElementById("p1")
   function fun() {
        var date = new Date();
        var msg = date.getFullYear()+"年"+
                (date.getMonth()+1)+"月"+
                date.getDate()+"日 "+
                date.getHours()+" :"+
                date.getMinutes()+" :"+
                date.getSeconds();
        p.innerHTML=msg;
        setTimeout(fun,1000);
    }
    fun();

3. 节点

3.1 节点的属性

节点的属性有:nodeType nodeName nodeValue

1.nodeType: 节点类型2.nodeName: 节点名称3.nodeValue: 节点的值

1. 元素节点:

• nodeType : 1

• nodeName : DIV 获取到的内容全部是大写

• nodeValue : null

1. 属性节点:

• nodeType : 2

• nodeName : 属性名

• nodeValue : 属性值

1. 文本节点:

• nodeType : 3

• nodeName : #text

• nodeValue : 文本内容

1. 注释节点:

• nodeType : 8

• nodeName : #comment

• nodeValue : 注释内容

1. document节点:

• nodeType : 9

• nodeName : #document

• nodeValue : null

3.2 查找元素的方法

1. 通过元素的id名

   var id = document.getElementById("id名")

2. 通过元素的class名

   var class = document.getElementsByClassName("class名")

   会返回一个类数组HTMLcollection

   也可以使用下标,使用方法与数组中一致

   也有length属性

3. 通过标签名

   var ele = document.getElementsByTagName("标签名")

   返回的也是HTMLcollection

4. 通过name属性值

   var name = document.getElementsByName("name值")

   返回的也是HTMLcollection

5. document.querySelector("选择器")

   选中的是第一个符合条件的元素

6. document.querySelectorAll("选择器")

   选中的是所有符合条件的元素,返回的也是一个类数组Nodelist

3.3 获取css样式

1. 获取行内样式

   //1.获取元素
   var ele = document.querySelector("div");
   //2.获取行内样式
   var style = ele.style.width;
   console.log(style);

   注意:如果样式中包含连接字符,必须改为小驼法命名

   如:background-color -> backgroundColor

2. 获取内部样式和外部样式

   var ele = document.querySelector("div");
   //使用window下面的getComputedStyle方法  参数一是元素对象,参数二是关于伪元素的
   var style = window.getComputedStyle(ele,null);
   //var w = window.getComputedStyle(ele,null)["width"];
   //var w = window.getComputedStyle(ele,null).width;
   //但是这种方法不兼容ie8及以下
   //ie8中必须使用下面这种方法     对象.currentStyle   这种方法在其他浏览器中不适用
   var style = ele.currentStyle
   //所以我们需要判断如何兼容浏览器
   //如果存在getComputedStyle,那么就用getComputedStyle方法,如果不存在就使用ele.currentStyle
   var style = window.getComputedStyle ? window.getComputedStyle() : ele.currentStyle

3.4 修改样式

只能修改内联样式的样式,不能修改内部和外部的样式

语法 : 元素对象.style.属性="";

如果存在则替换,不存在就是添加属性