JavaScript(2)---DOM詳解
一、DOM概念
什么是DOM
DOM全稱為文本對象模型(Document Object Model),它定義了所有HTML元素的對象和屬性，以及訪問他們的方法。它的主要作用包括：
改變HTML 元素 , 改變HTML屬性 , 改變CSS 樣式，對頁面中的所有事件做出反應。
1、DOM 節點樹
概念 DOM模型將整個HTML文檔看成一個樹形結構，並用document對象表示該文檔，樹的每個子節點表示HTM檔中的不同內容。
如圖
上圖對應的html代碼如下
<!DOCTYPE html>
<html>
<head>
<title>標題</title>
</head>
<body>
<h1>小小</h1>
<a href="www.xx.com">鏈接</a>
</body>
</html>
通過這幅圖也可以看出節點樹中有以下幾種關系
1、父級關系（圖中 html 是 head 的父親,head是title的父親。）
2、子級關系（圖中 head 是 html 的兒子,title是head的兒子。）
3、兄弟關系 （圖中 head 和 body是兄弟關系。p 和 h1 是兄弟關系。）
2、DOM 節點類型
從上圖部分，我用四種顏色區分了不同節點的類型,每個節點對應的nodeType也是不一致的。
3、DOM 節點操作
節點查詢操作
節點增刪操作
節點屬性操作
二、查詢示例
這里通過舉例去更好的理解上面的一些操作。
1、查詢子元素
children : 可以獲取當前元素的所有子元素，它是不包含空白的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="father">
<p>今天時間</p>
<p>2019.12.09</p>
<p>22:15分</p>
</div>
</body>
<script>
window.onload = function () {
var father = document.getElementById("father");
var all = father.children; // 獲取 father 下邊所有的子元素
console.log("數組的長度為:" + all.length);
};
</script>
</html>
輸出
數組的長度為:3
2、查詢父元素
parentNode ：獲取當前元素的父節點(父元素)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="father">
<p id="childNode">我是子節點</p>
</div>
</body>
<script>
window.onload = function () {
var p = document.getElementById("childNode"); //獲取p元素
var parent = p.parentNode; // 獲取父元素
console.log(parent);
};
</script>
</html>
輸出
<div id="father">
<p id="childNode">我是子節點</p>
</div>
3、查詢兄弟元素
previousElementSibling 獲取當前元素的前一個兄弟元素(哥哥元素)
nextElementSibling 獲取當前元素的后一個兄弟元素(弟弟元素)
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="previous" name="1111">哥哥元素</p>
<p id="my">本元素</p>
<p id="next">弟弟元素</p>
</body>
<script>
window.onload = function () {
var my = document.getElementById("my"); // 獲取我的元素
var previous = my.previousElementSibling; // 獲取哥哥元素
var next = my.nextElementSibling; // 獲取弟弟元素
console.log(previous);
console.log("---------------------");
console.log(next);
};
</script>
</html>
輸出
<p id="previous" name="1111">哥哥節點</p>
---------------------
<p id="next">弟弟節點</p>
三、增刪改示例
1、增加子節點
appendChild() : 向一個父節點中添加一個新的子節點 父節點.appendChild(子節點);
代碼示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script>
window.onload = function () {
// 獲取到 btn
var btn01 = document.getElementById("btn");
// 添加點擊事件
btn01.onclick = function () {
// 創建一個 p 標簽
var p = document.createElement("p");
// 創建一個文本節點
var txt = document.createTextNode("我是新創建p標簽中的內容...");
// 把文本節點添加到 p 標簽中
p.appendChild(txt);
// 把 p 標簽添加到 body 中
var body = document.body; // 獲取body
body.appendChild(p);
};
};
</script>
<body>
<button id="btn">創建一個p標簽</button>
</body>
</html>
運行
2、移除子節點
removeChild() ：刪除一個子節點 父節點.removeChild(子節點);
代碼示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">刪除一個子節點</button>
<ul id="uls">
<li>我是第一個子節點</li>
<li>我是第二個子節點</li>
<li>我是第三個子節點</li>
<li>我是第四個子節點</li>
</ul>
</body>
<script>
window.onload = function () {
// 獲取到 btn
var btn = document.getElementById("btn");
// 添加點擊事件,刪除第三個子節點
btn.onclick = function () {
//獲取第三個子節點
var node = document.getElementsByTagName("li")[2];
// 獲取父節點
var ul = document.getElementById("uls");
ul.removeChild(node); // 刪除子節點
};
};
</script>
</html>
運行
3、替換子節點
replaceChild() : 可以使用指定的子節點來替換已有的子節點 父節點.replaceChild(新節點,舊節點);
代碼示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">替換按鈕</button>
<p id="pNode">我是舊節點 p </p>
</body>
<script>
window.onload = function () {
// 獲取到 btn01
var btn = document.getElementById("btn");
// 添加點擊事件
btn.onclick = function () {
// 獲取p標簽
var p = document.getElementById("pNode");
// 獲取父節點
var body = document.body;
//創建一個新的節點，用於替換舊節點
var a = document.createElement("a");
var txt = document.createTextNode("我是新的節點 a 哦~");
a.appendChild(txt);
// 替換節點
body.replaceChild(a, p);
};
};
</script>
</html>
運行
4、替換指定位置節點
insertBefore() : 可以在指定的子節點前插入一個新的子節點 父節點.insertBefore(新節點,舊節點);
代碼示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn01">替換子節點</button>
<p id="pNode">我是舊節點 p </p>
</body>
<script>
window.onload = function () {
// 獲取到 btn01
var btn01 = document.getElementById("btn01");
// 添加點擊事件
btn01.onclick = function () {
// 獲取p標簽
var p = document.getElementById("pNode");
// 獲取父節點
var body = document.body;
//創建一個新的節點，用於插入到 p 元素前面
var a = document.createElement("a");
var txt = document.createTextNode("我是新的節點 a 哦~");
a.appendChild(txt);
// 插入一個新的節點 a
body.insertBefore(a, p);
};
};
</script>
</html>
運行
四、樣式示例
語法
元素.style.樣式名 = 樣式值
這里有關修改樣式注意的點有
1、 如果 CSS 樣式名中含有 - 這種名稱在JS 中是不合法的，例如： background-color我們需要將這種樣式名，修改為 駝峰命名法backgroundColor
2、通過 style 屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先級，所以通過JS 修改的樣式往往會立即顯示。
3、但是如果在樣式中寫了 !important 則此時樣式會有最高的優先級，即使通過 JS 也不能覆蓋這個樣式。此時將會導致 JS 修改的樣式失效，所以盡量 不要給樣式添加 !important
4、通過 style 讀取也都是內聯樣式、無法讀取樣式表中的樣式。
1、設置樣式
代碼示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/* 設置一個基本的樣式 */
#box{
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<button id="btn">更換樣式</button>
<br>
<br>
<div id="box"></div>
</body>
<script>
window.onload = function () {
// 獲取到 btn
var btn = document.getElementById("btn");
// 添加點擊事件
btn.onclick = function () {
// 獲取 box
var box = document.getElementById("box");
box.style.width = "150px"; // 修改寬度
box.style.height = "150px"; // 修改高度
box.style.backgroundColor = "deeppink"; // 修改背景顏色
};
};
</script>
</html>
運行
五、綜合示例
1、霓虹燈特效示例
先看效果
代碼示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
<script>
var tName="北京首都歡迎您";
var tLen=tName.length;
document.write("<div id='a' style='font-size:50px;'>"+tName+"</div>" );
var color=new Array("#FFCC00","#3333FF","FFCCAA","#FF0000","#FFCC33","#CC33FF");
var ic=0; //這里很關鍵，一定要設置全局變量
function DColor(){
var StrName=""; //這個很有必要，不然無法疊加單個漢字
for(var i=0;i<tLen;i++){ //下面一步才是精髓，設置每一個漢子不同顏色，然后拼接起來
var StrName=StrName+"<font color="+color[ic]+">"+tName.substring(i,i+1)+"</font>";
ic=ic+1; //下一個字下一個顏色
if(ic==color.length){
ic=0; //不設置為零，因為他是全局變量，那么會一直加到數組越界
}
}
a.innerHTML=StrName; //可以通過id.innerHTML改變界面的字的顏色
//設置時間的變化 改變情況
setTimeout("DColor()",200); //setTimeout代表每隔200毫秒運行一次函數
}
DColor(); //這個代表直接開始運行這個函數，而不用通過觸發事件
</script>
</html>
核心點：
核心點一 : 是ic=0寫成全局變量，假如寫在方法里，那么每一次初始化結果都一樣，那么也不會有霓虹燈效果
核心點二 : color.length和tName.length如果相等同樣也不會產生效果，因為每一次結束ic還是=0，而這里第一次DColor(),ic=0,第二次調用ic初始值=1，所以會有效果。
2、顯示系統時間,秒一直動
效果
代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="showTime()"> <!-- 當加載時就執行 -->
<label id="show">顯示系統時間</label> <!-- 將系統時間顯示在這個位置 -->
</body>
<script type="text/javascript">
function showTime(){
var objDate =new Date(); //得到系統時間對象
var year =objDate.getFullYear(); //獲取年份
var month=objDate.getMonth()+1;//獲取月份
var date =objDate.getDate();//獲取日期
var hours=objDate.getHours();//小時
var minutes=objDate.getMinutes();//分鍾
var seconds=objDate.getSeconds();//秒
var day =objDate.getDay(); //獲取星期幾
show.innerHTML=""+year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds +" 周"+day; //通過id改變界面顯示內容
//每隔1秒刷新一次
var timeId=setTimeout(showTime,1000);
}
</script>
</html>
參考
你如果願意有所作為，就必須有始有終。(21)