DOM簡介:
//DOM - document object model 文檔對象模型
//其實dom的作用就是給了我們一些屬性和方法，讓我們可以操作頁面中的標簽
//頁面元素 ： 標簽
獲取元素的第一種方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
<script>
//書寫方式与境，駝峰命名法
//傳入一個字符串類型的id名即可
//console.log(document.getElementById("box"));
//發(fā)現(xiàn)獲取結(jié)果為null值桩，說明沒有獲取到對應(yīng)的元素
//入口函數(shù)：
window.onload = function () {
//作用：內(nèi)部書寫的所有代碼苔咪，會在頁面完全加載（結(jié)構(gòu)，圖片）后執(zhí)行河胎。
console.log("這是入口函數(shù)中獲取的標簽");
console.log(document.getElementById("box"));
};
</script>
</head>
<body>
<div id="box"></div>
<script>
// 標簽的獲取方式：
// 方式1：可以將js代碼書寫在body的最底部，可以保證所有的標簽先進行加載。
console.log(document.getElementById("box"));
// 方式2：可以使用入口函數(shù)的形式(見head中的代碼)
</script>
</body>
</html>
樣式操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div id="box"></div>
<script>
//1 獲取元素
var box = document.getElementById("box");
//2 樣式操作
//通過js設(shè)置的樣式推掸，在標簽的行內(nèi)生效
//第一步需要先用標簽.style，可以獲取到這個標簽的所有樣式
//console.log(box.style);
//第二步是用標簽.style.具體的樣式名
//設(shè)置的樣式值為字符串類型驻仅，如果有單位谅畅，加單位
box.style.width = "100px";
box.style.height = "100px";
//在css中加-的樣式名，在js中使用時去除-噪服，并且后面的首字母大寫（駝峰命名法）
//z-index zIndex font-size fontSize
box.style.backgroundColor = "red";
</script>
</body>
</html>
文本操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div id="box">
我是內(nèi)容
<p>我是p標簽</p>
</div>
<script>
var box = document.getElementById("box");
//1 標簽設(shè)置文本使用innerHTML屬性
//1.1 設(shè)置純文本
//box.innerHTML = "我是box的內(nèi)容";
//1.2 設(shè)置文本和標簽
//如果在設(shè)置的內(nèi)容中含有標簽的形式毡泻，innerHTML屬性執(zhí)行時會進行標簽的生成
box.innerHTML = "我是內(nèi)容<p>我是子標簽p</p>";
//2 獲取內(nèi)容
console.log(box.innerHTML);
//覆蓋的問題：
//當(dāng)我們使用innerHTML屬性進行內(nèi)容設(shè)置時，會對原內(nèi)容進行覆蓋
//box.innerHTML = "我是新的內(nèi)容";
//解決的方式：
//可以使用innerHTML+=的方式防止覆蓋
//box.innerHTML = box.innerHTML + "我是新的內(nèi)容";
box.innerHTML += "我是新的內(nèi)容";//簡化后
//新的問題：雖然新舊內(nèi)容同時存在粘优，但是實際上內(nèi)部的子標簽新舊是不同的（重新生成仇味，長得一樣）呻顽。
</script>
</body>
</html>
getElementsByTagName的基本使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
//注意：我們在DOM中獲取的所有數(shù)組形式的數(shù)據(jù)，均為偽數(shù)組形式
//元素的獲取方式2：根據(jù)標簽名獲取元素（可以同時操作多個標簽）
// 基本語法： document.getElementsByTagName("標簽名");
//var divs = document.getElementsByTagName("div");
//console.log(divs);
//我們發(fā)現(xiàn)丹墨，獲取的結(jié)果調(diào)用數(shù)組方法報錯廊遍，說明不支持數(shù)組方法，是偽數(shù)組贩挣。
arr= [1,2,4,5]
arr.push();
/*//需求：給每個div設(shè)置樣式
//1 遍歷divs
for (var i = 0; i < divs.length; i++) {
//2 取出偽數(shù)組divs中的每個標簽后才能進行樣式操作
divs[i].style.width = "100px";
divs[i].style.height = "100px";
divs[i].style.backgroundColor = "red";
divs[i].style.marginBottom = "10px";
}*/
</script>
</body>
</html>
在某個標簽內(nèi)部根據(jù)標簽名獲取元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
//getElementsByTagName前面的元素是可以更改的
//如果使用 標簽.getElementsByTagName() 表示在這個標簽內(nèi)部根據(jù)標簽名獲取元素
var box = document.getElementById("box");
var divs = box.getElementsByTagName("div");//只獲取到了box內(nèi)部的div
//console.log(divs);
for (var i = 0; i < divs.length; i++) {
divs[i].style.width = "100px";
divs[i].style.height = "100px";
divs[i].style.backgroundColor = "red";
divs[i].style.marginBottom = "10px";
}
</script>
</body>
</html>
其他需要注意的問題：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div id="box"></div>
<p></p>
<script>
//1 根據(jù)id名,由于id名具有唯一性喉前，獲取的時候getElementById的前面的元素不能修改
// document.getElementById()
//2 由于id名的唯一性，所以瀏覽器允許不獲取直接使用
// 不是規(guī)范寫法揽惹，不推薦使用
//console.log(box);
//3 我們也可以使用標簽名的獲取元素獲取單一的一個元素
//var text = document.getElementsByTagName("p");
//console.log(text);
////注意被饿，盡管獲取的標簽只有一個，結(jié)果依然是偽數(shù)組搪搏，需要取出內(nèi)部的標簽后再進行操作狭握。
////text.style.width = "100px";
//text[0].style.width = "100px";
//簡化方式：
var text = document.getElementsByTagName("p")[0];
</script>
</body>
</html>
隔行變色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//1 獲取元素
var lis = document.getElementsByTagName("li");
//2 遍歷取出所有l(wèi)i
for (var i = 0; i < lis.length; i++) {
//lis[i] 是每個li
//3 需要根據(jù)奇偶不同，設(shè)置不同背景色
if (i % 2 == 0) {
//i為偶數(shù)疯溺，lis[i]是奇數(shù)行
lis[i].style.backgroundColor = "red";
} else {
//i為奇數(shù)论颅，lis[i]是偶數(shù)行
lis[i].style.backgroundColor = "blue";
}
}
</script>
</body>
</html>
效果展示
隔行變色.png
常用功能的封裝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div id="box"></div>
<script>
//為什么要封裝函數(shù)功能?
//1 方便代碼的使用（寫起來更方便）
//2 增加代碼的可讀性
//根據(jù)id名獲取元素的封裝：
var box = id("box");
/**
* 根據(jù)id名獲取元素
* @param idName 傳入字符串的id名
* @returns {Element} 返回獲取到的標簽
*/
function id(idName) {
return document.getElementById(idName);
}
//樣式設(shè)置操作的基本封裝：
//box.style.width = "100px";//原生的書寫方式
// setCss(box, "width", "100px");//我們期望的使用方式
// setCss(box, "height", "100px");
// setCss(box, "backgroundColor", "red");
function setCss(tag, styleName, styleValue) {
//注意，styleName的值是用戶傳入的字符串囱嫩，所以使用的時候需要使用[]的屬性訪問方式
tag.style[styleName] = styleValue;
}
//同樣的功能恃疯，在使用時需要多次調(diào)用，對性能的消耗較大
//所以需要對setCss功能進行修改墨闲，使這個函數(shù)可以一次進行多個樣式的設(shè)置
//setCss(box, "width", "100px", "height", "100px");
//我們發(fā)現(xiàn)今妄，傳入多個需要修改的樣式時，參數(shù)個數(shù)不定鸳碧，使用時不太方便
//可以采用對象的傳入方式
setCss(box, {
width: "150px",
height: "150px",
backgroundColor: "red"
});
function setCss(tag, obj) {
//需要將用戶設(shè)置的每一組數(shù)據(jù)取出盾鳞，依次進行樣式設(shè)置操作即可
for (var k in obj) {
//k - 屬性名 - 字符串類型 - 也就是需要設(shè)置的樣式名
//obj[k] - 屬性值 - 代表了要設(shè)置的樣式值
tag.style[k] = obj[k];
}
}
//關(guān)于返回值問題的說明：
//1 所有的設(shè)置操作不需要返回值。
//2 所有的獲取操作均需要返回值瞻离。
</script>
</body>
</html>
事件
<script>
//事件：用于捕捉用戶操作的一種方式
//事件的三個組成部分：
//1 觸發(fā)事件的東西
//2 如何觸發(fā)的
//3 觸發(fā)后什么結(jié)果
//車撞樹的這個例子中腾仅，車是觸發(fā)事件的東西，觸發(fā)方式是撞套利，結(jié)果(樹倒了推励，車壞了，人被砸了肉迫，但是沒事)
//事件三要素：
//1 事件源(被動觸發(fā)的)
//2 事件類型(點擊验辞，移入。昂拂。受神。)
//3 事件處理程序：類型為函數(shù)（只有函數(shù)才可以保存一部分代碼）
//語法：
//事件源.事件類型 = function () {
//事件處理程序
//}
</script>
點擊事件效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<button id="btn">按鈕</button>
<script>
//點擊按鈕，彈出一個提示框格侯，提示今天天氣不錯
//事件源 - 按鈕
//事件類型 - 點擊 - onclick
//事件處理程序 - 彈出一個提示框鼻听，提示今天天氣不錯
var btn = document.getElementById("btn");
//事件源.事件類型 = function () {
//事件處理程序
//}
btn.onclick = function () {
alert("今天天氣不錯");
};
</script>
</body>
</html>
標簽行內(nèi)屬性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<div id="box" title="呵呵"></div>
<script>
//標簽行內(nèi)自帶的屬性
//可以通過 標簽.屬性名 的方式進行訪問
var box = document.getElementById("box");
//獲取操作:
console.log(box.id);
//設(shè)置操作:
box.id = "box3";
console.log(box.title) // 呵呵
</script>
</body>
</html>
圖片切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天氣不錯</title>
</head>
<body>
<button id="btn1">切換為圖片2</button>
<button id="btn2">切換為圖片1</button>
<script>
//1 獲取元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var pic = document.getElementById("pic");
//2 按鈕1 點擊后切換圖片為222.jpg
btn1.onclick = function () {
pic.src = "images/222.jpg";
};
//3 按鈕2 點擊后切換為111.jpg
btn2.onclick = function () {
pic.src = "images/111.jpg";
};
</script>
</body>
</html>
