一.什么是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=1
let 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.src
this.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=1
let 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=5
time=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>
![[NISACTF 2022]ezstack-入土为安的第十四天](https://i-blog.csdnimg.cn/direct/7961db3ed1d348ffab6b77659db003a4.png)
![[CR]厚云填补_MSDA-CR](https://i-blog.csdnimg.cn/direct/11d8e4cf4b424dc28d79f22faf238cdd.png)
