Dom概述
JavaScript三大核心:
ECMAScript(基礎語法)
DOM Document Object Model (文檔對象模型)
BOM Browser Object Model (瀏覽器對象模型)
跟瀏覽器本身操作有關的方法 都在BOM裏面
BOM最大的對象是 window
什麼是DOM:
所謂 DOM就是能夠操作頁面數據的一個對象總和
這個對象就是document對象
頁面所有的文檔 都歸DOM來管
DOM最大的對象是 document
document就是頁面所有標籤的祖先元素
通過document能夠對頁面的任何一個標籤進行增刪改查
JS是一個受事件驅動的 腳本語言
js的功能要想執行 必須是結合事件來執行的
簡單來說就是
在什麼時候 做什麼事情
所以js都是事件結合代碼來操作的
那麼要想學習dom就先要學習事件
先學習在什麼時候(事件)
再學習 做什麼事情(js功能 dom操作)
初步使用
JS的事件時DOM的前提
就是一般DOM的操作都要放到指定的事件裏面
JS的事件分爲三要素:
事件源
誰觸發了事件
事件名稱
觸發了什麼事件
事件驅動函數
要做什麼事情
距離:
按動燈的開關 把燈關掉
事件源:
燈的開關
事件名稱
按開關的事件
事件驅動函數
燈關閉的代碼
寫個例子:
按鈕點擊時 彈出框 顯示被點擊了
事件三要素
// 事件源 找到按鈕對象
var btn=document.getElementById("btn"); //通過標籤的id找到這個按鈕對象
// 獲取box對象
var box=document.getElementById("box");
// console.log(box);
// console.log(btn);
//事件名稱 (js已經提供好了 一堆事件 供我們直接使用)
//點擊事件
btn.onclick=function () {
// 事件驅動函數 寫點擊時要執行的代碼(可以是一句代碼 可以很多句代碼)
// alert("你點我幹嘛?");
// 給box修改背景顏色(橫線在 js中變成駝峯)
box.style.backgroundColor="blue";
}
DOM中獲取頁面元素有五種方式:
1.document.getElementById("標籤的id")
根據標籤的id獲取標籤的元素對象
2.document.getElementsByTagName("標籤名");
根據標籤名獲取好多個元素對象 放入一個僞數組裏面
直接根據標籤獲取元素 但是返回的元素可能有好多個
所以一起放入一個數組中(是個僞數組)
這個方法 就是返回僞數組!!!!!!!!!!!!!
無論找到的元素有幾個 0個 1個 1萬個
都是一樣的 就是返回僞數組
所以證明返回的元素不能直接操作
必須用索引值功能 取出自己想要的元素 然後再進行操作!!!!!!!
var p=document.getElementsByTagName("p");
// console.log(p);
// p.style.color="red";
3.document.getElementsByClassName("標籤的class名字");
返回值跟上一個一樣 也是僞數組!!!!!!
此方法有兼容問題(後面講)
var poxArr=document.getElementsByClassName("pox");
console.log(poxArr);
poxArr[0].style.backgroundColor="orange";
poxArr[1].style.backgroundColor="orange";
4.document.querySelector("css選擇器")
根據css選擇器的格式找到單個元素!!!!!
如果選擇器關聯的是一堆元素 那麼只找到第一個
var ul=document.querySelector("#box>ul");
console.log(ul);
var divPox=document.querySelector("div.pox");
console.log(divPox);
var li=document.querySelector("li");
console.log(li);//只找到第一個li
5.document.querySelectorAll("css選擇器")
根據css選擇器找到一堆元素 返回僞數組!!!!!!!!!!!
var liArr=document.querySelectorAll("ul>li");
for(var i=0;i<liArr.length;i++){
liArr[i].style.color="red";
}
僞數組:
具有索引值功能 還有length屬性
但是沒有Array的那些方法 就是僞數組(看起來像是數組 但不是真正的Array數組)
js給頁面元素設置樣式的方式:
1.元素對象.style.css屬性名(橫線變駝峯)="css屬性值";
這種方式設置的樣式 是行內樣式 所以權值比較高
如果是一兩個簡單樣式 用這種方式
如果樣式比較多 建議用下面的操作的方式
2.元素對象.className="類名";
這個類名是在style裏面定義好樣式的類名
手動爲當前元素設置這個類名 也就生效類名所對應的樣式
3.元素對象.className="";
刪除元素的class 把class這是爲空的 表示沒有class
<style>
#box{
width: 200px;
height: 200px;
background-color: orange;
}
.pox{
color:blue;
font-size: 20px;
text-align: center;
line-height:200px;
padding: 50px;
}
</style>
</head>
<body>
<button>設置樣式</button>
<button>刪除class樣式</button>
<div id="box">
大雪紛飛
</div>
<script>
var btn=document.getElementsByTagName("button")[0];//直接取第0號元素!!!!
var btn1=document.getElementsByTagName("button")[1];
var box=document.getElementById("box");
btn.onclick=function () {
/* box.style.color="blue";
box.style.backgroundColor="hotpink";*/
box.className="pox";
};
btn1.onclick=function () {
box.className="";
}
</script>
