一、屬性的操作

1.節(jié)點屬性的增刪改查

1)查

a.節(jié)點.屬性
innerHTML - 標(biāo)簽內(nèi)容(包含雙標(biāo)簽內(nèi)容中的其他標(biāo)簽和文件)
innerText - 標(biāo)簽中的文本內(nèi)容

obj.style.css樣式

注意在js中，css的屬性名用連接符的地方，改為將后面的第一個字母大寫，如：background-color ==> backgroundColor ;

b 節(jié)點.setAttribute(屬性名))

2)改

a. 節(jié)點.屬性 = 新值
b 節(jié)點.getAttribute(屬性名)

3)刪

節(jié)點.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等，根據(jù)標(biāo)簽屬性值直接獲取；注意：標(biāo)簽中的class屬性在節(jié)點中對應(yīng)的是className
    aNode = document.getElementById('a1')
    console.log(aNode.href)
    imgNode = document.getElementsByTagName('img')[0]
    console.log(imgNode.src)
    // 樣式相關(guān)屬性:可以通過style來獲取樣式相關(guān)屬性
    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() - 移動當(dāng)前窗口
window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸
3.系統(tǒng)對話框
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)
        // 設(shè)置窗口的大小    寬，高
        newWindow.resizeTo(20, 600)
        // 瀏覽器的寬高 inner是內(nèi)容的 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(函數(shù), 時間) - 每隔指定的時間調(diào)用一次指定的函數(shù)，返回的是定時器對象
函數(shù) - 可以是函數(shù)名，也可以是匿名函數(shù)
時間 - 單位是毫秒

2.清除定時器

clearInterval(定時器對象)

3.另外一組定時函數(shù)

setTimeout(函數(shù), 時間) - 每隔指定的時間調(diào)用一次指定的函數(shù)；返回的是定時器對象

clearTimeout(定時器對象)

<script type='text/javascript'>
    // 方案一：傳函數(shù)
    function timeAction(){
        console.log('aaa')
    }
    timer1 = setInterval(timeAction, 1000)
    // 方案二：匿名函數(shù)
    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是事件驅(qū)動語言
1.事件三要素：
事件源、事件、事件驅(qū)動程序
點擊按鈕，跳轉(zhuǎn)到其他頁面 -- 事件源：按鈕 事件：點擊按鈕

2.綁定事件
a.直接通過標(biāo)簽綁定事件 - 直接在事件對應(yīng)的屬性里寫js代碼
b.直接通過標(biāo)簽綁定事件 - 直接在事件對應(yīng)的屬性里寫調(diào)用函數(shù),這個函數(shù)中的this是window
c.通過節(jié)點綁定事件 - 給節(jié)點事件屬性賦函數(shù)或匿名函數(shù)
函數(shù)中this就是事件源(當(dāng)前被點擊的按鈕)
d.通過節(jié)點綁定事件
節(jié)點.addEventListener(事件名, 事件驅(qū)動程序)
事件名：去掉事件名前面的on,例如onclick -> click

3.驅(qū)動程序中的event參數(shù)，代表事件對象
this是事件源， event是事件

<script type="text/javascript">
    function buttonAction(){
        console.log(this)
    }
    btnNode3 = document.getElementById('btn3')
    btnNode3.onclick = buttonAction
    // 給鼠標(biāo)進入事件綁定函數(shù)
    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>