1. DOM
- DOM（Document Object Modle）：文本對象模型
1）document對象
- js會將整個網(wǎng)頁轉(zhuǎn)換成一個js對象叫document放祟；如果想要通過js獲取網(wǎng)頁中的內(nèi)容蠢笋，必須通過document來獲取（這個對象系統(tǒng)自動創(chuàng)建杯拐，程序員只需要使用）
2）document結構
- 是一個樹結構，樹下面就是各種節(jié)點（節(jié)點即Node热监，是js中Element對象堪置，指向的是html中的標簽）；Element對象有哪些屬性茄唐，就看Element對應的標簽有哪些html屬性（節(jié)點相當于標簽）
2. DOM節(jié)點操作
1）獲取節(jié)點
1.1）直接獲取
- 通過id值來獲取節(jié)點：
document.getElementById(id屬性值)：返回的是標簽對應的節(jié)點對象
-
補充：HTML標簽在js中全部都是對象息裸，標簽的屬性就是對象的屬性蝇更；雙標簽的內(nèi)容對應是innerText和innerHTML屬性：innerHTML指向的是內(nèi)容的文本和標簽； innerText只指向內(nèi)容中的文本
<p id="p1" class="c1">我是段落</p>
<img class="c1" src="img/luffy.jpg"/>
<div id="div1">
我是div
<p>我是段落2</p>
</div>
<div id="div2">
<h1 id="h1">我是標題1</h1>
<h1 id="h2">我是標題2</h1>
</div>
pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.id, pNode.innerHTML, pNode.innerText)
divNode = document.getElementById('div1')
console.log('html:',divNode.innerHTML, typeof(divNode.innerHTML))
console.log('text:', divNode.innerText)
- 通過class值獲取節(jié)點：
document.getElementsByClassName(class屬性值)：返回一個數(shù)組
c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//根據(jù)下標獲取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飛'
- 通過標簽名獲取節(jié)點：
document.getElementsByTagName(標簽名)：返回一個數(shù)組
pNodes = document.getElementsByTagName('p')
console.log(pNodes)
- 通過name屬性獲取節(jié)點
document.getElementsByName(name屬性值)：已經(jīng)被淘汰呼盆，不常用年扩，與TagName相區(qū)分
1.2）獲取父節(jié)點
-
節(jié)點.parentElement：獲取指定節(jié)點對應的父節(jié)點
bodyNode = pNode.parentElement
console.log(bodyNode)
1.3）獲取子節(jié)點
- 獲取所有子節(jié)點：
節(jié)點.children：獲取指定節(jié)點所有的子節(jié)點(不會獲取孫子節(jié)點)
children1 = bodyNode.children
console.log(children1)
- 獲取第一個子節(jié)點：
節(jié)點.firstElementChild
firstNode = bodyNode.firstElementChild
console.log(firstNode)
- 獲取最后一個子節(jié)點：
節(jié)點.lastElementChild
lastNode = bodyNode.lastElementChild
console.log(lastNode)
2）創(chuàng)建節(jié)點
-
document.createElement（標簽名）：創(chuàng)建指定標簽對象的節(jié)點對象
-
注意：創(chuàng)建的節(jié)點在沒有添加在網(wǎng)頁中的時候是不會顯示的，并且只能使用一次访圃，如果重復添加則只有最后一次有效
inputNode = document.createElement('input')
3）添加節(jié)點
-
節(jié)點1.appendChild（節(jié)點2）：在節(jié)點1的最后添加節(jié)點2
-
節(jié)點1.insertBefore（節(jié)點2厨幻，節(jié)點3）：在節(jié)點1中的節(jié)點3前插入節(jié)點2
div2Node = document.getElementById('div2')
// 節(jié)點1.appendChild(節(jié)點2) - 在節(jié)點1的最后添加節(jié)點2
div2Node.appendChild(inputNode)
// 節(jié)點1.insertBefore(節(jié)點2, 節(jié)點3) - 在節(jié)點1中的節(jié)點3前插入節(jié)點2
div2Node.insertBefore(inputNode, div2Node.firstElementChild)
4）拷貝節(jié)點
-
節(jié)點.cloneNode（）：復制指定節(jié)點，產(chǎn)生一個新的節(jié)點
inputNode2 = inputNode.cloneNode()
nputNode2.placeholder = '新節(jié)點'
div2Node.appendChild(inputNode2)
5）刪除節(jié)點
-
節(jié)點1.removeChild（節(jié)點2）：刪除節(jié)點1中的節(jié)點2
div2Node.removeChild(div2Node.firstElementChild)
-
節(jié)點.remove（）：刪除指定節(jié)點
div2Node.remove()
3. BOM操作
1）什么是BOM
- BOM（Browser Object Modle）瀏覽器對象模型
- js自帶一個window對象腿时，指向當前瀏覽器况脆；js中所有的全局變量都是綁定在window對象上的屬性
- 在使用的時候，window可以省略
num = 10 // 相當于window.num = 10
console.log(window.num, num)
function func1(){
console.log('我是函數(shù)')
}
window.func1() // func1()
2）window基本操作
2.1）打開新的窗口
new_window = window.open('https://www.baidu.com')
console.log(new_window)
-
open（url批糟，name屬性格了，窗口大小）：打開新的窗口徽鼎，同時設置窗口的寬度和高度盛末，name默認空不用設置
new_window2 = open('https://www.baidu.com','','width=400,height=300')
2.2）關閉窗口
//關閉當前窗口
window.close() / close()
//關閉其他窗口
new_window2.close()
2.3）移動當前窗口
new_window2.moveTo(100, 100)
2.4）獲取窗口的寬度和高度
-
innerWidth / innerHeight：獲取瀏覽器能夠顯示內(nèi)容的部分的寬高
console.log(new_window2.innerWidth, new_window2.innerHeight)
-
outerWidth / outerHeight：獲取整個瀏覽器的寬高
console.log(new_window2.outerWidth, new_window2.outerHeight)
3）彈框
alert('提示信息!')
-
confirm：一個提示信息、確定和取消按鈕的彈框纬傲；根據(jù)返回值是true還是false來判斷選擇的是確定還是取消
result = confirm('是否刪除?')
console.log(result)
-
prompt：一個提示信息满败、一個輸入框、確定和取消按鈕的彈框叹括；根據(jù)返回值是否是null來判斷點擊的是取消還是確定
result = prompt('提示信息','輸入框中默認值')
console.log(result)
4）定時
4.1）開啟定時
-
setTimeout（函數(shù)算墨，定時時間，實參列表）：指定時間后調(diào)用指定函數(shù)汁雷，并且傳入指定的參數(shù)净嘀，返回一個定時器對象
- 函數(shù)：可以是匿名函數(shù)，也可以是普通函數(shù)的函數(shù)名
- 定時時間：單位是毫秒（1 毫秒 = 0.001 秒）
- 實參列表：給前面的函數(shù)提供參數(shù)（可以沒有）
t1 = setTimeout(function(){
console.log('時間到侠讯！')
}, 1000)
t2 = setTimeout(function(name, age){
console.log(name, age)
}, 3000, '小明', 18)
//t1和t3的功能一樣
function timeFunc(){
console.log('時間到了')
}
t3 = setTimeout(timeFunc, 1000)
-
setInterval（函數(shù)挖藏，定時時間，參數(shù)列表）：每隔指定的時間調(diào)用一次函數(shù)
num = 1
t4 = setInterval(function(){
num ++
console.log('~~~~:',num)
if(num == 10){
clearInterval(t4)
}
}, 2000)
4.2）清除定時
-
clearTimeout（定時對象）：clearTimeout(t2)
-
clearInterval（定時對象）：clearInterval(t4)
- 練習：實現(xiàn)5s后自動跳轉(zhuǎn)到百度頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">5秒后自動跳轉(zhuǎn)</p>
<script type="text/javascript">
time = 5
pNode = document.getElementById('p1')
t1 = setInterval(function(){
time--
if(time == 0){
open('https://www.baidu.com')
clearInterval(t1)
}
pNode.innerText = time+'秒后自動跳轉(zhuǎn)'
}, 1000)
</script>
</body>
</html>
4. 事件
1）事件三要素
- 事件源厢漩、事件膜眠、事件驅(qū)動程序
- 事件源發(fā)生某個事件就做什么事（事件驅(qū)動程序）
2）事件的綁定
2.1）方式一：在標簽內(nèi)部給標簽的事件屬性賦值（不推薦使用）
-
注意：這種方式綁定的時候，this指向的是window
<button onclick="alert('你好溜嗜！')">按鈕1</button>
<button id="btn1" onclick="btnClick()">刪除1</button>
<button id="btn2" onclick="btnClick()">刪除2</button>
function btnClick(){
console.log(this)
result = confirm('是否刪除?')
if(result){
document.getElementById('btn1').remove()
}
}
2.2）方式二：通過給節(jié)點對象的事件屬性賦值來綁定（推薦使用）
-
注意：這種方式綁定的時候宵膨，this指向的是事件源
<button id="btn3">刪除</button>
<button class="btn1">刪除3</button>
<button class="btn1">刪除4</button>
<button class="btn1">刪除5</button>
btnNode = document.getElementById('btn3')
// 給事件屬性賦函數(shù)名
btnNode.onclick = btnClick
//獲取所有class值是btn1的標簽對應的節(jié)點
btn1Nodes = document.getElementsByClassName('btn1')
for(x=0;x<btn1Nodes.length;x++){
btn1Node = btn1Nodes[x]
// 給事件屬性賦匿名函數(shù)
btn1Node.onclick = function(){
console.log(this)
result = confirm('是否刪除?')
if(result){
this.remove()
}
}
}
2.3）方式三：通過addEventlistener方法進行綁定（推薦使用）
- 語法：
事件源節(jié)點.addEventListener(事件名稱,事件驅(qū)動程序)
- 說明：
事件名稱 - 事件屬性名去掉on
事件驅(qū)動程序 - 事件發(fā)生后需要調(diào)用的函數(shù)
- 注意：
this是事件源
可以給同一個節(jié)點的同一個事件綁定不同的事件驅(qū)動程序
<button id="btn4">按鈕</button>
btnNode4 = document.getElementById('btn4')
btnNode4.addEventListener('click', function(){
console.log(this)
alert('你好！')
})
btnNode4.addEventListener('click', function(){
this.style.color = 'red'
})
3）常見事件類型
3.1） onload事件
- 頁面加載完成對應的事件（標簽加載成功）
-
window.onload = 函數(shù)（window.可以省略）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//寫在這兒的代碼炸宵，在頁面加載完成后才會執(zhí)行
pNode = document.getElementById('p1')
console.log(pNode)
}
</script>
</head>
<body>
<p id="p1">我是段落</p>
<input type="" name="input1" id="input1" value="" />
<input type="" name="input2" id="input2" value="" />
</body>
</html>
3.2）鼠標事件
-
onmousedown：鼠標按鈕按下事件辟躏；onmouseup：鼠標按鈕松開事件；onclick：鼠標點擊事件
-
onmouseover：鼠標懸停事件土全；onmouseout：鼠標離開事件
-
onmouseenter：鼠標移動到元素上時觸發(fā)捎琐；onmouseleave：鼠標移開事件（類似于 onmouseover 和 onmouseout 会涎，區(qū)別是 onmouseenter 和 onmouseleave 不支持冒泡）
-
onmousemove：鼠標在元素上移動（over （在上面）只觸發(fā)一次，move （移動） 只要移動就不停觸發(fā)）
pNode = document.getElementById('p1')
// 鼠標點擊事件
pNode.onclick = function(evt){
alert('p標簽被點擊')
console.log(evt)
}
// 鼠標懸停事件
pNode.onmouseover = function(){
this.style = 'background-color:yellow'
}
// 鼠標離開事件
pNode.onmouseout = function(){
this.style = 'background-color:pink'
}
3.3）鍵盤事件
- 鍵盤事件一般綁定在輸入框對應的標簽上
-
onkeypress：按下彈起
-
onkeydown：按鍵按下
-
onkeyup：按鍵彈起
// 按下彈起
inputNode = document.getElementById('input1')
inputNode.onkeypress = function(evt){
console.log('鍵盤按下彈起')
console.log(evt)
}
// 按鍵按下 瑞凑、按鍵彈起
inputNode.onkeydown = function(){
console.log('鍵盤按下')
}
inputNode.onkeyup = function(){
console.log('鍵盤彈起')
}
3.4）輸入框事件
-
onchange：輸入框中輸入內(nèi)容的時候按回車（補：onchange 屬性可適用于 <input>, <textarea>, 和 <select> 元素末秃，用于 <select> 元素中時，onchange表示切換選擇）
-
oninput：正在輸入
//onchange - 輸入框中的輸入內(nèi)容的時候按回車
inputNode2 = document.getElementById('input2')
inputNode2.onchange = function(evt){
console.log('內(nèi)容發(fā)生改變')
console.log(evt)
}
//oninput - 正在輸入
inputNode2.oninput = function(){
console.log('正在輸入')
}
4）事件對象
- 每個事件驅(qū)動程序中拨黔，都可以設置一個參數(shù)（一般用evt）來表示當前事件對象蛔溃，不同類型的事件對應事件類型和事件屬性不同
4.1）鼠標事件對象
-
clientX / clientY：鼠標的位置到瀏覽器左邊和頂部的距離
-
offsetX / offsety：鼠標的位置到事件源標簽左邊和頂部的距離
4.2）鍵盤事件對象
5）事件冒泡和捕獲
-
事件冒泡：作用于子標簽的事件會傳遞給父標簽，如果希望作用于子標簽的事件不傳遞給父標簽篱蝇，需要在子標簽中對事件進行捕獲
-
事件捕獲：事件對象.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="background-color: yellow; width: 400px; height: 400px; margin-left: auto; margin-right: auto; ">
<div id="div2" style="background-color: yellowgreen; width: 200px; height: 200px; margin-left: auto; margin-right: auto; ">
<div id="div3" style="background-color: deepskyblue; width: 100px; height: 100px; margin-left: auto; margin-right: auto;">
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById('div1').onclick = function(){
alert('div1被點擊')
}
document.getElementById('div2').onclick = function(evt){
alert('div2被點擊')
evt.stopPropagation()
}
document.getElementById('div3').onclick = function(evt){
alert('div3被點擊')
//阻止當前事件被傳遞給父標簽
evt.stopPropagation()
}
</script>
</body>
</html>
