JS DOM****設(shè)置元素屬性
設(shè)置id為box的這個元素的文字顏色,屬性是減號連接的復(fù)合形式時
必需要轉(zhuǎn)換為駝峰形式
var box=document.getElementById("box");
box.style.color='#f00';
box.style.fontWeight="bold"; var lis=document.getElementById("list").getElementsByTagName("li"); // 遍歷每一個li
for(var i=0,len=lis.length;i<len;i++){
lis[i].style.color='#00f'; if(i==0){
lis[i].style.backgroundColor="#ccc";
}else if(i==1){
lis[i].style.backgroundColor="#666";
}else if(i==2){
lis[i].style.backgroundColor="#999";
}else{
lis[i].style.backgroundColor="#333";
}
}
innerHTML獲取和設(shè)置標(biāo)簽之間的文本和html內(nèi)容
className重新設(shè)置類马胧，會替換掉原來的類
如果元素有多個class屬性值，那么會全部獲取到
var lis=document.getElementById("list").getElementsByTagName("li"); for(var i=0,len=lis.length;i<len;i++){
console.log(lis[i].innerHTML);
lis[i].innerHTML+='程序';
lis[1].className="current";
}
console.log(document.getElementById("box").className);
專門建立的學(xué)習(xí)Q-q-u-n： 784783012 顶滩，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程碱屁，學(xué)習(xí)工具葛账，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
屬性設(shè)置與獲取
var p=document.getElementById("text"); var user=document.getElementById("user"); // null
console.log(p.getAttribute("class")); //p.className
console.log(user.getAttribute("validate")); // 給p設(shè)置一個data-color的屬性
p.setAttribute("data-color","red"); // 給input設(shè)置一個isRead的屬性
user.setAttribute("isRead","false"); // 刪除p上的align屬性
p.removeAttribute("align");
JS****事件：
鼠標(biāo)事件
onload 頁面加載
onclick 鼠標(biāo)點(diǎn)擊
onmouseover 鼠標(biāo)劃入
onmouseout 鼠標(biāo)離開
onmousemove 鼠標(biāo)在目標(biāo)內(nèi)移動
onfocus 獲得焦點(diǎn)
onblur 失去焦點(diǎn)
onchange 內(nèi)容改變時
在事件觸發(fā)函數(shù)中婚惫，this是指對該DOM元素的引用
<input type="button" value="彈 出" onclick="alert('我是按鈕')">
<!--鼠標(biāo)劃過按鈕時調(diào)用mouseoverFn的函數(shù)-->
<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">開始</div>
<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">結(jié)束</div>
<script>
function mouseoverFn(btn,bgColor){ // 鼠標(biāo)劃過按鈕時，按鈕的背景變?yōu)榧t色
btn.style.background=bgColor;
} function mouseoutFn(btn,bgColor){
btn.style.background=bgColor;
}
DOM 0級
通過DOM獲取元素
元素.事件=腳本
執(zhí)行腳本可以是一個匿名函數(shù)筷登，也可以直接調(diào)用函數(shù)剃根，如果調(diào)用函數(shù)，語法是：ele.事件=函數(shù)名前方，不加括號
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style> .lock{width:140px;height:30px;line-height: 30px;background:#00f;
color:#fff;font-size:14px;text-align:center;border-radius:5px;
cursor:pointer;margin-top:30px;}
.unlock{width:140px;height:30px;line-height: 30px;background:#666;
color:#ccc;font-size:14px;text-align:center;border-radius:5px;
cursor:pointer;margin-top:30px;} </style>
</head>
<body>
<div class="lock" id="btn">鎖定</div>
<script>
// 獲取按鈕
var btn=document.getElementById("btn"); function clickBtn(){
alert("我是按鈕");
} // 點(diǎn)擊按鈕調(diào)用clickBtn這個函數(shù)
btn.onclick=clickBtn; // 給按鈕綁定事件,this是對該DOM元素的引用
btn.onclick=function(){ // 判斷如果按鈕是鎖定狈醉，則顯示為解鎖，變?yōu)榛疑菹眨駝t顯示為鎖定苗傅，變?yōu)樗{(lán)色
if(this.className=="lock"){ this.className="unlock"; this.innerHTML="解鎖";
}else{ this.className="lock"; this.innerHTML="鎖定";
}
} </script>
</body>
</html>
專門建立的學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)班巩，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程渣慕，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
window.onload會在網(wǎng)頁中的所有元素（文本抱慌、圖像逊桦、CSS樣式等）加載完后才觸發(fā)執(zhí)行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 頁面加載時執(zhí)行，unload頁面卸載
// 如果不加window.onload抑进，那么執(zhí)行腳本時會找不到div元素
window.onload=function(){ // 獲取box
var box=document.getElementById("box"); var clicked=function(){
alert('我被點(diǎn)擊了');
}
box.onclick=clicked;
} </script>
</head>
<body>
<div id="box">這是一個DIV</div>
</body>
</html>
change事件,一般作用域select或checkbox或radio
menu.selectedIndex 獲取select中被選中的元素的下標(biāo)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 頁面加載
window.onload=init; // 初始化
function init(){ // 獲取下拉菜單
var menu=document.getElementById("menu"); // 給菜單綁定change事件,一般作用域select或checkbox或radio
menu.onchange=function(){ // 獲取當(dāng)前選中的值
//var bgcolor=this.value;
var bgcolor=menu.options[menu.selectedIndex].value; // 如果bgcolor為空强经，則下面的腳本將不執(zhí)行
// if(bgcolor=="")return;
// 設(shè)置body的背景色
// 如果bgcolor為空，則將背景色設(shè)為白色寺渗，否則是選擇的顏色
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
} </script>
</head>
<body>
<div class="box"> 請選擇您喜歡的背景色： <select name="" id="menu">
<option value="">請選擇</option>
<option value="#f00">紅色</option>
<option value="#0f0">綠色</option>
<option value="#00f">藍(lán)色</option>
<option value="#ff0">黃色</option>
<option value="#ccc">灰色</option>
</select>
</div>
</body>
</html>
鼠標(biāo)事件：
onsubmit 表單提交
onmousedown 鼠標(biāo)按下
onmousemove 鼠標(biāo)移動
onmouseup 鼠標(biāo)松開
onresize 瀏覽器窗口大小調(diào)整
onscroll 拖動滾動條
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> body{height:2000px;}
.box{width:200px;height:200px;background:#f00;overflow:auto;} </style>
</head>
<body>
<div class="box" id="box">
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
</div>
<script>
var box=document.getElementById("box"); // 綁定按下的事件
box.onmousedown=function(){
console.log("我被按下了");
} // 綁定移動的事件
box.onmousemove=function(){
console.log("我被移動了");
} // 綁定松開的事件
box.onmouseup=function(){
console.log("我被松開了");
} // 綁定點(diǎn)擊的事件
box.onclick=function(){
console.log("我被點(diǎn)擊了");
} // 瀏覽器窗口尺寸發(fā)生改變時
window.onresize=function(){
console.log("我的尺寸被改變了");
} // 拖動滾動條
window.onscroll=function(){
console.log("我被拖動了");
}
box.onscroll=function(){
console.log("我是DIV的滾動條");
} </script>
</body>
</html>
專門建立的學(xué)習(xí)Q-q-u-n： 784783012 匿情，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)兰迫，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具码秉，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
鍵盤事件：
onkeydown 按下鍵盤
onkeypress按下鍵盤（只有字母和數(shù)字符號）
onkeyup 松開鍵盤
keyCode 返回鍵碼或者字符代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .text span{font-weight:bold;color:#f00;}
em{font-style:normal;}
b{font-weight:normal;} </style>
</head>
<body>
<div>
<p class="text">
<b id="showcount">您還可以輸入</b>
<span id="totalbox"><em id="count">30</em>/30</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
<script>
// 獲取文本框及其他元素
var text=document.getElementById("text"); var total=30; var count=document.getElementById("count"); var showcount=document.getElementById("showcount"); var totalbox=document.getElementById("totalbox"); // 綁定鍵盤事件
document.onkeyup=function(){ // 獲取文本框值的長度
var len=text.value.length; // 計(jì)算可輸入的剩余字符
var allow=total-len; var overflow=len-total; // 如果allow小于0
if(allow<0){
showcount.innerHTML="您已超出"+overflow;
totalbox.innerHTML='';
}else{
showcount.innerHTML='您還可以輸入';
totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
}
} </script>
</body>
</html>
專門建立的學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)鸡号，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程转砖，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
