1.属性操作

1.节点属性的增删改查
1）查
a.节点.属性
innerHTML  - 标签内容（包含双标签内容中的其他标签和文件）
innerText - 标签中的文本内容
href,src,text,value,id等，根据标签属性直接获取；注意：标签中的class属性在节点中对应的classname

样式相关属性：可以通过style来获取样式相关属性
aNode.style.color  //获取字体颜色
aNode.style.display  //获取display的值

b.节点.getAttribute(属性名)

2)改
a.节点.属性=新值
b.节点.setAttribute(属性名，新值)
注意：inner相关无效

3）shan
节点.removeAttribute(属性名)

2.BOM操作

1.BOM - 浏览器对象模型（browser object model）
js提供了一个全局的window，指向到的是浏览器
在js中声明的所有的全局变量其实都是添加给window的属性

2.基本操作
a.打开新的窗口：open（） - 会返回被打开的窗口对应的对象
open() - 空白窗口
open（url） - 在新窗口中打开指定网页

b.移动窗口
newwindow.moveTo(300,200)
c.设置窗口大小
 newwindow.resizeTo(400,300)

弹框
a.alert(提示信息) - 提示框，只有提示信息和确定按钮
b.confirm(提示信息) - 提示框，有确定和取消按钮；返回是布尔值，true->点击确定，flase->点击取消
c.prompt - 提示框，有一个输入框，一个确定按钮和取消按钮；
返回值是字符串，点击确定返回值是输入框中的内容，点击取消返回值是null 

3.计时事件

1.定时器
a.开启定时器
setInterval(函数，时间) - 每隔指定的时间调用一次指定的函数；返回是定时器对象
setTimeout(函数，时间) - 每隔指定时间后调用一次指定函数（函数只会调用一次，相当于炸弹）

函数 - 可以是函数名，也可以是匿名函数
时间 - 单位是毫秒

b.停止计时器
clearInterval（定时器对象） - 停止指定的定时器
clearTimeout(定时器对象) - 停止指定的定时器

4.事件绑定

js是事件驱动语言
1.事件三要素：事件源、事件、事件驱动程序
小明打狗，狗咬它 - 事件源：狗   事件：打狗  事件驱动：狗咬他

小明打狗，他爸打他  - 事件源：狗  事件：打狗   事件驱动：他爸打他

点击按钮，跳转到其他页面  - 事件源：按钮   事件：点击按钮   事件驱动程序：跳转到指定页面

2.绑定事件
a.直接通过标签绑定事件 - 直接在事件对应的属性里写js代码
b.直接通过标签绑定事件 - 直接在事件对应的属性里写调用函数，这个函数中的this是window
c.通过节点绑定事件 - 给节点的事件属性赋函数或者匿名函数

函数中的this就是事件源（当前被点击的按钮）
    btnNode2 = document.getElementById('btn2')
    //给点击事件绑定函数
    btnNode2.onclick = buttonAction
    //给鼠标进入事件绑定函数
    btnNode2.onmouseover=function(){
        this.style.color = 'red'
    }
    //通过节点绑定事件
    //节点.addEventListener（事件名，事件驱动程序）
    //事件名：去掉事件名前面的on，例如onclick ->click
    //这种绑定事件，可以给同一个事件源的同一个事件绑定不同的驱动程序
    //this是事件源，evt是事件对象
    btnNode3 = document.getElementById('btn3')
    btnNode3.addEventListener('click',function(evt){
        console.log(this)
//      alert('按钮3被点击')
        this.style.color = 'red'
    })
    btnNode3.addEventListener('click',function(evt){
        this.style.fontSize = '30px'
    
    })
    
    //3.驱动程序中的evt参数，代表事件对象
    boxNode1 = document.getElementById('box1')
    boxNode1.addEventListener('click', function(evt){
        if(evt.offsetX <= 75){
            this.style.backgroundColor = 'red'
        }else{
            this.style.backgroundColor = 'yellow'
        }
    })
    
    
    //补充：js中的随机数
    console.log(Math.random())    //随机数0-1（小数）
    console.log(parseInt(Math.random()*100))
    console.log(parseInt(Math.random()*255))
    console.log(parseInt(Math.random()*90+10))

事件冒泡和事件捕获

1.事件冒泡
子标签上产生的事件会传递给父标签
事件捕获：让事件不再传递给父标签


//获取节点
    divNode1 = document.getElementById('div1')
    divNode2 = document.getElementById('div2')
    divNode3 = document.getElementById('div3')
    //绑定事件
    divNode1.addEventListener('click',function(){
        alert('div1被点击！')
    })
    divNode2.addEventListener('click',function(evt){
        alert('div2被点击！')
        evt.stopPropagation()
    })
    divNode3.addEventListener('click',function(evt){
        alert('div3被点击！')
        //让evt事件对象不传递给当前标签的父标签
        evt.stopPropagation()
    })