JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
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>
