DOM简介
1.获得元素
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
</head>
<body>
<div id="intro">helloworld</div>
<div id="main">
<p>The DOM is very useful.</p>
</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<script type="text/javascript">
// 通过js获取html标签
var intro = document.getElementById("intro").innerHTML; // 通过id找html，唯一的
var main = document.getElementById("main"); //先获得p标签
var p = main.getElementsByTagName("p")[0]; //然后获得里面的值
var content1 = document.getElementsByClassName("content")[0];
</script>
</body>
</html>
2.修改html内容及属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom html</title> </head> <body> <div id="main" data="nihao">123</div> <img src="1.jpg" id="image" /> <a id="goUrl" href="">调到百度</a> <script type="text/javascript"> var main = document.getElementById("main"); main.innerHTML= 'helloWorld'; // alert(main.getAttribute("data")); main.setAttribute("data", "buhao"); //设置属性标签值 main.setAttribute("dd", "ddname"); //增加属性标签值 var image = document.getElementById("image"); //改变图片路径 image.src = "2.jpg"; var goUrl = document.getElementById("goUrl"); //改变url goUrl.href = "http://www.baidu.com" </script> </body> </html>
3.修改样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom css</title> </head> <body> <div id="main">helloworld</div> <script type="text/javascript"> var main = document.getElementById("main"); main.style.color = "blue"; main.style.fontSize = "100px"; </script> </body> </html>
4.js案例：轮播图及导航栏
4.1轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合实例</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="main" id="main"> <!-- 图片轮播 --> <div class="banner" id="banner"> <a href=""> <div class="banner-slide slide1 slide-active"> </div> </a> <a href=""> <div class="banner-slide slide2 "> </div> </a> <a href=""> <div class="banner-slide slide3"> </div> </a> </div> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <!-- 原点导航 --> <div class="dots" id="dots"> <span class="active"> </span> <span> </span> <span> </span> </div> </div> <script src="js/script.js"></script> </body> </html>
* { margin: 0; padding: 0; } ul { list-style: none; } body { font-family: "微软雅黑", serif; color: #14191e; } .main { width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; position: relative; } .banner { width: 1200px; height: 460px; overflow: hidden; position: relative; } .banner-slide { width: 1200px; height: 460px; position: absolute; background-repeat: no-repeat; display: none; } .slide1 { background-image: url("../img/bg1.jpg"); } .slide2 { background-image: url("../img/bg2.jpg"); } .slide3 { background-image: url("../img/bg3.jpg"); } .slide-active { display: block; } .button { position: absolute; width: 40px; height: 80px; left: 244px; top: 50%; margin-top: -40px; background: url("../img/arrow.png") no-repeat center; } .button:hover { background-color: #333; opacity: 0.8; filter: alpha(opacity=80); } .prev { transform: rotate(180deg); } .next { left: auto; right: 0; } .dots { position: absolute; right: 20px; bottom: 24px; text-align: right; } .dots span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(7, 17, 27, 0.4); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset; margin-left: 8px; line-height: 12px; cursor: pointer; } .dots span.active { box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset; background: #fff; }
//全局变量 let timer = null, index = 0, pics = byId("banner").getElementsByTagName("div"), dots = byId("dots").getElementsByTagName("span"), len = pics.length, prev = byId("prev"), next = byId("next"); // console.log(len); //封装一个代替getElementById()的方法 function byId(id) { return typeof(id) === "string" ? document.getElementById(id) : id; } function changeImg() { // console.log(index); for (let i = 0; i < len; i++) { pics[i].style.display = "none"; dots[i].className = ""; } // 根据index索引找到当前div和当前span，将其显示出来 pics[index].style.display = "block"; dots[index].className = "active"; } // console.log(byId("main")) function slideImg() { let main = byId("main"); main.onmouseover = function () { //清除定时器 if (timer) clearInterval(timer); }; main.onmouseout = function () { timer = setInterval(function () { index++; // console.log(index); if (index >= len) { index = 0; } //切换图片 changeImg(); }, 2000) }; // 自动在main上触发鼠标离开的事件 main.onmouseout(); //遍历所有点击，且绑定事件，点击原点切换图片 for (let i = 0; i < len; i++) { //给所有span添加一个id的属性，值为i，作为当前span的索引 dots[i].id = i; dots[i].onclick = function () { //改变index为当前span的索引 index = this.id; changeImg(); } } // 下一张 next.onclick = function () { index++; if (index >= len) index = 0; changeImg(); }; // 上一张 prev.onclick = function(){ index--; if(index<0) index=len-1; changeImg(); } } slideImg();
4.2导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合实例</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="main" id="main"> <div class="menu-box"></div> <!-- 子菜单 --> <div class="sub-menu hide" id="sub-menu"> <!-- 手机、配件 --> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">手机、配件</div> <div class="sub-row"> <span class="bold mr10 ">手机通讯: </span> <a href="">手机</a> <span class="mr10 ml10">/</span> <a href="">手机维修</a> <span class="mr10 ml10">/</span> <a href="">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件：</span> <a href="">手机壳</a> <span class="ml10 mr10">/</span> <a href="">手机存储卡</a> <span class="ml10 mr10">/</span> <a href="">数据线</a> <span class="ml10 mr10">/</span> <a href="">充电器</a> <span class="ml10 mr10">/</span> <a href="">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商：</span> <a href="">中国联通</a> <span class="ml10 mr10">/</span> <a href="">中国移动</a> <span class="ml10 mr10">/</span> <a href="">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备：</span> <a href="">智能手环</a> <span class="ml10 mr10">/</span> <a href="">智能家居</a> <span class="ml10 mr10">/</span> <a href="">智能手表</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐：</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">音响</a> <span class="ml10 mr10">/</span> <a href="">收音机</a> <span class="ml10 mr10">/</span> <a href="">麦克风</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">电脑</div> <div class="sub-row"> <span class="bold mr10">电脑：</span> <a href="">笔记本</a> <span class="ml10 mr10">/</span> <a href="">平板</a> <span class="ml10 mr10">/</span> <a href="">一体机</a> </div> <div class="sub-row"> <span class="bold mr10">电脑配件：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">CPU</a> <span class="ml10 mr10">/</span> <a href="">主板</a> <span class="ml10 mr10">/</span> <a href="">硬盘</a> <span class="ml10 mr10">/</span> <a href="">电源</a> <span class="ml10 mr10">/</span> <a href="">显卡</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">游戏设备：</span> <a href="">游戏机</a> <span class="ml10 mr10">/</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">游戏软件</a> </div> <div class="sub-row"> <span class="bold mr10">网络产品：</span> <a href="">路由器</a> <span class="ml10 mr10">/</span> <a href="">网络机顶盒</a> <span class="ml10 mr10">/</span> <a href="">交换机</a> <span class="ml10 mr10">/</span> <a href="">存储卡</a> <span class="ml10 mr10">/</span> <a href="">网卡</a> </div> <div class="sub-row"> <span class="bold mr10">外部产品：</span> <a href="">鼠标</a> <span class="ml10 mr10">/</span> <a href="">键盘</a> <span class="ml10 mr10">/</span> <a href="">U盘</a> <span class="ml10 mr10">/</span> <a href="">移动硬盘</a> <span class="ml10 mr10">/</span> <a href="">鼠标垫</a> <span class="ml10 mr10">/</span> <a href="">电脑清洁</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家用电器</div> <div class="sub-row"> <span class="bold mr10">电视：</span> <a href="">国产品牌</a> <span class="ml10 mr10">/</span> <a href="">韩国品牌</a> <span class="ml10 mr10">/</span> <a href="">欧美品牌</a> </div> <div class="sub-row"> <span class="bold mr10">空调：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">柜式</a> <span class="ml10 mr10">/</span> <a href="">中央</a> <span class="ml10 mr10">/</span> <a href="">壁挂式</a> </div> <div class="sub-row"> <span class="bold mr10">冰箱：</span> <a href="">多门</a> <span class="ml10 mr10">/</span> <a href="">对开门</a> <span class="ml10 mr10">/</span> <a href="">三门</a> <span class="ml10 mr10">/</span> <a href="">双门</a> </div> <div class="sub-row"> <span class="bold mr10">洗衣机：</span> <a href="">滚筒式洗衣机</a> <span class="ml10 mr10">/</span> <a href="">迷你洗衣机</a> <span class="ml10 mr10">/</span> <a href="">洗烘一体机</a> </div> <div class="sub-row"> <span class="bold mr10">厨房电器：</span> <a href="">油烟机</a> <span class="ml10 mr10">/</span> <a href="">洗碗机</a> <span class="ml10 mr10">/</span> <a href="">燃气灶</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家具</div> <div class="sub-row"> <span class="bold mr10">家纺：</span> <a href="">被子</a> <span class="ml10 mr10">/</span> <a href="">枕头</a> <span class="ml10 mr10">/</span> <a href="">四件套</a> <span class="ml10 mr10">/</span> <a href="">床垫</a> </div> <div class="sub-row"> <span class="bold mr10">灯具：</span> <a href="">台灯</a> <span class="ml10 mr10">/</span> <a href="">顶灯</a> <span class="ml10 mr10">/</span> <a href="">节能灯</a> <span class="ml10 mr10">/</span> <a href="">应急灯</a> </div> <div class="sub-row"> <span class="bold mr10">厨具：</span> <a href="">烹饪锅具</a> <span class="ml10 mr10">/</span> <a href="">餐具</a> <span class="ml10 mr10">/</span> <a href="">菜板刀具</a> </div> <div class="sub-row"> <span class="bold mr10">家装：</span> <a href="">地毯</a> <span class="ml10 mr10">/</span> <a href="">沙发垫套</a> <span class="ml10 mr10">/</span> <a href="">装饰字画</a> <span class="ml10 mr10">/</span> <a href="">照片墙</a> <span class="ml10 mr10">/</span> <a href="">窗帘</a> </div> <div class="sub-row"> <span class="bold mr10">生活日用：</span> <a href="">收纳用品</a> <span class="ml10 mr10">/</span> <a href="">浴室用品</a> <span class="ml10 mr10">/</span> <a href="">雨伞雨衣</a> </div> </div> </div> </div> <!-- 主菜单 --> <div class="menu-content" id="menu-content"> <div class="menu-item"> <a href=""> <span>手机、配件</span> <i></i> </a> </div> <div class="menu-item"> <a href=""> <span>电脑</span> <i></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用电器</span> <i></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i></i> </a> </div> </div> <!-- 图片轮播 --> <div class="banner" id="banner"> <a href=""> <div class="banner-slide slide1 slide-active"> </div> </a> <a href=""> <div class="banner-slide slide2 "> </div> </a> <a href=""> <div class="banner-slide slide3"> </div> </a> </div> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <!-- 原点导航 --> <div class="dots" id="dots"> <span class="active"> </span> <span> </span> <span> </span> </div> </div> <script src="js/script.js"></script> </body> </html>
* { margin: 0; padding: 0; } ul { list-style: none; } body { font-family: "微软雅黑", serif; color: #14191e; } @font-face { font-family: 'iconfont'; src: url('../img/font/iconfont.eot'); src: url('../img/font/iconfont.eot') format('embedded-opentype'), url('../img/font/iconfont.woff') format('woff'), url('../img/font/iconfont.ttf') format('truetype'), url('../img/font/iconfont.svg#iconfont') format('svg'); } .main { width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; position: relative; } .banner { width: 1200px; height: 460px; overflow: hidden; position: relative; } .banner-slide { width: 1200px; height: 460px; position: absolute; background-repeat: no-repeat; display: none; } .slide1 { background-image: url("../img/bg1.jpg"); } .slide2 { background-image: url("../img/bg2.jpg"); } .slide3 { background-image: url("../img/bg3.jpg"); } .slide-active { display: block; } .button { position: absolute; width: 40px; height: 80px; left: 244px; top: 50%; margin-top: -40px; background: url("../img/arrow.png") no-repeat center; } .button:hover { background-color: #333; opacity: 0.8; filter: alpha(opacity=80); } .prev { transform: rotate(180deg); } .next { left: auto; right: 0; } .dots { position: absolute; right: 20px; bottom: 24px; text-align: right; } .dots span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(7, 17, 27, 0.4); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset; margin-left: 8px; line-height: 12px; cursor: pointer; } .dots span.active { box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset; background: #fff; } a:link, a:visited { text-decoration: none; color: #333; } /* 导航菜单 */ .menu-box { background: rgba(7, 17, 27, 0.5); opacity: 0.5; position: absolute; left: 0; top: 0; width: 244px; height: 460px; z-index: 1; } .menu-content { position: absolute; left: 0; top: 0; width: 244px; height: 460px; z-index: 2; padding-top: 6px; } .menu-item { height: 64px; line-height: 66px; font-size: 16px; cursor: pointer; padding: 0 24px; position: relative; } .menu-item a:link, .menu-item a:visited { color: #fff; } .menu-item a { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 0 8px; height: 63px; } .menu-item i { position: absolute; right: 32px; color: rgba(255, 255, 255, 0.5); font-size: 24px; top: 2px; font-style: normal; font-weight: normal; font-family: "iconfont", serif; } .sub-menu { border: 1px solid #d9dde1; background: #fff; position: absolute; left: 244px; top: 0; width: 730px; height: 458px; z-index: 999; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); } .inner-box { width: 100%; height: 100%; background: url(../img/fe.png) no-repeat; display: none; } .sub-inner-box { width: 652px; margin-left: 40px; overflow: hidden; } .title { color: #f01414; font-size: 16px; line-height: 16px; margin-top: 28px; font-weight: bold; margin-bottom: 30px; } .sub-row{ margin-bottom:25px; } .bold { font-weight: 700; } .mr10 { margin-right: 10px; } .ml10 { margin-left: 10px; } .hide{ display:none; }
//全局变量 let timer = null, index = 0, pics = byId("banner").getElementsByTagName("div"), dots = byId("dots").getElementsByTagName("span"), len = pics.length, prev = byId("prev"), next = byId("next"), menu = byId("menu-content"), subMenu = byId("sub-menu"), innerBox = subMenu.getElementsByClassName("inner-box"), menuItems = menu.getElementsByClassName("menu-item"); // console.log(menu.length); //封装一个代替getElementById()的方法 function byId(id) { return typeof(id) === "string" ? document.getElementById(id) : id; } function changeImg() { // console.log(index); for (let i = 0; i < len; i++) { pics[i].style.display = "none"; dots[i].className = ""; } // 根据index索引找到当前div和当前span，将其显示出来 pics[index].style.display = "block"; dots[index].className = "active"; } // console.log(byId("main")) function slideImg() { let main = byId("main"); main.onmouseover = function () { //清除定时器 if (timer) clearInterval(timer); }; main.onmouseout = function () { timer = setInterval(function () { index++; // console.log(index); if (index >= len) { index = 0; } //切换图片 changeImg(); }, 2000) }; // 自动在main上触发鼠标离开的事件 main.onmouseout(); //遍历所有点击，且绑定事件，点击原点切换图片 for (let i = 0; i < len; i++) { //给所有span添加一个id的属性，值为i，作为当前span的索引 dots[i].id = i; dots[i].onclick = function () { //改变index为当前span的索引 index = this.id; changeImg(); } } // 下一张 next.onclick = function () { index++; if (index >= len) index = 0; changeImg(); }; // 上一张 prev.onclick = function () { index--; if (index < 0) index = len - 1; changeImg(); }; // 导航菜单 //遍历主菜单且绑定事件 for (let m = 0; m < menuItems.length; m++) { //每一个menu-item定义data-index属性，作为索引 menuItems[m].setAttribute("data-index", m); menuItems[m].onmouseover = function () { subMenu.className = "sub-menu"; // alert("hello"); let idx = this.getAttribute("data-index"); for (let j = 0; j < innerBox.length; j++) { innerBox[j].style.display = "none"; menuItems[j].style.background = "none"; } menuItems[idx].style.background = "rgba(0,0,0,0.1)"; innerBox[idx].style.display = "block"; } } menu.onmouseout = function () { subMenu.className = "sub-menu hide"; }; subMenu.onmouseover = function () { this.className = "sub-menu"; }; subMenu.onmouseout = function () { this.className = "sub-menu hide"; } } slideImg();
