JavaScript(2)---DOM詳解
JavaScript(2)---DOM詳解
1、DOM概念
什麼是DOMjavascript
DOM全稱爲文本對象模型(Document Object Model),它定義了全部HTML元素的對象和屬性，以及訪問他們的方法。它的主要做用包括：html
改變HTML 元素 , 改變HTML屬性 , 改變CSS 樣式，對頁面中的全部事件作出反應。前端
一、DOM 節點樹
概念 DOM模型將整個HTML文檔當作一個樹形結構，並用document對象表示該文檔，樹的每一個子節點表示HTM檔中的不一樣內容。java
如圖node
上圖對應的html代碼以下數組
<!DOCTYPE html>
<html>
<head>
<title>標題</title>
</head>
<body>
<h1>小小</h1>
<a href="www.xx.com">連接</a>
</body>
</html>
經過這幅圖也能夠看出節點樹中有如下幾種關係app
一、父級關係（圖中 html 是 head 的父親,head是title的父親。） 二、子級關係（圖中 head 是 html 的兒子,title是head的兒子。） 三、兄弟關係 （圖中 head 和 body是兄弟關係。p 和 h1 是兄弟關係。）
二、DOM 節點類型
從上圖部分，我用四種顏色區分了不一樣節點的類型,每一個節點對應的nodeType也是不一致的。dom
三、DOM 節點操做
節點查詢操做函數
節點增刪操做學習
節點屬性操做
2、查詢示例
這裏經過舉例去更好的理解上面的一些操做。
一、查詢子元素
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
二、查詢父元素
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>
三、查詢兄弟元素
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>
3、增刪改示例
一、增長子節點
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>
運行
二、移除子節點
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>
運行
三、替換子節點
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>
運行
四、替換指定位置節點
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>
運行
4、樣式示例
語法
元素.style.樣式名 = 樣式值
這裏有關修改樣式注意的點有
一、 若是 CSS 樣式名中含有 - 這種名稱在JS 中是不合法的，例如： background-color咱們須要將這種樣式名，修改成 駝峯命名法backgroundColor 二、經過 style 屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先級，因此經過JS 修改的樣式每每會當即顯示。 三、可是若是在樣式中寫了 !important 則此時樣式會有最高的優先級，即便經過 JS 也不能覆蓋這個樣式。此時將會致使 JS 修改的樣式失效，因此儘可能 不要給樣式添加 !important 四、經過 style 讀取也都是內聯樣式、沒法讀取樣式表中的樣式。
一、設置樣式
代碼示例
<!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>
運行
5、綜合示例
一、霓虹燈特效示例
先看效果
代碼示例
<!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，因此會有效果。
二、顯示系統時間,秒一直動
效果
代碼
<!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)
相關文章
- 1. systemd詳解詳解
- 2. CAN詳解--協議詳解
- 3. LinkedList詳解（源碼詳解）
- 4. RNN詳解及BPTT詳解
- 5. JSTL詳解 JSTL詳解
- 6. 【知識詳解】Https詳解
- 7. [Java] volatile 詳詳解！
- 8. 註解詳解
- 9. 詳解
- 10. Lucene索引詳解（IndexWriter詳解、Document詳解、索引更新）
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • Flink 數據傳輸及反壓詳解
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. systemd詳解詳解
- 2. CAN詳解--協議詳解
- 3. LinkedList詳解（源碼詳解）
- 4. RNN詳解及BPTT詳解
- 5. JSTL詳解 JSTL詳解
- 6. 【知識詳解】Https詳解
- 7. [Java] volatile 詳詳解！
- 8. 註解詳解
- 9. 詳解
- 10. Lucene索引詳解（IndexWriter詳解、Document詳解、索引更新）