一.什么是DOM
DOM(Document Object Model)文档对象模型的树形结构 说白了就是用js操作网页
使用方法:
1.找到对象
2.操作 操作网页 节点属性 改变网页内容....
文档对象模型就是一个树形结构，类似于家谱树
html标签里面包裹了所有的文档内容。他是一个**父亲节点（parent）** 它没有父亲节点，也没有兄弟节点，我们称html标签为树根，也就是**根节点**，整个html表示整个文档。
在html节点内部通常有两个同级节点head和body，html是head的父亲节点，html也是body的父亲节点，他们同一层级并且相互不包含，我们称同属于同一个父亲的节点为**兄弟节点**，而head和body都是html的**子节点**。这样一层一层的关系就是**节点树**。各个标签在页面中都是**元素节点（element node）**
节点（node）的种类
元素节点（element node）
文档对象模型中的标签就是最基本的元素节点。它们层层嵌套形参整个页面。内部可能包含了文本和属性
文本节点（text node）
我们称DOM内的文本为文本节点。文本节点有的被包含在元素节点中的，比如p标签内部的文字。但是有的元素节点没有文本节点，
属性节点（attribute node）
属性节点从属于元素。比如<input type='radio'>其中type='radio'是元素节点p的属性节点。不是所有的元素都有属性节点，但是所有的属性节点都必然属于某一个元素。如：class/id/style
二.通过DOM获取元素的方式
1.document.getElementById //通过ID获取某个元素，所有浏览器兼容
2.document.getElementsByClassName //通过class类名获取,获取是一组,不支持IE8及以下
3.document.getElementsByTagName //通过标签名获取,获取是一组,所有浏览器兼容
4. document.getElementsByName //通过name获取,获取是一组,很少用,所有浏览器兼容
案例
一.实现切换图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="../../img/1.jpg" alt="" id="pic" width="500" height="500"><button id="up">上一张</button><button id="down">下一张</button><script>let pic=document.getElementById('pic')let up=document.getElementById('up')let down=document.getElementById('down')let max_pic=5,min_pic=1let now_pic=min_pic//下一张down.onclick=function(){if(now_pic==max_pic){now_pic=min_pic}else{now_pic++}pic.src=`../../img/${now_pic}.jpg`}//上一张up.onclick=function(){if(now_pic==min_pic){now_pic=max_pic}else{now_pic--}pic.src=`../../img/${now_pic}.jpg`}</script>
</body>
</html>二.鼠标悬浮案例
三.当鼠标移动至小图片时实现切换图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}ul,li{list-style: none;}li{float: left;}.smallPic{width: 100px;height: 100px;margin: 5px;}.active{border: 3px solid #99008288;}</style>
</head>
<body><img class="bigPic" src="../../img/img5.jpg" alt="" width="500" height="500"><ul><li class="active"><img class="smallPic" src="../../img/img5.jpg" alt=""></li><li><img class="smallPic" src="../../img/img6.jpg" alt=""></li><li><img class="smallPic" src="../../img/img7.jpg" alt=""></li><li><img class="smallPic" src="../../img/img8.jpg" alt=""></li><li><img class="smallPic" src="../../img/img9.jpg" alt=""></li></ul><script>let bigPic=document.getElementsByClassName('bigPic')[0]let smallPic=document.getElementsByClassName('smallPic')for(let i=0;i<smallPic.length;i++){smallPic[i].onmouseover=function(){for(let j=0;j<smallPic.length;j++){smallPic[j].parentNode.className=''}bigPic.src=this.srcthis.parentNode.className='active'} }</script>
</body>
</html>四.定时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">多喝热水</button><script>let btn=document.getElementById('btn')btn.onclick=function(){setTimeout(() => {alert('干杯')}, 1000);}</script>
</body>
</html>五.图片自动切换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="../../img/1.jpg" alt="" id="pic" width="500" height="500"><button id="up">上一张</button><button id="down">下一张</button><script>let pic=document.getElementById('pic')let up=document.getElementById('up')let down=document.getElementById('down')let max_pic=5,min_pic=1let now_pic=min_pic//下一张down.onclick=function(){if(now_pic==max_pic){now_pic=min_pic}else{now_pic++}pic.src=`../../img/${now_pic}.jpg`}//上一张up.onclick=function(){if(now_pic==min_pic){now_pic=max_pic}else{now_pic--}pic.src=`../../img/${now_pic}.jpg`}setInterval(down.onclick,1000)</script></body>
</html>六.自动跳转
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{color: #6cf;font-size:30px;}</style>
</head>
<body><a href="https://www.zol.com.cn/">点击成功 <span>5</span> 秒后跳转到中关村首页</a><script>let a =document.getElementsByTagName('a')[0]let sec=5time=setInterval(function(){sec--a.innerHTML=`点击成功 <span>${sec}</span> 秒后跳转到中关村首页`if(sec==0){clearInterval(time) //关闭触发器location.href='https://www.zol.com.cn/' //location对象是用来保存/跳转url 到点自动跳转}},1000)</script>
</body>
</html>