jsDOM
dom就是我們的標簽 dom是標簽的一種叫法
通過dom訪問和修改操作讓網(wǎng)頁動起來
通常粤攒，通過 JavaScript社证，需要操作 HTML 元素：
1通過 id 找到 HTML 元素
2通過標簽名找到 HTML 元素
3通過類名找到 HTML 元素
<body>
<div id="item"></div>
<p id="item1"></p>
<div class="class"></div>
<script>
// <!-- 獲取dom標簽 通過id獲取dom 必須以document獲取開頭-->
// 通過id--->getElementById('這里添加元素') 獲取dom 沒有獲取到對象返回null
document.getElementById('item')
let a = document.getElementById('item')
console.log(a);
// 通過標簽獲取dom 必須以document獲取開頭
// 通過 標簽名getElementsByTagName('元素')
let b =document.getElementsByTagName('div')
console.log(b);
// 通過類名找到 getElementsByClassName HTML 元素
let c= document.getElementsByClassName('class')
console.log(c);
// 通過通用方法獲取HTML元素 開頭document 方法querySelector('這里添加元素')
let d = document.querySelector(".class")
console.log(d);
// 獲取多個標簽querySelectorAll 寫法：后面多加了一個all all是所有的意思
let e = document.querySelectorAll("div")
console.log(e);
</script>
</body>
通過dom修改樣式
<body>
<div class="item">今天星期六</div>
<script>
// 獲取dom元素獲取的是對象
let a = document.querySelector(".item")
console.log(a);
// 通過 .style:控制樣式 修改字體 font-size 去掉- -后面的字母大寫 fontSize
a.style.fontSize="80px"
a.style.color='red'
</script>
</body>
獲取文本內(nèi)容
<body>
<input type="text" value="輸入的內(nèi)容">
<div class="div">今天下雨</div>
<script>
// 獲取標簽
let a = document.querySelector('.div')
console.log(a);
// 獲取文本 innerHTML 獲取文本內(nèi)容 輸入框除外
console.log(a.innerHTML);
// 修改內(nèi)容
a.innerHTML='不下雨了'
// 通過 .value 獲取輸入框的內(nèi)容
let b =document.querySelector('input')
console.log(b.value);
</script>
</body>
事件
JavaScript使我們有能力創(chuàng)建動態(tài)頁面，而事件是可以被JavaScript偵測到的行為
事件是由三部分組成胳徽，事件源，事件類型，事件處理程序（事件三要素）
事件源：事件被觸發(fā)的對象
事件類型：如何觸發(fā) 什么事件
事件處理程序：當(dāng)這個事件被觸發(fā)之后會發(fā)生什么樣的事情
格式：
// addEventListener函數(shù) 寫事件和回調(diào)函數(shù)
DOM.addEventListener(事件,回調(diào)函數(shù))
--click 點擊事件 點擊后發(fā)生什么事情
<body>
<button>按鈕</button>
<script>
// 獲取按鈕 然后存到變量btn
let btn = document.querySelector('button')
console.log(btn);
// 點擊按鈕獲得監(jiān)聽-->addEventListener 事件 里面有兩個默認形參
// 事件源-按鈕-btn 時間類型-點擊-click 實踐出發(fā)之后出發(fā)彈窗-alert
// 語法 事件源.addEventListener('這里是事件類型',()=>{這里添加觸發(fā)過程('這里添加觸發(fā)的結(jié)果')})
// 觸發(fā)時間 函數(shù)自動被調(diào)用
btn.addEventListener('click',()=>{
alert('觸發(fā)時間')
})
</script>
</body>
#---- 練習(xí) 點擊按鈕 改變div的內(nèi)容 innerHTML可以讀取或者設(shè)置標簽包裹的內(nèi)容
<body>
<!-- 創(chuàng)建了一個div標簽 他的類名叫fun -->
<div class="fun">床前明月光</div>
<button>按鈕</button>
<script>
// 1.獲取按鈕
let but = document.querySelector("button")//通過document.querySelector("button")獲取到了按鈕
// 獲取類名為fun的div標簽并存到變量fun中
let fun = document.querySelector(".fun")
but.addEventListener("click",()=>{
// innerHTML就是獲取類名為fun的div的內(nèi)容
fun.innerHTML = "疑是地上霜"
})
</script>
</body>
change 觸發(fā)事件 獲取輸入框值
<body>
<h1></h1>
<input type="text">
<script>
// 想拿到輸入框的內(nèi)容 并且渲染到頁面
let input = document.querySelector("input") //獲取到輸入框 并存到變量input里面去
let h1 = document.querySelector("h1")
// 給事件 addEventListener
// change 表單里面的值發(fā)生改變 事件就會觸發(fā)
// 我們的事件都有回調(diào)函數(shù) 回調(diào)函數(shù)里面有一個形參e
input.addEventListener("change", (e) => {
// e.target.value就是我們輸入的值 這個記住就行
// console.log(e.target.value);
// 將獲取到輸入框輸入的值存到h1.innerHTML中
h1.innerHTML = e.target.value
})
</script>
</body>
----練習(xí)代碼
<body>
<button>點擊＋1</button>
<div>0</div>
<script>
// 我們喜歡做一件事
// 點擊按鈕 讓div+1
// 獲取按鈕
let but = document.querySelector("button")//獲取到button存到變量but中
let div = document.querySelector("div")//獲取到了div存到變量div中
// 要給事件
but.addEventListener("click",()=>{
// 我們可以把點擊按鈕想做的事情寫在回調(diào)函數(shù)中
// innerHTML獲取到里面的內(nèi)容
console.log(typeof div.innerHTML);//string類型
// 為什么 div.innerHTML++ 可以進行累加
// 因為++它自己能夠?qū)?nèi)容轉(zhuǎn)成數(shù)值 然后累加
div.innerHTML++
// 這里做判斷應(yīng)該寫整數(shù)10還是字符串10
// 無所謂 ==只判斷 值是否相等
if(div.innerHTML==10){ //如果div.innerHTML==10 內(nèi)容等于10
div.style.color = "red"http://讓文字顏色變?yōu)榧t色}})
</script>
</body>
鼠標事件 鼠標移至 HTML 元素上方或移出元素時觸發(fā)的事件
<style>
div {
width: 200px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div>撒大聲地撒</div>
<script>
// 獲取 div
let div = document.querySelector('div')
// 鼠標移入 mouseover 改變文本內(nèi)容顏色 背景顏色
div.addEventListener('mouseover', () => {
div.style.backgroundColor = 'black'
div.style.color = 'yellow'
div.innerHTML = 'sadasasd'
})
// 鼠標移出 mouseout 恢復(fù)文本內(nèi)容顏色 背景顏色
div.addEventListener('mouseout', () => {
div.style.backgroundColor = 'red'
div.style.color = 'black'
div.innerHTML = '撒大聲地撒'
})
</script>
</body>
keydown 事件 鼠標移至 HTML 元素上方或移出元素時觸發(fā)的事件
<body>
<div>我是默認的div</div>
<input type="text" class="input">
<script>
// 獲取 div input
let div = document.querySelector("div")
let input = document.querySelector(".input")
// 輸入框按下 Enter 觸發(fā)-->keydown 事件 改變div.innerHTML 內(nèi)容
input.addEventListener("keydown", (e) => {
// e.key === "Enter" 用于檢測是否按下了 Enter 鍵珊皿。
if (e.key === "Enter") {
div.innerHTML = "我觸發(fā)了"
}
})
</script>
</body>
停止計時器
<body>
<button class="a">點擊停止定時器</button>
<button class="b">點擊開始定時器</button>
<script>
// 沒2秒觸發(fā)的定時器存到變量 dsq中
let dsq = setInterval(() => {
console.log("我執(zhí)行了");
}, 2000)
// 獲取這個按鈕
let but = document.querySelector(".a")
// 事件
but.addEventListener("click", () => {
// 在點擊按鈕以后 停止定時器
clearInterval(dsq) // 停止定時器 必須給出停止定時器的名字
})
let but2 = document.querySelector(".b")
but2.addEventListener("click", () => {
setInterval(() => {
console.log("我又開始執(zhí)行了");
}, 2000)
})
</script>
</body>
