Day7 DOM、事件和定时

一、属性的操作

1.节点属性的增删改查

1)查

a.节点.属性
innerHTML - 标签内容(包含双标签内容中的其他标签和文件)
innerText - 标签中的文本内容

obj.style.css样式

注意在js中，css的属性名用连接符的地方，改为将后面的第一个字母大写，如：background-color ==> backgroundColor ;

b 节点.setAttribute(属性名))

2)改

a. 节点.属性 = 新值
b 节点.getAttribute(属性名)

3)删

节点.removeChild(属性名)

<script type="text/javascript">
    pNode = document.getElementById('p1')
    console.log(pNode.innerHTML)
    // 我是段落<a href="#">必读</a>
    console.log(pNode.innerText)
    // 我是段落必读
    // href,src,text,value,id等，根据标签属性值直接获取；注意：标签中的class属性在节点中对应的是className
    aNode = document.getElementById('a1')
    console.log(aNode.href)
    imgNode = document.getElementsByTagName('img')[0]
    console.log(imgNode.src)
    // 样式相关属性:可以通过style来获取样式相关属性
    console.log(aNode.style.color)
    aNode.style.color = 'red'
    console.log(aNode.style.color)
    console.log(aNode.getAttribute('href'))
    aNode.style.color = 'orange'
    imgNode.title = '猜猜1111'
    pNode.myIndex = 0   // 添加属性
    aNode.setAttribute('href', 'https://www.baidu.com')
    imgNode.removeAttribute('src')
</script>

二、BOM操作

1.BOM - 浏览器对象模型（browser object model)
js提供了一个全局的对象window，指向的是浏览器
js中声明的所有的全局变量其实都是添加给window的属性
2.window基本操作
a.打开窗口 window.open() ,返回打开新窗口的对象
open() - 空白窗口

window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
3.系统对话框
a.alert(提示信息) - 提示框，只有一个提示信息和确定按钮
b. confirm(提示信息) - 提示框，有确定取消按钮，有返回布尔值，True代表点击确定，false代表取消
c.prompt('message', 'defalult') - 提示框，有输入框，有确定按钮和取消按钮，有返回值,点击确定返回输入框的字符串；取消的时候为null

<script type='text/javascript'>
    var a = 100
    console.log(a, window.a)
    function open_win() 
    {
        // 定制打开新的窗口
        newWindow = window.open("http://www.w3school.com.cn", '', 'width = 300px, height = 100px ')
        // 移动窗口
        newWindow.moveTo(100, 100)
        // 设置窗口的大小    宽，高
        newWindow.resizeTo(20, 600)
        // 浏览器的宽高 inner是内容的 outer是浏览器的边框
        console.log(newWindow.innerWidth, newWindow.innerHeight)
        console.log(newWindow.outerWidth, newWindow.outerHeight)
    }
    console.log('aaaaaaaa')
    result = confirm('是否确定删除？')
    console.log(result)
    result = prompt('message', 'defalult')
    console.log(result)
</script>

三、定时事件

1.定时器
setInterval(函数, 时间) - 每隔指定的时间调用一次指定的函数，返回的是定时器对象
函数 - 可以是函数名，也可以是匿名函数
时间 - 单位是毫秒

2.清除定时器

clearInterval(定时器对象)

3.另外一组定时函数

setTimeout(函数, 时间) - 每隔指定的时间调用一次指定的函数；返回的是定时器对象

clearTimeout(定时器对象)

<script type='text/javascript'>
    // 方案一：传函数
    function timeAction(){
        console.log('aaa')
    }
    timer1 = setInterval(timeAction, 1000)
    // 方案二：匿名函数
    timer2 = setInterval(function(){
        console.log('bbb')
    }, 1000)
    seconds = 0;
    minute = 0;
    hour = 0;
    displayTimeNode = document.getElementById('displayTime')
    function start(){
        timer3 = setInterval(function(){
            seconds++
            if (seconds == 60){
                minute++
                seconds = 0
                if(minute == 60){
                    hour++
                    minute = 0
                    if(hour == 24){
                        hour = 0
                    }
                }
            }
            timeStr = ""
            displayTimeNode.value = timeStr
        }, 1000)
    }
    // 清除定时器
    function stop(){
        clearInterval(timer3)
    }
</script>

四、事件绑定

js是事件驱动语言
1.事件三要素：
事件源、事件、事件驱动程序
点击按钮，跳转到其他页面 -- 事件源：按钮 事件：点击按钮

2.绑定事件
a.直接通过标签绑定事件 - 直接在事件对应的属性里写js代码
b.直接通过标签绑定事件 - 直接在事件对应的属性里写调用函数,这个函数中的this是window
c.通过节点绑定事件 - 给节点事件属性赋函数或匿名函数
函数中this就是事件源(当前被点击的按钮)
d.通过节点绑定事件
节点.addEventListener(事件名, 事件驱动程序)
事件名：去掉事件名前面的on,例如onclick -> click

3.驱动程序中的event参数，代表事件对象
this是事件源， event是事件

<script type="text/javascript">
    function buttonAction(){
        console.log(this)
    }
    btnNode3 = document.getElementById('btn3')
    btnNode3.onclick = buttonAction
    // 给鼠标进入事件绑定函数
    btnNode3.onmouseover = function(){
        console.log(this)
        this.style.color = 'red'
    }
    btnNode4 = document.getElementById('btn4')
    btnNode4.addEventListener('click', function(event){
        this.style.color = 'red'
    })
    btnNode4.addEventListener('click', function(event){
        this.style.fontSize = '30px'
    })
</script>