JavaScript進(jìn)階指南： DOM與BOM操作，從初學(xué)者到專家，一步也能登天一篇文章就足夠了

DOM與BOM操作

復(fù)習(xí)鏈接:  http://c.biancheng.net/view/9360.html
事件對(duì)象： https://www.runoob.com/jsref/dom-obj-event.html

初識(shí)DOM

DOM --> Document Object Model --> 文檔對(duì)象模型 --> 通過js來操作網(wǎng)頁內(nèi)容

前幾節(jié)課學(xué)習(xí)的是JavaScript的基本語法.學(xué)習(xí)過程中可能會(huì)產(chǎn)生割裂感(和html/css沒有聯(lián)系). 從這節(jié)課開始就是和之前的知識(shí)點(diǎn)串聯(lián)在一起.
通過dom讓js和html/css產(chǎn)生聯(lián)系

DOM樹 --> 一個(gè)網(wǎng)頁文檔里的所有內(nèi)容(圖片,文本,樣式)在網(wǎng)頁底層中是用樹形結(jié)構(gòu)保存的.樹里面每個(gè)分支的終點(diǎn)叫做node(節(jié)點(diǎn)). 每個(gè)節(jié)點(diǎn)都屬于一個(gè)對(duì)象(屬性/方法)

網(wǎng)頁的內(nèi)容是以樹形結(jié)構(gòu)的方式保存在程序里.每個(gè)元素都是一個(gè)對(duì)象.都有自己對(duì)應(yīng)的屬性和方法
Document對(duì)象是DOM樹的根部.是所有節(jié)點(diǎn)的根節(jié)點(diǎn).可以通過Document訪問網(wǎng)頁里的所有內(nèi)容

操作網(wǎng)頁元素分為兩步:
	1.找出元素
	2.對(duì)元素實(shí)施操作

DOM元素的選中方式

Element -- 元素
函數(shù)語法基本都是小駝峰(第一個(gè)單詞不大寫,第二個(gè)單詞開始首字母大寫)

1.通過id獲取元素
	document.getElementById() // 通過id名獲取元素
2.通過class獲取元素
	document.getElementsByClassName() // 通過類名獲取元素
3.通過標(biāo)簽名獲取元素
	document.getElementsByTagName() // 通過標(biāo)簽名獲取元素

獲取的元素默認(rèn)值為HTMLCollection.類似于數(shù)組,但它不是數(shù)組
	同: 數(shù)據(jù)都有下標(biāo)的概念 / 數(shù)據(jù)可以被遍歷
	異: 它不可以使用數(shù)組的方法
基于這個(gè)原因,如果直接對(duì)偽數(shù)組進(jìn)行dom操作是無效的. 我們要操作的不是這個(gè)偽數(shù)組,而是偽數(shù)組里的元素. 所以要添加下標(biāo),來訪問對(duì)應(yīng)的元素

DOM操作文本內(nèi)容

innerText:  讀取/修改元素里的文本內(nèi)容(不識(shí)別標(biāo)簽語法)
innetHTML:  讀取/修改元素里的文本內(nèi)容(識(shí)別標(biāo)簽語法)

DOM操作元素屬性/樣式

操作元素屬性 --> 獲取到元素后, 通過元素名.  的方式進(jìn)行操作

	元素名.屬性名   // 使用元素屬性
	元素名.屬性名 = XXX /// 修改元素屬性

	元素名.title  // 設(shè)置/獲取元素的標(biāo)題
	元素名.src    // 設(shè)置/獲取元素的資源路徑
	元素名.className  //  設(shè)置/獲取元素的類名

操作元素樣式(css) --> 獲取元素后,通過元素名.style.樣式名  的方式進(jìn)行操作
	元素名.style.樣式名   // 訪問該元素的css樣式

	元素名.style.width   // 訪問元素的寬度樣式

如果css的樣式有(-)減號(hào)作為連接符.在用js寫的時(shí)候,不寫連接符而是用小駝峰命名法
font-size  -->  fontSize
background-color  --> backgroundColor

交互事件(event)

事件指的是用戶跟網(wǎng)頁內(nèi)容產(chǎn)生交互時(shí)的操作:
	按下鍵盤/單擊鼠標(biāo)/雙擊鼠標(biāo)/輸入文本
當(dāng)這些事件觸發(fā)時(shí),就可以通過JavaScript的監(jiān)聽器.來獲取到交互情況,并運(yùn)行對(duì)應(yīng)的功能

事件流程:
	1.獲取事件對(duì)象 --> 會(huì)基于什么進(jìn)行交互
	2.綁定監(jiān)聽事件 -->
		事件對(duì)象.監(jiān)聽事件 = function(){}  當(dāng)觸發(fā)事件時(shí),執(zhí)行函數(shù)里的功能
		box.onclick = function(){功能代碼} --> 當(dāng)點(diǎn)擊box時(shí),觸發(fā)功能

