復(fù)旦學(xué)霸張立勇做的有關(guān)寺廟網(wǎng)站外貿(mào)網(wǎng)站平臺
目錄
01 DOM操作事件的體驗
02 獲取元素對象的五種方式
03 事件中this指向問題
04循環(huán)綁定事件
05 DOM節(jié)點對象的常用操作
? ? 06 點亮盒子的案例
07 節(jié)點訪問關(guān)系
08 設(shè)置和獲取節(jié)點內(nèi)容的屬性
09 以上內(nèi)容的小總結(jié)
?
01 DOM操作事件的體驗
????????js本身是受事件驅(qū)動的腳本語言
????????什么是事件?
? ? ? ? ? ? ? ? 一系列狀態(tài)? 比如: 點擊事件 鼠標(biāo)離開事件? 頁面加載事件
? ? ? ? 驅(qū)動: 驅(qū)使程序動起來
? ? ? ? 頁面元素綁定事件的步驟:
? ? ? ? ? ? ? ? 1.獲取頁面元素對象
? ? ? ? ? ? ? ? 2.元素對象.on事件名稱=匿名函數(shù)(js系統(tǒng)提供好了很多事件)
? ? ? ? ? ? ? ? 3.在匿名函數(shù)里面定義執(zhí)行的功能代碼
02 獲取元素對象的五種方式
????????獲取頁面元素的五種方式:
? ? ? ? 1.通過id獲取元素對象
? ? ? ? ? ? ? ? var 變量=document.getElementById('元素id')
? ? ? ? 2.通過class獲取元素對象? 返回的是一個偽數(shù)組對象
? ? ? ? ? ? ? ? var 變量=document.getElementByClassName('標(biāo)簽class屬性')
? ? ? ? ? ? ? ? 不能直接拿來當(dāng)做節(jié)點對象操作
? ? ? ? ? ? ? ? 要想使用其中的元素對象,必須通過偽數(shù)組[索引值]
????????????????取出里面指定索引值的元素對象再踐行操作
? ? ? ? 3.通過標(biāo)簽名獲取? 返回值是偽數(shù)組
? ? ? ? ? ? ? ? var 變量=document.getElementsByTagName('標(biāo)簽名')
? ? ? ? 4.通過選擇器獲取單個元素
????????????????var 變量=document.querySelector('css選擇器')
????????????????只能選中單個元素
? ? ? ? 5.通過選擇器獲取多個元素
????????????????var 變量=document.querySelectorAll('選擇器')
????????偽數(shù)組:
????????????????只有索引功能和length屬性 但是沒有數(shù)組的那些常用的函數(shù)(push pop shift...)
? ? ? ? 循環(huán)遍歷偽數(shù)組:
????????????????for(var i=0;i<偽數(shù)組名.length;i++){
????????????????????????lis[i].style.backgroundColor='red'
????????????????}
03 事件中this指向問題
? ? ? ? 事件源:
????????var box=document.getElementById('box');
? ? ? ? var box=document.querySelector('#box')
? ? ? ? console.log(box)
? ? ? ? 事件名稱 事件驅(qū)動函數(shù)
? ? ? ? ? ? ? ? 事件源.on事件名稱=事件驅(qū)動函數(shù)(匿名函數(shù))
? ? ? ? ? ? ? ? box.οnclick=function(){
? ? ? ? ? ? ? ? ? ? ? ? alert('你好')
????????????????}
? ? ? ? 在事件當(dāng)中的this 指向的是當(dāng)前綁定這個事件的事件源對象?
????????也就是本次觸發(fā)這個事件的事件源
? ? ? ? 總結(jié):? 誰觸發(fā)了這個事件 this就指向誰
????????????????
04循環(huán)綁定事件
????????如果頁面多個元素 想要綁定同一個事件 并且事件代碼功能也相同,
????????那么就可以使用循環(huán)遍歷的方式綁定.
????????var btnArr=document.querySelectorAll('button');
? ? ? ? console.log(btnArr);
? ? ? ? for(var i=0;i<btnArr.length;i++){
????????????????btnArr[i].οnclick=function(){
????????????????????????// 這個函數(shù)是頁面加載時 循環(huán)給每一個按鈕綁定的事件驅(qū)動函數(shù)
? ? ? ? ? ? ? ? ????????// 只有點擊的時候才執(zhí)行里面的代碼
? ? ? ? ? ? ? ? ????????// 頁面加載時只是綁定了函數(shù)
? ? ? ? ? ? ? ? ????????// 所以等到函數(shù)執(zhí)行的時候也就是你點擊的時候頁面早就加載完畢了
? ? ? ? ? ? ? ? ????????// 頁面加載完畢了 也就以為這這個循環(huán)早就結(jié)束了 也就是這個循環(huán)執(zhí)行完了
? ? ? ? ? ? ? ? ????????// 那么這個 i 變量的值就已經(jīng)是5了
? ? ? ? ? ? ? ? ????????// console.log(btnArr[i]);
? ? ? ? ? ? ? ? ????????// btnArr[i].style.backgroundColor='blue'
? ? ? ? ? ? ? ? ????????console.log(this);
? ? ? ? ? ? ? ? ????????this.style.backgroundColor='blue'
? ? ? ? ? ? }
? ? ? ? }
05 DOM節(jié)點對象的常用操作
? ? ? ? 操作元素的class
? ? ? ? 獲取:????元素對象.className
? ? ? ? 設(shè)置:?元素對象.className='新類名1 新類名2...'
? ? ? ? ? ? ? ? 通過className屬性改變標(biāo)簽類名? 會全部設(shè)置上新賦的值?
? ? ? ? ? ? ? ? 如果想要原本的類名 需要在賦值的時候也增加上
? ? ? ? 設(shè)置行內(nèi)樣式:
? ? ? ? ? ? ? ? 元素.style.css 屬性名='屬性值'
????????
? ? ? ? 操作圖片標(biāo)簽的src屬性: 圖片對象.src
? ? ? ? 操作元素的title屬性: 元素對象.title
????????小總結(jié):
? ? ? ? ????????對象.屬性? ?不寫等號就是獲取
? ? ? ? ? ? ? ? 對象.屬性=值? 寫等號就是設(shè)置/修改
? ? 06 點亮盒子的案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}nav{height: 40px;line-height: 40px;text-align: center;width: 500px;margin:50px auto;}nav>div{float: left;height: 40px;padding: 0 20px;background-color: hotpink;margin-right: 5px;cursor: pointer;color:#fff;}nav>div.current{background-color: orange;}</style>
</head>
<body><nav><div class="current">首頁</div><div>商品頁</div><div>購物車頁</div><div >個人中心</div><div>聯(lián)系我們</div></nav><script>// 排他思想// 干掉所有人 留下我自己var divArr=document.getElementsByTagName('div')// console.log(divArr);// 循環(huán)綁定鼠標(biāo)移入事件 onmouseover 鼠標(biāo)進(jìn)入事件 只會觸發(fā)一次for(var i=0;i<divArr.length;i++){// console.log(i);divArr[i].onmouseover=function(){// console.log(111);// this.style.backgroundColor='orange'// 排他思想 干掉所有人for(var i=0;i<divArr.length;i++){divArr[i].className=''}// 留下我自己this.className='current'}}</script>
</body>
</html>07 節(jié)點訪問關(guān)系
? ? ? ? 利用節(jié)點與節(jié)點之間的關(guān)系 找到指定的元素
? ? ? ? 獲取父節(jié)點對象: parentNode
? ? ? ? 獲取第一個子節(jié)點:firstElementChild
? ? ? ? 獲取最后一個子節(jié)點:lastElementChild
? ? ? ? 獲取上一個兄弟節(jié)點:previousElementSibling
? ? ? ? 獲取下一個兄弟節(jié)點:nextElementSibling
? ? ? ? 獲取所有子節(jié)點:
? ? ? ? ? ? ? ??childNodes
????????????????children(常用)
08 設(shè)置和獲取節(jié)點內(nèi)容的屬性
? ? ? ? 元素對象.innerHtml
? ? ? ? 元素對象.innerText
? ? ? ? ? ? ? ? 獲取時:
????????????????????????innerHTML可以獲取內(nèi)部所有的內(nèi)容包括標(biāo)簽
????????????????????????innerText只能后去內(nèi)部素有的標(biāo)簽內(nèi)的文本內(nèi)容 獲取不到標(biāo)簽
? ? ? ? ? ? ? ? 設(shè)置時:
? ? ? ? ? ? ? ? ? ? ? ? 他們兩個都能把內(nèi)部的內(nèi)容全部清空然后替換成我們賦值的內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? 如果字符串中帶有標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 那么innerHTML會把標(biāo)簽渲染出來呈現(xiàn)在頁面中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? innerText不會吧標(biāo)簽渲染出來 只會按照普通字符串的形式展示
09 以上內(nèi)容的小總結(jié)
????????元素獲取的五種方式：
????????????????1.id 2.className 3.tagName 4.querySelector("選擇器") 5.querySelectorAll("選擇器")
????????this指向問題：
????????????????構(gòu)造函數(shù)中的this指向新創(chuàng)建的對象
????????????????普通函數(shù)中的this指向函數(shù)的調(diào)用者
????????????????元素事件驅(qū)動函數(shù)中的this指向當(dāng)前觸發(fā)事件的那個元素
? ? ? ? 循環(huán)綁定事件：
????????????????多個元素綁定同一個事件 通過this獲取當(dāng)前觸發(fā)事件的那個元素對象
? ? ? ? DOM節(jié)點的常用操作：
????????????????操作樣式：
? ? ? ? ? ? ? ? ????????元素對象.style.css屬性名=屬性值
? ? ? ? ? ? ? ????????? 操作class:
????????????????????????????????元素對象.className=''
????????????????操作標(biāo)簽的其他的屬性：
????????????????????????元素對象.src ? ?title ? href
????????點亮盒子：
????????????????排他思想
????????節(jié)點訪問關(guān)系：
????????????????父節(jié)點 ?parentNode
????????????????第一個子節(jié)點：firstElementChild
????????????????最后一個子節(jié)點：lastElementChild
????????????????上一個兄弟：previousElementSibling
????????????????下一個兄弟：nextElementSibling
????????????????所有子節(jié)點：children ? childNodes(包括文本節(jié)點)
? ? ? ? 元素對象內(nèi)容：
????????????????innerHTML ?
????????????????innerText