web APIs 基本認(rèn)知

作用和分類

• 作用：就是使用JS去操作html和瀏覽器
• 分類：DOM(文檔對象模型)办斑，BOM(瀏覽器對象模型)

DOM基本知識

1. 什么是DOM

• DOM是用來呈現(xiàn)以及任意HTML或XML文檔交互的API
• 大白話：DOM是瀏覽器提供一套專門操作網(wǎng)頁內(nèi)容的功能
• DOM作用：開發(fā)網(wǎng)頁內(nèi)容特效和實現(xiàn)用戶交互

2. DOM樹

• 將HTMl文檔以樹狀結(jié)構(gòu)直觀表現(xiàn)出來，我們稱之為DOM樹
• 描述網(wǎng)頁內(nèi)容關(guān)系的名詞
• 作用：文檔數(shù)直觀的體現(xiàn)了標(biāo)簽與標(biāo)簽之間的關(guān)系

3. DOM對象

• DOM對象：瀏覽器根據(jù)html標(biāo)簽生成的js對象

• 所有的標(biāo)簽屬性都可以在這個對象上找到
  修改這個對象上的屬性會自動映射到標(biāo)簽身上

• DOM的核心思想

• 把網(wǎng)頁內(nèi)容當(dāng)做對象來處理

• document對象

• 是DOM里提供一個對象

• 所以他提供的屬性和方法都是用來訪問和操作網(wǎng)頁內(nèi)容的

• 網(wǎng)頁所有內(nèi)容都在document里面

獲取DOM元素

1. 根據(jù)css選擇器來獲取DOM元素

1. 匹配第一個第一個元素

document.querySelector('css選擇器')

參數(shù)：

• 包含一個或者多個有效的css選擇器字符串

<div class="box">
    <input name='xx'>    
</div>
//選中了div里面的name屬性為xx的input標(biāo)簽
let inputDom = document.querySelector("div.box input[name='xx']");

返回值:

• css選擇器匹配的第一個元素，一個HTMLElement對象

<div>1</div>
<div>2</div>
<script>
    let divDom = document.querySelector('div')
    console.dir(divDom)
</script>

• 如果沒有匹配到尚洽，則返回null

<script>
    let divDom = document.querySelector('div')
    console.dir(divDom)//null
</script>

• 用console.log打印出來的是標(biāo)簽腺毫，要想輸出一個dom對象就用console.dir()

<div></div>
<script>
    let divDom = document.querySelector('div')
    console.log(divDom)
    console.dir(divDom)
</script>

2. 選擇匹配的多個元素

document.querySelectorAll('css選擇器')

參數(shù)：

  - 包含一個或多個有效的css選擇器字符串

  返回值：
  
  - css選擇器匹配的所有符合的對象集合
  
    ```html
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    let liDom = document.querySelectorAll('ul li')
    console.dir(liDom)
    ```
  
  - 1
  
  - 
  
  特點(diǎn)：
  
  - 得到的是一個偽數(shù)組
  
  - 沒有數(shù)組的pop(),push()等數(shù)組的方法
  
  - 想要得到里面的每一個對象睛挚，則需要遍歷的方式來獲得
  
    ```js
    let divs = document.querySelectorAll('divs')
    console.dir(divs)
    ```
  
    
  
  注意：哪怕只有一個元素澈灼，通過querySelectorAll()獲取過來的也是一個偽數(shù)組叁熔，里面只有一個元素而已

2. 其他獲取DOM元素方法（了解)

1. 根據(jù)id獲取一個元素

document.getElementById('id名')

2. 根據(jù)標(biāo)簽取一類元素 獲取頁面所有的div

documentgetElementsByTagName('div')

3. 根據(jù)類名獲取元素 獲取頁面所有同類名的元素

document.getElementsByClassName('w')

設(shè)置/修改DOM元素內(nèi)容

DOM對象都是根據(jù)標(biāo)簽生成的荣回，所以操作標(biāo)簽，本質(zhì)上就是操作DOM對象壕吹。就是操作對象使用的點(diǎn)語法

