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:;
padding:;
} 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:;
} .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:;
padding:;
} 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:;
} .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:;
top:;
width: 244px;
height: 460px;
z-index:;
} .menu-content {
position: absolute;
left:;
top:;
width: 244px;
height: 460px;
z-index:;
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:;
width: 730px;
height: 458px;
z-index:;
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:;
} .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();

04javascript03的更多相关文章

随机推荐

  1. keystonejs富文本问题及思考过程

    上一篇讲了keystonejs的环境搭建,helloworld跑起来之后,实际运用中会发现各种问题,今天就说下富文本编辑器的问题(针对后端不熟的同学). 不太熟悉网页嵌入富文本编辑器的同学可能和我一样 ...

  2. 后盾网lavarel视频项目---1、数据迁移

    后盾网lavarel视频项目---1.数据迁移 一.总结 一句话总结: 1.lavarel的数据迁移比较简单,就是用php来创建数据表 2.创建迁移文件:php artisan make:migrat ...

  3. 百度编辑器ueditor上传图片失败,显示上传错误,实际上图片已经传到服务器或者本地

    报错,上传失败,图片没有显示,且调试response没有信息,但是图片已经上传到了本地 这个问题是因为ueditor里面的Upload.class.php里面__construct()方法里面的ico ...

  4. What is 'typeof define === 'function' && define['amd']' used for?

    What is 'typeof define === 'function' && define['amd']' used for? This code checks for the p ...

  5. java Map类

    实现类 类型区别 HashMap 最常用的Map,它根据键的HashCode 值存储数据,根据键可以直接获取它的值,具有很快的访问速度.HashMap最多只允许一条记录的键为Null(多条会覆盖);允 ...

  6. 二、启动一款app演示

    一.下载aapt包 1. aapt即Android Asset Packaging Tool,在SDK的build-tools目录下.该工具可以查看apk包名和launcherActivity 2.打 ...

  7. 那些年我们经历的BT面试题

    初入职场面试的我到处碰壁,以下是我个人对几道面试题的小总结: 1.一列数字的规则如下:1,1,2,3,5,8,13,21, 34........ 求第30位数字是多少,用递规和非递归两种方法算法实现. ...

  8. Python学习之==>网络编程

    一.什么是网络编程 使用Python进行网络编程,就是通过Python打开一个网站,或者请求一个http接口.可以通过标准模块urllib实现,也可以通过更简单易用的第三方模块requests实现. ...

  9. 正则表达式——Unicode 属性

      每一个 Unicode 字符,除了有 Code Point 与之对应外,还具体其他属性,在正则表达式中常用到三种 Unicode 属性: Unicode Property.Unicode Scri ...

  10. 【MM系列】SAP 的账期分析和操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 的账期分析和操作   前言部 ...