JavaScript---Dom樹詳解,節點查找方式(直接(id,class,tag),間接(父子,兄弟)),節點操作(增刪改查,賦值節點,替換節點,),節點屬性操作(增刪改查),節點文本的操作(增刪改查),事件
一丶DOM樹
DOM：文檔對象模型。DOM 為文檔提供了結構化表示，並定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規范。
DOM就是由節點組成的：HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹.如下圖
# 在HTML中,一切皆節點. 一切皆節點對象
# 結構:
# 元素節點: HTML標簽
# 文本節點: 標簽中的文字
# 屬性節點: 標簽的屬性
# 利用dom可以操作以下:
找對象(元素節點)
設置元素的屬性值
設置元素的樣式
動態創建和刪除元素
事件的觸發:事件源,事件,事件的驅動程序
二丶節點查找(直接查找和間接查找)
直接查找:
DOM節點的獲取方式其實就是獲取事件源的方式
操作元素節點，必須首先找到該節點。有三種方式可以獲取DOM節點：
//方式一：通過id獲取單個標簽
var div1 = document.getElementById("box1");
//方式二：通過 標簽名 獲得 標簽數組，所以有div
var arr1 = document.getElementsByTagName("div");
//方式三：通過 類名 獲得 標簽數組，所以有p1類
var arr2 = document.getElementsByClassName("p1");
//----- div1 ,arr1,arr2 都是對象
//其中方式二、方式三獲取的是標簽數組，那么習慣性是先遍歷之后再使用。
//即便如此，這一個值也是包在數組里的。這個值的獲取方式如下：
document.getElementsByTagName("div1")[0]; //取數組中的第一個元素
document.getElementsByClassName("hehe")[0]; //取數組中的第一個元素
間接查找:
可以查找當前節點的 子父節點 ,兄弟節點 . 如下圖👇:
獲得父兄節點代碼:
// 獲取父節點, 語法: 節點.parentNode
var d1 = document.getElementById('div1');
var parNode = d1.parentNode();
// 獲取兄弟節點
/* 獲取下一個 節點 ,語法: 節點. nextSibling */
nextSibling：指的是下一個節點（包括標簽、空文檔和換行節點）
火狐、谷歌、IE9+版本：都指的是下一個節點（包括標簽、空文檔和換行節點）。
var d1 = document.getElementById('div1');
var nextTag = d1.nextSibling();
/* 獲取上一個 節點 ,語法: 節點. previousSibling */
previousSibling：
火狐、谷歌、IE9+版本：都指的是前一個節點（包括標簽、空文檔和換行節點）。
IE678版本：指前一個元素節點（標簽）。
var d1 = document.getElementById('div1');
var preTag = d1.previousSibling();
/* 獲得下一個 元素 節點 ,語法: 節點. nextElementSibling */
IE678版本：指下一個元素節點（標簽）。
nextElementSibling：火狐、谷歌、IE9+版本：指的是下一個元素節點（標簽）。
var d1 = document.getElementById('div1');
var nextElement = d1.nextElementSibling();
/* 獲得上一個 元素 節點 ,語法: 節點. previousElementSibling */
previousElementSibling：
火狐、谷歌、IE9+版本：都指的是前一個元素節點（標簽）。
var d1 = document.getElementById('div1');
var preElement = d1.previousElementSibling();
// 獲得任意一個兄弟節點
var d1 = document.getElementById('div1');
var parChild = d1.parentNode.children[index]; //隨意得到兄弟節點
獲得子節點代碼:
/* 獲取第一個子節點 | 子元素 */
firstChild：
火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標簽、空文檔和換行節點）。
IE678版本：指第一個子元素節點（標簽）。
firstElementChild：
火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標簽）
//語法: 第一個子元素節點 = 節點.firstElementChild || 節點.firstChild
var d1 = document.getElementById('div1');
var firstEle = d1.firstElementChild(); //得到第一個元素
var firstNode = d1.firstChild(); //得到第一個節點
/* 獲取最后一個子節點 | 最后一個子元素節點 */：
lastChild：
火狐、谷歌、IE9+版本：都指的是最后一個子節點（包括標簽、空文檔和換行節點）。
IE678版本：指最后一個子元素節點（標簽）。
lastElementChild：
火狐、谷歌、IE9+版本：都指的是最后一個子元素節點（標簽）。
//語法: 最后一個子元素節點 = 節點.lastElementChild || 節點.lastChild
var d1 = document.getElementById('div1');
var lasEle = d1.lastElementChild(); //得到最后一個元素
var lastNode = d1.lastChild(); //得到最后一個節點
/* 獲得所有子節點,返回一個數組 */
//1.返回的是指定元素的子節點的集合
//語法:子節點數組 = 父節點.childNodes; //獲取所有節點。
var d1 = document.getElementById('div1');
var allNode = d1.childNodes(); //div節點的獲取所有節點。
//2.返回的是指定元素的子元素節點的集合,它只返回HTML節點，甚至不返回文本節點.所有瀏覽器都支持
//語法:子節點數組 = 父節點.children; //獲取所有節點。用的最多。
var d1 = document.getElementById('div1');
var allNodeChild = d1.children(); //獲得div節點的所有子節點
/* 額外 */
nodeType == 1 //表示的是元素節點（標簽） 。記住：元素就是標簽。
nodeType == 2 //表示是屬性節點 了解
nodeType == 3 //是文本節點 了解
三丶節點操作
節點的訪問關系都是屬性。而節點的操作都是函數（方法）。
節點自身操作:
創建節點
/* 創建節點 */
// 語法: 新的標簽(元素節點) = document.createElement("標簽名");
var p=document.createElement('p');
插入節點
/* 插入節點 */
//方式1：父節點的最后插入一個新的子節點。
父節點.appendChild(新的子節點);
//創建一個節點,插入到div1標簽末尾
var p=document.createElement('p');
var div=document.getElementById('div1');
div.appendChild(p);
//方式2：在參考節點前插入一個新的節點。如果參考節點為null，那么他將在父節點最后插入一個子節點。
父節點.insertBefore(新的子節點,作為參考的子節點);
//創建一個節點,插入到div1標簽第一個位置
var p=document.createElement('p');
var div=document.getElementById('div1');
div.insertBefore(p,參考節點);
刪除節點
/* 刪除節點 */
//用父節點刪除子節點。必須要指定是刪除哪個子節點。
父節點.removeChild(子節點);
var div1=document.getElementById('div1');
div.removeChild('p'); //刪除p標簽
var p1=document.getElementById('p1');
div.removeChild(p1); //刪除id為 p1 的標簽
//刪除自己這個節點
node1.parentNode.removeChild(node1);
var div1=document.getElementById('div1');
div1.parentNode.removeChild(div1); // 刪除自身節點
復制節點
/* 復制節點 */
//括號里不帶參數和帶參數false，效果是一樣的。不帶參數/帶參數false：只復制節點本身，不復制子節點。
要復制的節點.cloneNode();
var p1=document.getElementById('p1');
var p2=p1.cloneNode(); //只克隆一個p節點
//帶參數true：既復制節點本身，也復制其所有的子節點。
要復制的節點.cloneNode(true);
var p1=document.getElementById('p1');
var p2=p1.cloneNode(); //克隆一個p節點,包括p節點下的所有節點信息包括文本內容
替換節點
/* 替換節點 */
//找到這個父標簽里面的要被替換的子標簽，然后用新的標簽將該子標簽替換掉
父節點.replaceChild(newnode, 某個節點);
// 案例
<div id="box">
<p id="p1">這是一個段落</p>
<p id="p2">第二個段落</p>
<div id="div1">這是div</div>
</div>
<script>
var box=document.getElementById("box"); //找到父元素
var p1=document.getElementById("p1"); //找到要替換的元素
var p3=document.createElement('p');//創建要替換的元素
p3.innerHTML="這是第三個段落"; //為創建的元素賦值
box.replaceChild(p3,p1); //替換節點
p1.parentNode.replaceChild(p3,p1); //通過parentNode節點替換
</script>
節點屬性操作:
獲取節點的屬性值、設置節點的屬性值、刪除節點的屬性。
/* 獲取節點的屬性值 方式一 : 直接操作標簽 */
// <input type="text" id='d1' name="" value="" >
var d1=getElementById('d1'); //獲取id為d1的標簽對象
// 元素節點.屬性;
d1.name
// 元素節點[屬性];
d1.['name']
/* 獲取節點的屬性值 方式二 : 標簽作為DOM節點 */
//元素節點.getAttribute("屬性名稱");
// <input type="text" id='d1' name="" value="" >
var d1=getElementById('d1'); //獲取id為d1的標簽對象
var name=d1.getAttribute('name'); //獲得d1標簽的name屬性
設置節點的屬性值
/* 方式1: 語法: 節點對象.屬性 */
var d1=getElementById('d1'); //獲取id為d1的標簽對象
d1.name='div1'; // d1是標簽對象,name是其屬性.以.的形式去獲取,並賦值
/* 方式2: 語法: 元素節點.setAttribute(屬性名,屬性值) */
var d1=getElementById('d1'); //獲取id為d1的標簽對象
d1.setAttribute('name','div2'); // 給name屬性設置名字為div2
刪除節點的屬性
/* 刪除節點的屬性 語法: 元素節點.removeAttribute(屬性名)*/
var d1=getElementById('d1'); //獲取id為d1的標簽對象
d1.removerAttribute('name'); //移除name屬性
節點文本操作
獲取文本的節點值
/* 獲取文本節點的值 */
var divEle = document.getElementById("d1");
divEle.innerText // 獲取該標簽和內部所有標簽的文本內容. 只能是文本內容
divEle.innerHTML // 獲取的是該標簽內所有內容包括: 文本 和 HTML標簽.
設置文本節點的值
/* 設置文本節點的值 */
var divEle = document.getElementById("d1");
divEle.innerText='設置標簽包裹的值'
獲取值操作 (節點.value)
/* 適用於以下標簽，用戶輸入或者選擇類型的標簽：input 、select 、textarea */
var inp=document.getElementById('inp')
console.log(inp.value)
var sel=document.getElementById('sel')
console.log(sel.value)
var txt=document.getElementById('txt')
console.log(txt.value)
class操作
/* 獲得類的值 */
標簽對象.classList //獲取所有樣式類名(字符串) ,首先獲取標簽對象
/* 刪除類的值 */
標簽對象.classList.remove(cls) //刪除指定類
/* 添加類的值 */
標簽對象.classList.add(cls) //添加類
/* 判斷類是否包含cls值 */
標簽對象.classList.contains(cls) //存在返回true，否則返回false
/* 類的值存在就刪除 */
標簽對象.classList.toggle(cls) //存在就刪除，否則添加，toggle的意思是切換,有了就給你刪除，如果沒有就給你加一個
css屬性操作
/* 給標簽對象添加屬性 */
obj.style.backgroundColor="red"
四丶事件
核心
事件源,事件,事件驅動程序
（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
（3）書寫事件驅動程序：關於DOM的操作
示例代碼
<body>
<div id='d1'></div>
</body>
<script>
// 1.獲取事件源
var d1=document.getElementById('d1');
// 2.綁定事件
d1.onclick=function(){
// 3.事件的執行
alert('彈框');
}
</script>
常見的事件類型:
獲得事件源的方式:
// 根據 Id 獲取,事件源對象
var d1=document.getElementById('d1');
// 根據 class類 獲取,事件源對象
var d2=document.getElementsByClassName('div1');
// 根據 標簽 獲取,事件源對象
var d3=document.getElementsByTagName('d1');
綁定事件的方式:
/* 方式一: 直接綁定 匿名函數 */
<div id='d1'></div>
<script>
var d1=document.getElementById('d1');
// 綁定匿名函數
d1.onclick=function(){
alert('彈窗');
}
</script>
/* 方式二: 單獨定義一個函數, 在綁定事件 */
<div id='d1'></div>
<script>
var d1=document.getElementById('d1');
// 綁定click_event函數
d1.onclick=click_event;
// click_event函數單獨寫
function click_event(){
alert('彈框');
}
</script>
/* 方式三: 行內定義函數 */
// 定義行內事件
<div id='d1' onclick='click_event()'></div>
<script>
// click_event函數單獨寫
function click_event(){
alert('彈框');
}
</script>
五丶事件案例
紅綠燈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>紅綠燈</title>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
border-radius: 50px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</body>
<script>
var r = document.getElementById('red');
var g = document.getElementById('green');
var y = document.getElementById('yellow');
setInterval(fn,2000)
function fn() {
if (r.classList.contains('red')) {
r.classList.remove('red');
y.classList.add('yellow');
} else if (y.classList.contains('yellow')) {
y.classList.remove('yellow');
g.classList.add('green')
} else {
g.classList.remove('green');
r.classList.add('red');
}
}
</script>
</html>
字體隨機變色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="contant">不想變色</div>
</body>
<script>
var con=document.getElementById('contant');
setInterval(fn,200);
function fn() {
//#000000 - # ffffff
// 1.得到16進制顏色數字: 0-16 :
// 隨機生成公式: min+(max-min)*Math.random()===>0+((16-0)**6-1)*Math.random()
// 2. 向上取整 ceil()函數
// 3.將10進制的顏色轉換為16進制
color=Math.ceil((16**6-1)*Math.random(),16)
// console.log(color);
con.style.color='#'+color;
}
</script>
</html>
廣告業關閉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
div{
width: 100%;
height: 30px;
background-color: firebrick;
line-height: 30px;
color: white;
text-align: center;
}
button{
float: right;
}
</style>
</head>
<body>
<div id="adv">這是一句廣告詞<button id="btn">X</button></div>
<img src="1.jpg" alt="">
</body>
<script>
var adv=document.getElementById('adv');
var btn=document.getElementById('btn')
function closeAdv(){
adv.style.display='none';
}
//手動點擊 關閉廣告
btn.onclick=function () {
adv.style.display='none';
};
// 定時任務, 3秒自動關閉廣告
if (adv.style.display!='none'){
setTimeout(closeAdv,3000);
}
</script>
</html>
select框聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聯動查詢</title>
<style>
select{
width: 300px;
background-color: orange;
}
</style>
</head>
<body>
<select name="province" id="pro">
<option value="">請選擇省份:</option>
</select>
<select name="city" id="city">
<option value="null">請選擇城市:</option>
</select>
</body>
<script>
data={'河南省':['安陽市','鄭州市','林州市'],'河北省':['邯鄲市','廊坊市','石家庄'],'浙江省':['杭州市','溫州市','呱唧呱唧']}
var pro=document.getElementById('pro');
var city=document.getElementById('city');
for (var el in data){
// console.log(el);
var opt_pro=document.createElement('option');
opt_pro.innerText=el;
pro.append(opt_pro);
}
// 使用 onchange事件, id為pro的表的值更改了.
pro.onchange=function () {
// 清空city標簽內的數據
city.innerText=null;
// 獲取 用戶選擇的省份的 索引
/*options是或用戶選擇的當前項,selectedIndex是獲得選擇的索引*/
var ind=this.options.selectedIndex;
// 根據索引 獲得文本內容
var pro_sel=this.children[ind].innerText;
// 用戶選擇城市走eles代碼塊,沒有選擇走if代碼塊
if (pro_sel=='請選擇省份:'){
var opt_cit=document.createElement('option');
opt_cit.innerText='請選擇城市:';
city.append(opt_cit);
}else {
for (var el2 in data[pro_sel]){
//循環取值, 創建一個新的option標簽
var opt_cit=document.createElement('option');
//賦值
opt_cit.innerText=data[pro_sel][el2];
//添加到city標簽內
city.append(opt_cit);
}
}
}
</script>
</html>
動態顯示時間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態顯示時間</title>
</head>
<body>
<input type="text" id="gt">
<button id="st">顯示時間</button>
<button id="ct">暫停時間</button>
</body>
<script>
var gt=document.getElementById('gt');
var st=document.getElementById('st');
var ct=document.getElementById('ct');
function fn() {
var nd=new Date();
// gt.value 是給input框賦值
gt.value=nd.toLocaleString();
}
//點擊顯示時間
st.onclick=function () {
ret=setInterval(fn,1000);
}
// 點擊暫停時間
ct.onclick=function(){
clearInterval(ret);
}
</script>
</html>
模態框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模態對話框</title>
<style>
.color-body{
background-color: gray;
}
div{
display:none;
position: fixed;
width: 370px;
height: 300px;
top: 150px;
left: 570px;
background-color: wheat;
}
button{
float: right;
position: relative;
top: -20px;
}
</style>
</head>
<body id="body">
<input type="button" id="btn" value="模態框">
<div id="mtk">
<input type="text" placeholder="請輸入內容">
<input type="text" placeholder="請輸入內容">
<input type="text" placeholder="請輸入內容">
<input type="text" placeholder="請輸入內容">
<button id="btn-close">X</button>
</div>
</body>
<script>
var btn=document.getElementById('btn');
var body=document.getElementById('body');
var mtk=document.getElementById('mtk');
var btn_close=document.getElementById('btn-close');
// 點擊彈出對話框
btn.onclick=function () {
btn.style.display='none';
body.classList.add('color-body');
mtk.style.display='inline-block';
}
//點擊X退出對話框
btn_close.onclick=function () {
btn.style.display='block';
body.classList.remove('color-body');
mtk.style.display='none';
}
</script>
</html>
留言板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>留言板</h1>
<div id="convalue"></div>
<textarea name="content" id="con" cols="30" rows="10"></textarea>
<button id="add">添加</button>
<button id="scon">統計</button>
</body>
<script>
var add=document.getElementById('add');
var scon=document.getElementById('scon');
//統計
var count=0
// 添加點擊事件
add.onclick=function () {
var txtEle=this.previousElementSibling;
//利用正則先去除空格
var res=txtEle.value.replace(/\s+/g, "");
if (res) {
// 創建 p標簽對象
var p = document.createElement('p');
var btn = document.createElement('button');
var myDate = new Date()
//給p標簽填充數據
p.innerHTML = '留言:[' + txtEle.value + '] 日期:' + myDate.toLocaleDateString()+'<button class="del" >X</button>';
//獲得 id為convalue節點
var convalue = this.previousElementSibling.previousElementSibling;
// 獲得div元素內第一個標簽
var next=convalue.children[0];
//添加p標簽
convalue.insertBefore(p,next);
//將文本域中的文字清空
txtEle.value = null;
count++;
}else {
txtEle.value =null;
}
var commos=document.getElementsByClassName('del');
for (var i=0; i<commos.length;i++){
var btn=commos[i];
var ffatherNode=btn.parentNode.parentNode
btn.onclick=function () {
ffatherNode.removeChild(this.parentNode);
count--;
}
}
};
scon.onclick=function () {
alert('一共:'+count+'條留言');
}
</script>
</html>
計時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
display: inline-block;
height: 150px;
line-height: 150px;
font-size: 50px;
}
.num {
background-color: lightgray;
width: 100px;
text-align: center;
border-radius: 10px;
}
.btn{
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div>
<div>
<span class="num" id="hour0">0</span>
<span class="num" id="hour1">0</span>
<span>:</span>
<span class="num" id="minute0">0</span>
<span class="num" id="minute1">0</span>
<span>:</span>
<span class="num" id="second0">0</span>
<span class="num" id="second1">0</span>
</div>
<div class="btn">
<button id = 'start'>開始計時</button>
<button id = 'stop'>停止計時</button>
<button id = 'reset'>重置計時</button>
</div>
</div>
<script>
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var reset = document.getElementById('reset')
start.onclick = function () {
interval = setInterval('change_bar("second",6)',1000)
}
function change_bar(idval,maxval) {
var s1 = document.getElementById(idval+'1');
var s1_value = parseInt(s1.innerText)
s1_value++
if(s1_value===10){
s1_value = 0;
var s0 = document.getElementById(idval+'0');
var s0_value = parseInt(s0.innerText)
s0_value++
if(s0_value===maxval){
s0_value=0
if(idval === 'second'){
change_bar('minute',6)
}else if(idval === 'minute'){
change_bar('hour',10)
}
}
s0.innerText = s0_value
}
s1.innerText = s1_value
}
stop.onclick = function () {
clearInterval(interval)
}
reset.onclick = function () {
clearInterval(interval)
var spans = document.getElementsByClassName('num')
for(var i=0;i<spans.length;i++){
spans[i].innerText=0
}
}
</script>
</body>
</html>
示例
onscoll事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> onscoll事件</title>
<style>
div{
height: 2000px;
}
a {
position: fixed;
right: 30px;
bottom: 30px;
display: none;
background-color:pink;
color: white;
}
</style>
</head>
<body>
<!-- 回到頂部 -->
<div></div>
<a href="#" id="a">回到頂部</a>
</body>
<script>
//針對獲取瀏覽器的垂直滾動條的位置
/* 獲得瀏覽器側邊欄滾動條事件 */
window.onscroll=function () {
var a =document.getElementsByTagName('a')[0];
console.log(a)
// 滾動條的數值
// var num1=document.documentElement.scrollHeight;
var num2=document.documentElement.scrollTop;
console.log(num2,typeof num2)
if (document.documentElement.scrollTop>500){
a.style.display='inline-block';
}else {
a.style.display='none';
}
}
</script>
</html>
當鼠標懸停在img上時，更換為另外一張圖片；鼠標離開時，還原為本來的圖片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload頁面加載完畢以后再執行此代碼
window.onload = function () {
//需求：鼠標放到img上，更換為另一張圖片，也就是修改路徑（src的值）。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件)
img.onmouseover = function () {
//3.書寫事件驅動程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件)
img.onmouseout = function () {
//3.書寫事件驅動程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
tab欄選項卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首頁</a>
</li>
<li>
<a href="#">新聞</a>
</li>
<li>
<a href="#">圖片</a>
</li>
</ul>
<p class="active">首頁內容</p>
<p>新聞內容</p>
<p>圖片內容</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求：鼠標放到上面的li上，li本身變色(添加類)，對應的p也顯示出來(添加類);
//思路：1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。
var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p')
for(var i = 0; i < tabli.length; i++){
// 綁定索引值（新增一個自定義屬性：index屬性）
tabli[i].index = i;
tabli[i].onclick = function(){
// 1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active'
tabContent[this.index].className = 'active';//【重要代碼】
}
}
}
</script>
</html>
購物車案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 400px;
margin: 100px auto;
background-color: rgba(255,255,255,0.4);
position: relative;
}
.car{
width: 150px;
height: 30px;
background-color: #fff;
padding-left: 30px;
position: absolute;
left: 130px;
top: 3px;
z-index: 3;
border: 1px solid green;
}
.shop{
width: 310px;
height: 70px;
background-color: #fff;
position: absolute;
top:33px;
left: 0;
display: none;
}
div.c{
border-bottom-width: 0;
}
div.t{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">我的購物車</div>
<div class="shop t" id="shop"></div>
</div>
<script type="text/javascript">
var myCar = document.getElementById('myCar');
var shop = document.getElementById('shop');
myCar.onmouseover = function(){
shop.style.display = 'block';
myCar.className +=' c';
}
myCar.onmouseout = function(){
shop.style.display = 'none';
myCar.removeAttribute('class');
myCar.className = 'car';
}
</script>
</body>
</html>