在獲取到元素之后.可以用this表示當(dāng)前對(duì)象。

DOM復(fù)習(xí)

DOM -- Document	Object Model --> 文檔對(duì)象模型
	一個(gè)網(wǎng)頁可以稱為文檔.通過js代碼實(shí)現(xiàn)找到/操作網(wǎng)頁文檔內(nèi)容
document -- 文檔
element -- 元素
node -- 節(jié)點(diǎn)
event -- 事件
Browser -- 瀏覽器

DOM操作流程:
	1.獲取目標(biāo)元素
	2.進(jìn)行對(duì)應(yīng)操作

document.getElementById() // 通過id獲取元素
document.getElementsByClassName()  // 通過類名獲取元素
document.getElementsByTagName()  // 通過標(biāo)簽名獲取元素

獲取到元素對(duì)象后.就可以使用/修改里面的屬性/方法

獲取到的元素對(duì)象表示形式類似于數(shù)組: 1.有下標(biāo) 2.能遍歷數(shù)據(jù) 3.不能使用數(shù)組的方法
用類名/標(biāo)簽名獲取到的數(shù)據(jù).哪怕只有一個(gè)對(duì)象.也是存在偽數(shù)組里的

DOM補(bǔ)充

可以通過dom對(duì)元素進(jìn)行增刪改查操作 --> 增刪改查是基于Node節(jié)點(diǎn)來實(shí)現(xiàn)的

parent: 父級(jí)
child: 子級(jí)

初識(shí)BOM:

Browser Object Model --> 瀏覽器對(duì)象模型
	dom簡(jiǎn)單來說就是通過js和網(wǎng)頁內(nèi)容進(jìn)行交互
	bom簡(jiǎn)單來說就是通過js和瀏覽器進(jìn)行交互(彈窗,刷新,加載)

其實(shí)我們之前用的alert,prompt.都屬于bom操作 --> 控制瀏覽器彈出一個(gè)窗口再進(jìn)行操作  --> 他們都屬于同一個(gè)對(duì)象.叫做window(當(dāng)前頁面窗口)

window.alert()
window.prompt()
但是一般不這么寫.因?yàn)榫W(wǎng)頁默認(rèn)運(yùn)行

定時(shí)器:

作用就是可以讓網(wǎng)頁里的一段程序.過一陣子再運(yùn)行

setInterval() > 周期性定時(shí)器 > 隔一陣子就運(yùn)行一次
setTimeOut() > 一次性定時(shí)器 > 執(zhí)行一次就結(jié)束

代碼塊：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        什么是dom操作？和html進(jìn)行交互<br>
        1、獲取html標(biāo)簽，返回一個(gè)元素對(duì)象<br>
        2、設(shè)置 值/改變 值<br>

    </p>
    <input id="inp1" type="text" value="aa">
    <ul id="ul1">
        <li>1-a-12</li>
        <li>2-b-13</li>
        <li>3-c-14</li>
    </ul>
    <button onclick="changeTest()">替換按鈕</button>
    <ul>
        <li>onclick屬性表示一個(gè)點(diǎn)擊事件屬性</li>
        <li>onclick屬性值是一個(gè)函數(shù)名稱()</li>
        <li>表示，一旦點(diǎn)擊該按鈕，就調(diào)用這個(gè)函數(shù)</li>
    </ul>
</body>
<script>
    //一、單個(gè)的設(shè)置
    //1、獲取
    let inp1=document.getElementById('inp1')
    //2、設(shè)置 值
    inp1.value='曹操'
    //二、批量的設(shè)置
    let arr2=[
        {id:1,name:'曹操',age:36},
        {id:2,name:'劉備',age:34},
        {id:3,name:'孫權(quán)',age:30},
    ]
    //1、獲取 ul
    let ul1=document.getElementById('ul1')
    function changeTest(){
    //2、替換
   let s=''
        arr2.forEach((e)=>{
        s+=`<li>${e.id}-${e.name}-${e.age}</li>`
    })
    ul1.innerHTML=s
}
</script>
</html>