1. document.write()方法

• 只能將文本內(nèi)容追加到前面的位置
• 文本包含標(biāo)簽會被解析

//永遠(yuǎn)只是追加操作删铃，且只能位置</body>前
document.write('Hello World')
document.write('<h3>你好猎唁，js</h3>')

2. 對象.innerText 屬性

• 將文本內(nèi)容添加/更新到任意表標(biāo)簽位置

• 將文本包含的標(biāo)簽不會被解析

<div class="box"></div>
let box = document.querySelector('.box')
box.innerText = '<h4>你好咒劲，世界</h4>'

3. 對象.innerHTML 屬性

• 將文本內(nèi)容添加/更新到任意標(biāo)簽位置
• 文本中包含的標(biāo)簽會被解析

<div class="box"></div>
let box = document.querySelector('.box')
box.innerHTML = '<h6>我的世界<br>有你真好</h6>'

設(shè)置/修改DOM元素屬性

可以通過JS設(shè)置/修改標(biāo)簽元素屬性。比如通過src更換 圖片

可以通過JS設(shè)置/修改元素樣式屬性

1. 設(shè)置/修改元素常用屬性
   語法:

對象.屬性 = 值

代碼示例：

<img src='' title='未定義圖片'/>
//獲取到img標(biāo)簽
let pic = document.querySelector('img')
//操作元素設(shè)置或者修改屬性
pic.src = '圖片路徑'
pic.src = '這是一個圖片'

2. 設(shè)置修改元素樣式屬性
   通過style屬性操作css
   語法:

對象.style.樣式屬性 = 值

注意:

1. 修改樣式通過style屬性引出
2. 如果屬性有 - 連接符诫隅，需要轉(zhuǎn)換為小駝峰命名法
3. 賦值的時候腐魂，需要的時候不要忘記加css單位

<div class="box"></div>
let box = document.querySelector('.box')
//修改盒子的樣式屬性
box.style.backgroundColor = 'skyblue'
box.style.width = '300px'
box.style.height = '300px'
box.style.marginTop = '50px'

2. 操作類名(className)操作css
   如果修飾的樣式比較多，直接通過style屬性修改比較繁瑣逐纬，我們可以借助類名的形式

語法：

元素.className = 'box'

注意：

• 由于class是關(guān)鍵字蛔屹，所以要使用className去代替
• className是使用新的值換舊值，如果需要添加一個類豁生，需要保留之前的類名
  代碼示例:

.box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            color: pink;
        }

.box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
<div class="box">你好</div>
    <script>
        let div = document.querySelector("div")
        //會替換掉已有的類名
        div.className = 'box1'
        //想要保存類名必須加上以前那個類
        // div.className = 'box box1'
</script>

3. 通過classList操作控制css
   為了解決className容易覆蓋以前的類名兔毒，可以通過classList方式追加和刪除類名
   語法：

追加一個類

//可以一次添加多個類
元素.classList.add('類名')

刪除一個類

//可以同時刪除多個類
元素.classList.remove('類名')

切換一個類

//如果本來有沛硅，那我就移除  眼刃， 如果本來沒有，那我就添加
元素.classList.toggle('類名')

3. 設(shè)置/修改 表單元素 屬性

• 獲取

DOM對象.屬性名

• 設(shè)置

DOM對象.屬性名 = 新值

• 語法

表單.value='用戶名'
表單.type = 'password'
....

定時器-間歇函數(shù)

• 定時器介紹
  網(wǎng)頁中經(jīng)常會需要一種功能：每隔一段時間需要自動執(zhí)行一行代碼摇肌，不需要我們手動觸發(fā)。就比如網(wǎng)頁中的倒計時仪际，要實現(xiàn)這種需求围小，需要定時器函數(shù)昵骤。其中一種就是間歇函數(shù)
• 定時器的使用
  1.開啟定時器

setInterval(函數(shù),間隔函數(shù))