什么是dom ：
1. DOM ======> Document Object Model
2. Dom定义了表示和修改文档所需要的方法。
Dom对象即为宿主对象，有浏览器厂商定义，
用来操作html和xml功能的一类对象集合。
也有人称DOM是对html以及xml的标准编程接口。
原生js选项:<!DOCTYPE html>
<html lang = "en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--css部分-->
<style> * { margin: 0; padding: 0; } .wrap { padding-top: 20px; box-sizing: border-box; margin: 0 auto; width: 50pz; height: 40vw; background: #f00; } .wrap div { width: 100%; height: 90%; margin-top: 20px; background: #000; font-size: 100px; color: #fff; display: none; } .active { color: #00f; background-color: #fff; } button:first-of-type { margin-left: 15px; } button { width: 30%; height: 30px; border-radius: 5px; border: 0; outline: none; color: #fff; background: #00f; } </style> </head> <body>
<!--html部分--> <div class="wrap" id="wrap"> <button type="button" class="active">1</button> <button type="button">2</button> <button type="button">3</button> <div class="div1" style="display: block;">1</div> <div>2</div> <div>3</div> </div>
<!--js部分-->
<script>
var oBtn = document.getElementsByTagName("button"); //获取点击按钮
var oWrap = document.getElementById("wrap"); //获取大容器
var oBox = oWrap.getElementsByTagName("div"); //获取内容部分div
//遍历 按钮
for (var i = 0; i < oBtn.length; i++) {
//立即执行函数
(function (i) {
//要点击的按钮
oBtn[i].onclick = function () {
//遍历没有点击的按钮
for (var j = 0; j < oBtn.length; j++) {
//让没有点击的按钮的class类名为空
oBtn[j].className = "";
//让所有第div都隐藏
oBox[j].style.display = "none";
}
//让需要点击的按钮添加类名 active
this.className = "active";
//让相对应的div显示
oBox[i].style.display = "block"
}
}(i)) // 将 i 传到函数中
}
</script>
</body> </html>