強(qiáng)盛集團(tuán)案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        button{
            width: 100px;
            height: 40px;
            /* 左外間距 */
            margin-left: 40px;
            /* 去掉邊框 */
            border: none;
            /* 去掉輪廓 */
            outline: none;
            /* 圓角 */
            border-radius: 8px;
            color: white;

            font-size: large;
            cursor: pointer;
        }
        .fb>button:nth-child(1){
            background-color: rebeccapurple;
        }
        .fb>button:nth-child(2){
            background-color:red;
        }
        .fb>button:nth-child(3){
            background-color: green;
        }
        .fb>button:nth-child(4){
            background-color: blue;
        }
        /* tbody中的每個(gè)tr隔行變色 */
        tbody>tr:nth-child(odd){
            background-color: skyblue;
        }
        tbody>tr:nth-child(even){
            background-color: rgb(227, 181, 62);
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">強(qiáng)盛集團(tuán)員工薪資表</h1>
    <h3 style="text-align: center;">強(qiáng)盛集團(tuán)經(jīng)營(yíng)理念：風(fēng)浪越大，魚越貴</h3>
    <div class="fb" style="text-align: center;">
    <button onclick="generateTab()">生成表格</button>
    <button onclick="doubleSalary()">薪資翻倍</button>
    <button onclick="restEmp()">退休人員</button>
    <button onclick="sumSalary()">薪資總數(shù)</button>
</div>
<table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0">
    <thead>
        <tr>
            <th><a href="javascript:orderEmp('id')">序號(hào)</a></th>
            <th>姓名</th>
            <th><a href="javascript:orderEmp('age')">年齡</a></th>
            <th><a href="javascript:orderEmp('salary')">薪資</a></th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
          <td>1</td>
          <td>高啟強(qiáng)</td>
          <td>36</td>
          <td>200</td>
    </tr>
    </tbody>
    <tfoot id="tfoot">
        <tr style="text-align: center;">
            <td colspan="4">薪資總數(shù)：</td>
        </tr>
    </tfoot>
</table>
</body>
<script>
     let emps=[
        {id:1,name:'高啟強(qiáng)',age:36,salary:200},
        {id:2,name:'高啟盛',age:30,salary:300},
        {id:3,name:'唐小龍',age:35,salary:100},
        {id:4,name:'唐小虎',age:35,salary:100},
        {id:5,name:'陳泰',age:66,salary:100},
    ]
    //獲取
    let tbody=document.getElementById('tbody')
    let tfoot=document.getElementById('tfoot')
    
    function generateTab(){
        //調(diào)用函數(shù)
        createTab(emps)
    }
    //重復(fù)出現(xiàn)的代碼，封裝成一個(gè)函數(shù)
    function createTab(arr){
        let s=''
        arr.forEach((e)=>{
            s+=`<tr>
                <td>${e.id}</td>
                <td>${e.name}</td>
                <td>${e.age}</td>
                <td>${e.salary}</td>
            </tr>`
        })
        tbody.innerHTML=s
    }
    let newEmps;
    function doubleSalary(){
        //薪資翻倍后，返回一個(gè)新的數(shù)組
        newEmps=emps.map((e)=>{
            e.salary*=2
            return e
        })
       //調(diào)用函數(shù)
       createTab(newEmps)
    }
    //退休功能
    function restEmp(){
        let newEmps=emps.filter((e)=>{
            return e.age>65
        })
        //調(diào)用函數(shù)
        createTab(newEmps)
    }
    //薪資求和
    function sumSalary(){
        let salarySum
        if(newEmps){
            salarySum=newEmps.reduce((sum,e)=>{
                return sum+=e.salary
            },0)
        }else{
            salarySum=emps.reduce((sum,e)=>{
                return sum+=e.salary
            },0)
        }
        console.log(salarySum)
            tfoot.innerHTML=
            `<tr style="text-align: center;">
                <td colspan="4">薪資總數(shù)：${salarySum}</td>
            </tr>`
    }
     //排序
     let a=true
    function orderEmp(type){
        a=!a //每調(diào)用一次，a取反
        let newEmps2
        switch(type){
            case 'id':
                console.log('根據(jù)id排序')
                newEmps2=emps.sort((e1,e2)=>{
                    return a? e2.id-e1.id : e1.id-e2.id
                })
                break;
            case 'age':
            console.log('根據(jù)age排序')
            newEmps2=emps.sort((e1,e2)=>{
                    return a? e2.age-e1.age : e1.age-e2.age
                })
                break;
            case 'salary':
            console.log('根據(jù)salary排序')
            newEmps2=emps.sort((e1,e2)=>{
                    return a? e2.salary-e1.salary : e1.salary-e2.salary
                })
                break;
        }
        //調(diào)用生成tbody的函數(shù)
        createTab(newEmps2)
    }

</script>
</html>

效果圖展示：

posted @ 2023-07-09 10:26 二價(jià)亞鐵閱讀(130) 評(píng)論(6) 收藏舉報(bào)

刷新頁面返回頂部

二價(jià)亞鐵.

JavaScript進(jìn)階指南： DOM與BOM操作，從初學(xué)者到專家，一步也能登天一篇文章就足夠了

DOM與BOM操作

初識(shí)DOM

DOM元素的選中方式

DOM操作文本內(nèi)容

DOM操作元素屬性/樣式

交互事件(event)

DOM復(fù)習(xí)

DOM補(bǔ)充

初識(shí)BOM:

定時(shí)器:

代碼塊：

強(qiáng)盛集團(tuán)案例：

效果圖展示：

公告