JavaScript(2)---DOM詳解
阿新 • • 發佈：2020-01-31
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>
輸出
陣列的長度為:32、查詢父元素
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>參考
1、前端學習記錄之Javascript-DOM
2、JavaScript DOM
你如果願意有所作為，就必須有始有終。(21)