1.DOM操作獲取節(jié)點
<!--
1.什么是DOM
DOM - document object mode(文檔對象模型)
js內(nèi)部自動創(chuàng)建了一個對象膀捷，叫document, 通過這個對象可以去獲取網(wǎng)頁中的內(nèi)容癣猾。
2.獲取節(jié)點 - 在js中獲取標簽對應(yīng)的節(jié)點
document.getElementById(id屬性值) - 獲取HTML中id屬性是指定值的標簽, 返回值是標簽對應(yīng)的節(jié)點對象
document.getElementsByClassName(class屬性值) - 獲取HTML中class屬性是指定值的所有標簽，返回值是容器趟济，
容器中的元素是滿足要求的節(jié)點
document.getElementsByTagName(標簽名) - 獲取HTML中指定標簽戴差，返回值是容器送爸，容器中的元素就是指定標簽對應(yīng)的節(jié)點
(了解)document.getElementsByName(name屬性值) - 獲取HTML中name屬性是指定值的所有標簽，返回值是容器暖释，
容器中的元素是滿足要求的節(jié)點
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">我是段落1</p>
<a href="" class="c1">百度</a>
<p class="c1">我是段落2</p>
<!--1.直接獲取節(jié)點-->
<script type="text/javascript">
//1)通過id獲取節(jié)點對象
p1Node = document.getElementById('p1')
console.log(p1Node)
//2)通過class獲取節(jié)點對象
c1Nodes = document.getElementsByClassName('c1')
//c1Nodes是元素是class是c1的節(jié)點的容器
console.log(c1Nodes)
//注意: 不能通過for-in遍歷獲取每個節(jié)點袭厂！
for(x of c1Nodes){
console.log(x)
}
//3)通過標簽名獲取節(jié)點
console.log('=========================')
pNodes = document.getElementsByTagName('p')
for(x of pNodes){
console.log(x)
}
</script>
<div>
<p id="p3">我是段落3</p>
<a href="">我是超鏈接2</a>
<input type="" name="userName" id="userName" value="" />
</div>
<!--2.父子節(jié)點-->
<script type="text/javascript">
//1)獲取父節(jié)點 - 子節(jié)點對象.parentElement
console.log('================獲取父節(jié)點====================')
p3Node = document.getElementById('p3')
divNode1 = p3Node.parentElement
console.log(divNode1)
//2)獲取所有的子節(jié)點 - 節(jié)點對象.children
console.log('================獲取所有子點===================')
divChildren = divNode1.children
console.log(divChildren)
//3)獲取第一個子節(jié)點 - 節(jié)點對象.firstElementChild
console.log('================第一個子節(jié)點===================')
pNode = divNode1.firstElementChild
console.log(pNode)
//4)獲取最后一個子節(jié)點 - 節(jié)點對象.lastElementChild
console.log('================最后一個子節(jié)點==================')
console.log(divNode1.lastElementChild)
</script>
</body>
</html>
2.節(jié)點的創(chuàng)建和刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="subject">
<li>python</li>
<li id="h5">h5</li>
</ul>
<script type="text/javascript">
//1.創(chuàng)建節(jié)點
console.log('==================創(chuàng)建節(jié)點====================')
//document.createElement(標簽名) - 創(chuàng)建指定標簽對應(yīng)的節(jié)點
//注意: 創(chuàng)建節(jié)點，節(jié)點不會被添加到網(wǎng)頁中球匕，也不會顯示
liNode = document.createElement('li')
//設(shè)置雙標簽的文本內(nèi)容
liNode.innerText = 'Java'
console.log(liNode)
//2.添加節(jié)點
console.log('==================添加節(jié)點====================')
//1)節(jié)點1.appendChild(節(jié)點2) - 在節(jié)點1的最后添加節(jié)點2
subjectNode = document.getElementById('subject')
subjectNode.appendChild(liNode)
//2)節(jié)點1.insertBefore(節(jié)點2,節(jié)點3) - 在節(jié)點1中的節(jié)點3的前面插入節(jié)點2
liNode2 = document.createElement('li')
liNode2.innerText = '物聯(lián)網(wǎng)'
h5Node = document.getElementById('h5')
subjectNode.insertBefore(liNode2, h5Node)
</script>
<div id="box" style="background-color: chartreuse; width: 300px; height: 500px;">
<p>我是段落1</p>
<img src="img/hat1.png"/>
</div>
<br />
<!---------3.拷貝節(jié)點--------->
<script type="text/javascript">
//節(jié)點.cloneNode() - 拷貝指定節(jié)點產(chǎn)生一個一模一樣的新的節(jié)點(淺拷貝: 只拷貝當前這一個標簽)
//節(jié)點.cloneNode(true) - 拷貝指定節(jié)點產(chǎn)生一個一模一樣的新的節(jié)點(深拷貝: 拷貝當前標簽和標簽中所有的子標簽)
console.log('=====================拷貝節(jié)點================')
//1）淺拷貝
_box = document.getElementById('box')
_box2 = _box.cloneNode()
console.log(_box2)
_body = document.getElementsByTagName('body')[0]
_body.appendChild(_box2)
//2)深拷貝
_box3 = _box.cloneNode(true)
_body.appendChild(_box3)
</script>
<!-----------4.刪除節(jié)點-------------->
<hr />
<div id="box2">
<p id="p2">我是段落2</p>
<a href="">我是超鏈接1</a>
<img src="img/logo.png"/>
</div>
<script type="text/javascript">
//1)節(jié)點1.removeChild(節(jié)點2) - 刪除節(jié)點1中的節(jié)點2
_box2 = document.getElementById('box2')
_box2.removeChild(document.getElementById('p2'))
//2)節(jié)點.remove() - 刪除指定節(jié)點
_box2.lastElementChild.remove()
</script>
<!-----------5.替換節(jié)點------------>
<hr />
<div id="box3">
<p>我是段落3</p>
<img src="img/logo.png"/>
<a href="">我是超鏈接3</a>
</div>
<script type="text/javascript">
//節(jié)點1.replaceChild(節(jié)點2,節(jié)點3) - 將節(jié)點1中的節(jié)點3替換成節(jié)點2
_box3 = document.getElementById('box3')
_box3.replaceChild(document.createElement('input'), _box3.children[2])
</script>
<button onclick="func1()">按鈕</button>
<script type="text/javascript">
function func1(){
alert('你好')
alert('hello')
}
</script>
</body>
</html>
3.添加盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box>div{
width: 300px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="addAction()">添加</button>
<script type="text/javascript">
_box = document.getElementById('box')
function addAction(){
var _div = document.createElement('div')
_box.appendChild(_div)
}
</script>
</body>
</html>
4.節(jié)點的內(nèi)容和屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/tools.js"></script>
</head>
<body>
<p id="p1">我是段落<a >隱私政策</a></p>
<img id="img1" src="img/anchor.png"/>
<script type="text/javascript">
//節(jié)點內(nèi)容和屬性: 獲取到節(jié)點后纹磺，節(jié)點對應(yīng)的標簽的內(nèi)容和屬性在節(jié)點中都會對應(yīng)一個屬性
//1.雙標簽的內(nèi)容
//1)innerText屬性 - 雙標簽的文字內(nèi)容屬性(沒有處理標簽的能力)
//2)innerHTML屬性 - 雙標的內(nèi)容屬性（有處理標簽的能力）
_p1 = document.getElementById('p1')
//獲取標簽內(nèi)容
console.log(_p1.innerText)
console.log(_p1.innerHTML)
//修改標簽內(nèi)容
// _p1.innerText = '<img src="img/bear.png"/>我不是段落!'
_p1.innerHTML = '<img src="img/bear.png"/>我不是段落!'
//2.普通屬性
//HTML標簽中所有的屬性，在js節(jié)點中都會對應(yīng)一個一樣的屬性
_img1 = document.getElementById('img1')
console.log(_img1.src)
_img1.src = 'img/bucket.png'
_img1.title = '酒桶'
//設(shè)置class屬性
_img1.className = 'c1'
//設(shè)置標簽的整體樣式
_p1.style = 'color:red; font-size:20px;background-color:yellow;'
//單獨設(shè)置指定樣式的指定屬性
_p1.style.width = '200px';
//補充: Math.random() - 產(chǎn)生 [0,1)的隨機小數(shù)
//parseInt(Math.random()*255) - 0~255
//parseInt(Math.random()*90+10) - 10~100
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
//rgb(r,g,b)
// _p1.style.backgroundColor = 'rgb('+r+','+g+','+b+')'
_p1.style.backgroundColor = randowColor(0.5)
</script>
</body>
</html>
5.BOM基本操作
<!--
1.什么是BOM
BOM - browser object mode(瀏覽器對象模型)
js內(nèi)部自動創(chuàng)建了一個window對象亮曹，代表當前頁面對應(yīng)的瀏覽器(窗口)
2.window對象
聲明在js中的所有的變量都是綁定在window對象上的屬性
3.window提供常用的屬性和方法
1)窗口基礎(chǔ)操作
2)彈框
3)定時
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1.直接聲明的變量就是綁定在window上的屬性
//使用window的屬性和方法的時候window可以省略
a = 100 //相當于window.a = 100
var name = 'xiaoming' //相當于window.name = 'xiaoming'
function func1(){ //相當于window.func1 = function(){console.log('你好')}
console.log('你好')
}
console.log(a, window.a)
console.log(name, window.name)
func1()
window.func1()
// window.alert('你好')
</script>
</body>
</html>
6.窗口基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口基本操作</title>
</head>
<body>
<button onclick="closeWindow()">關(guān)閉窗口</button>
<!-----------窗口基本操作------------->
<script type="text/javascript">
//1.打開新的窗口
//open() - 打開并且返回一個新的空白窗口
//open(網(wǎng)頁地址) - 打開并且返回一個有指定頁面的窗口
//open(網(wǎng)頁地址,'','width=?,height=?') - 打開并且返回一個指定大小的窗口
window1 = window.open()
console.log(window1, window)
window2 = window.open('https://www.baidu.com')
window3 = window.open('01-DOM操作獲取節(jié)點.html','','width=500,height=300')
//2.關(guān)閉窗口
//窗口對象.close() - 關(guān)閉指定窗口
function closeWindow(){
window1.close()
window2.close()
window3.close()
window.close()
}
//3.移動窗口(只有浮動的小窗口有效)
//窗口對象.moveTo(x坐標, y標準)
window3.moveTo(300, 300)
//4.獲取窗口大小
//窗口對象.innerWidth / 窗口對象.innerHeight - 窗口能夠顯示網(wǎng)頁內(nèi)容的有效寬高
//窗口對象.outerWidth / 窗口對象.outerHeight - 整個窗口的寬高
console.log(window.innerWidth, window.innerHeight)
console.log(window.outerWidth, window.outerHeight)
</script>
</body>
</html>
7.彈框
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1.普通對話框(提示信息+確定按鈕)
//alter(提示信息)
// alert('刪除成功!')
//2.批準彈框(提示信息+確定按鈕+取消按鈕)
//confirm(提示信息) - 返回值是選擇的結(jié)果橄杨，false -> 取消; true -> 確定
// result = confirm('是否確定刪除？')
// console.log(result)
//3.帶輸入框的提示框(提示信息+輸入框+確定按鈕+取消按鈕)
//prompt(提示信息) - 返回值是選擇的結(jié)果照卦， null -> 取消; 不是null(輸入框的內(nèi)容) -> 確定
result = prompt('請輸入你的姓名:')
console.log(result)
</script>
</body>
</html>
8.定時操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="clearInterval(timer1)">關(guān)閉定時器</button>
<hr />
<button onclick="start()">開始</button>
<button onclick="stop()">結(jié)束</button>
<script type="text/javascript">
// 1.設(shè)置周期性的定時器
//setInterval(函數(shù),時間) - 每隔指定的時間就調(diào)用一次函數(shù); 會創(chuàng)建一個定時器對象并且返回
// 時間單位 - 毫秒
num = 1
timer1 = setInterval(function(){
num += 1
console.log('hello!', num)
}, 1000)
//2.取消周期性的定時器
//clearInterval(定時器對象) - 關(guān)閉指定的定時器對象
// clearInterval(timer1)
//練習(xí): 點擊開始按鈕就每個1秒打印一個數(shù)字式矫，從1開始打印役耕；點擊暫停就停止打印
num2 = 1
function start(){
timer2 = setInterval(function(){
console.log(num2)
num2 += 1
}, 1000)
}
function stop(){
clearInterval(timer2)
}
</script>
<hr />
<button onclick="clearTimeout(timer3)">拆炸彈</button>
<script type="text/javascript">
//3.一次性的定時操作
//setTimeout(函數(shù),時間) - 到了指定的時間后執(zhí)行函數(shù)(函數(shù)只會執(zhí)行一次), 返回定時器對象
timer3 = setTimeout(function(){
alert('完蛋了!')
}, 5000)
//4.取消一次性定時器
//clearTimeout(定時器對象) - 關(guān)閉指定定時器
// clearTimeout(timer3)
//補充：修改當前窗口加載的地址
// window.location.
</script>
</body>
</html>
9.延遲跳轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">5s后自動跳轉(zhuǎn)到百度...</p>
<script type="text/javascript">
p1_ = document.getElementById('p1')
//時間
num = 5
timer1 = setInterval(function(){
num --
if(num >= 1){
p1_.innerText = num+'s后自動跳轉(zhuǎn)到百度...'
}else{
clearInterval(timer1)
window.location.
}
}, 1000)
</script>
</body>
</html>
10.事件綁定
<!--
1.事件三要素: 事件源衷佃、事件、事件驅(qū)動程序
事件源發(fā)生指定的事件就完成事件驅(qū)動程序(誰誰誰發(fā)生什么就做什么)
2.事件綁定
1)直接給事件源標簽的事件屬性賦值
2)在事件源標簽的事件屬性中調(diào)用事件驅(qū)動程序?qū)?yīng)的函數(shù); 事件驅(qū)動程序中的this是window對象
(事件驅(qū)動程序中沒有辦法獲取事件源)
事件源標簽的事件屬性賦一個函數(shù)調(diào)用表達式
3)給事件源對應(yīng)的節(jié)點的事件屬性賦值蹄葱，賦函數(shù)名或者匿名函數(shù); 事件驅(qū)動程序中的this是事件源
4)事件源節(jié)點.addEventListener(事件屬性名, 事件驅(qū)動程序); 事件驅(qū)動程序中的this是事件源
注意: 1.事件屬性名要驅(qū)動最前面的on 2.可以同時給同一個事件源的同一個事件綁定多個事件驅(qū)動程序
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.事件綁定方式1-->
<button onclick="alert('按鈕被點擊')">按鈕1</button>
<!--2.事件綁定方式2-->
<button onclick="func1()">按鈕2</button>
<script type="text/javascript">
function func1(){
alert('你好!')
alert('hello!')
console.log(this)
}
</script>
<!--3.事件綁定方式3-->
<button id="btn3">按鈕3</button>
<script type="text/javascript">
btn3_ = document.getElementById('btn3')
btn3_.onclick = function(){
alert('按鈕3被點擊')
console.log(this)
}
btn3_.onclick = function(){
alert('新的功能!')
}
btn3_.addEventListener('click', function(){
alert('新的功能2氏义！')
})
</script>
<hr />
<button class="c1">按鈕41</button>
<button class="c1">按鈕42</button>
<button class="c1">按鈕43</button>
<script type="text/javascript">
function c1Action(){
console.log(this)
this.style.backgroundColor = 'red'
}
c1s = document.getElementsByClassName('c1');
for(c1_ of c1s){
c1_.onclick = c1Action
}
</script>
<!--4.事件綁定方式4-->
<hr />
<button id="btn5">按鈕5</button>
<script type="text/javascript">
btn5_ = document.getElementById('btn5')
btn5_.addEventListener('click', function(){
alert('按鈕5被點擊')
console.log(this)
})
btn5_.addEventListener('click', function(){
alert('新功能!')
})
</script>
</body>
</html>
11.常見事件類型
<!--
1.常見事件類型
onload - 頁面加載完成
onclick - 鼠標點擊(單擊)標簽對應(yīng)的事件(一般綁定在按鈕上)
ondblclick - 鼠標雙擊事件
onmouseover - 鼠標進入標簽事件
onmouseout - 鼠標離開標簽事件
onchange - 內(nèi)容改變事件
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.頁面中的標簽加載完成锄列，才去獲取頁面中的內(nèi)容
window.onload = function(){
p1_ = document.getElementById('p1')
console.log(p1_)
}
</script>
</head>
<body>
<p id="p1">我是段落1</p>
<!--2.鼠標雙擊事件-->
<img id="img1" src="img/ghost.png"/>
<script type="text/javascript">
document.getElementById('img1').ondblclick = function(){
//雙擊后放大圖片
this.style = 'width:300px;height:300px;'
}
</script>
<!--3.鼠標進入和鼠標離開事件-->
<br />
<img id="img2" src="img/hat1.png"/>
<script type="text/javascript">
img2_ = document.getElementById('img2')
img2_.onmouseover = function(){
this.src = 'img/hat2.png'
}
img2_.onmouseout = function(){
this.src = 'img/hat1.png'
}
</script>
<!--4.值改變事件-->
<input type="" name="" id="input1"value="" />
<br />
<input type="radio" name="gender" value="男" /><label for="">男</label>
<input type="radio" name="gender" value="女" /><label for="">女</label>
<br />
<br />
<select name="" id="city">
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="重慶">重慶</option>
<option value="上海">上海</option>
</select>
<script type="text/javascript">
input1_ = document.getElementById('input1')
//輸入框輸入完成后會觸發(fā)onchange事件
input1_.onchange = function(){
console.log(this.value)
}
//單選按鈕和復(fù)選按鈕選中或者取消選中觸發(fā)的都是onchange事件
function genderChange(){
alert(this.value)
}
genders = document.getElementsByName('gender')
for(var gender_ of genders){
gender_.onchange = genderChange
}
//下拉菜單切換選項的時候觸發(fā)的也是onchange事件
document.getElementById('city').onchange = function(){
alert(this.value+':onchange被觸發(fā)')
}
</script>
</body>
</html>
12.事件捕獲
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="background-color: red; width: 400px; height: 400px; margin: auto;">
<div id="div2" style="background-color: green; width: 250px; height: 250px; margin: auto;">
<div id="div3" style="background-color: yellow; width: 100px; height: 100px; margin: auto;">
</div>
</div>
</div>
<script type="text/javascript">
//事件傳遞: 發(fā)生在子標簽上的事件會傳遞給父標簽。
//事件傳遞問題：如果父子標簽都對同一個事件進行綁定惯悠，那么子標簽觸發(fā)事件的時候父標簽也會做出反應(yīng)
//解決事件傳遞問題: 捕獲事件
document.getElementById('div1').onclick = function(){
alert('紅色div被點擊')
}
document.getElementById('div2').onclick = function(evt){
alert('綠色div被點擊')
evt.stopPropagation()
}
document.getElementById('div3').onclick = function(evt){
alert('黃色div被點擊')
//鼠標事件對象屬性:
//clientX和clientY - 點擊點到瀏覽器左邊和頂部的距離
//offsetX和offsetY - 點擊點到標簽左邊和頂部的距離
console.log(evt)
console.log(evt.offsetX, evt.offsetY)
//捕獲事件(阻止事件傳遞到父標簽)
evt.stopPropagation()
}
</script>
<input type="" name="input1" id="input1" value="" />
<script type="text/javascript">
document.getElementById('input1').onkeydown = function(evt){
//鍵盤事件對象屬性: key - 鍵值
console.log(evt)
console.log(evt.key)
// console.log(arguments)
}
</script>
</body>
</html>
13.拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
top: 200px;
left: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="div1" style="background-color: pink; width: 100px; height: 100px;">
</div>
<script type="text/javascript">
//是否移動
var isMove = false
console.log('==============:',typeof(isMove))
var startX;
var startY;
//移動的div
var div1_ = document.getElementById('div1')
//鼠標按下
div1_.onmousedown = function(evt){
isMove = true
startX = evt.offsetX
startY = evt.offsetY
console.log('按下.....', startX, startY)
}
//鼠標彈起
div1_.onmouseup = function(){
isMove = false
}
//鼠標移動
div1_.onmousemove = function(evt){
if(!isMove){
return;
}
//isMove是true的是才移動
var top1 = evt.clientY - startY;
var left1 = evt.clientX - startX;
console.log('top:'+top1+' left:'+left1);
this.style.top = top1+'px';
this.style.left = left1+'px';
}
</script>
</body>
</html>
