Web精选07集（JavaScriptBOM对象与DOM节点）
时间：04-25来源：作者：点击数：
一、BOM 对象
1. BOM 介绍
BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。
2. 对象方法
① 网页弹框
alert() //警告框
confirm() //确认框
② 定时器方法
周期性定时器
作用：每隔一段时间就执行一次代码
//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
function : 需要执行的代码,可以传入函数名;或匿名函数
interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/
关闭定时器 :
//关闭指定id对应的定时器
clearInterval(timerID);
一次性定时器
作用：等待多久之后执行一次代码
//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);
Demo【时间练习】
<h1>时间练习</h1>
<script>
function addZero(num){
return num<10?'0'+num:num+'';
}
function countDown(){
var now = new Date();
var festival= new Date('2019/3/3 12:00:00');
var leftTime = parseInt((festival-now)/1000);
var h1 = document.getElementsByTagName('h1')[0];
if(leftTime<=0){
var html = '时间已经过去啦~';
h1.innerHTML = html;
console.log(1);
clearInterval(timer);//停止定时器
return //退出函数
}
var date_num = addZero(parseInt(leftTime/(3600*24)));
var hour = addZero(parseInt(leftTime/3600 % 24));
var minute = addZero(parseInt(leftTime/60 % 60));
var second = addZero(leftTime % 60);
var html = `${date_num}天${hour}时${minute}分${second}秒`;
h1.innerHTML = html;
}
countDown();
// 周期性定时器 1秒钟执行一次函数
var timer = setInterval(countDown,1000);//ID
</script>
3. 对象属性
window的大部分属性又是对象类型
① history
作用：保存当前窗口所访问过的URL
属性 : length 表示当前窗口访问过的URL数量
方法 :
back() 对应浏览器窗口的后退按钮，访问前一个记录
forward() 对应前进按钮，访问记录中的下一个URL
② location
- 作用：保存当前窗口的地址栏信息(URL)
- 属性 : href 设置或读取当前窗口的地址栏信息
- 方法 :
reload(param) 重载页面(刷新)
参数为布尔值，默认为 false，表示从缓存中加载，设置为true,强制从服务器根目录加载
二、DOM节点操作
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）
1. 节点对象
JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。
2. 访问节点
- 元素节点 ( 操作标签）
- 属性节点（操作标签属性）
- 文本节点（操作标签的文本内容）
标签属性都是元素节点对象的属性,可以使用点语法访问，例如：
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
- 属性值以字符串表示
- class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；
3. 操作元素样式
- 为元素添加 id、class属性，对应选择器样式
- 操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意 :
- 属性值以字符串形式给出，单位不能省略
- 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize
Dome【history】
BOM.html
<style>
#a{
color: blue;
text-decoration: underline;
}
#a:hover{
cursor: pointer;
}
#a:active{
color: red;
}
</style>
</head>
<body>
<button id="btn1">前进</button>
<button id="btn2">后退</button>
<a href="history1.html">history1</a>
<span id="a">Tmooc</span>
<script>
var a = document.getElementById('a');
a.onclick =function(){
console.log(location.href)
location.href = 'http://www.baidu.com';
}
console.log(history.length);
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = function(){
history.forward()
}
btn2.onclick = function(){
history.back()
}
// var res = confirm('确定要删除么');
// console.log(res);
// function sayHello(){
// // console.log('hello world');
// alert('hello world');
// }
// // 周期定时器
// setInterval(sayHello ,1000);
// setInterval(function(){
// alert('hello world');
// },1000)
// 练习 完成端午节倒计时操作
// 将之前的代码封装到函数中 使用周期性定时器调用函数
// setTimeout(function(){
// alert('你好')
// },5000)
</script>
history1.html
<h1>
This is page 1
</h1>
<a href="history2.html">history2</a>
<script>
console.log(history.length)
</script>
history2.html
<h1>
This is page2
</h1>
<a href="BOM.html">BOM</a>
<script>
console.log(history.length)
</script>
Demo【轮播图】
实现手动与定时器轮播功能
<title>Document</title>
<style>
#silder{
width: 739px;
height: 419px;
position: relative;
}
/* 大图片 */
#silder>img{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.5;
}
#silder>img.item.active{
opacity: 1;
}
/* 左右小按钮 */
#silder>.cart>img{
position: absolute;
top:50%;
margin-top: -20px;
}
.left{
left: 0;/*元素定位在左侧*/
}
.right{
right: 0;/*元素定位在右侧*/
}
</style>
</head>
<body>
<div id="silder">
<!-- -->
<img class="active" src="imgs/bg01.jpg" alt="">
<img class="item" src="imgs/bg02.jpg" alt="">
<img class="item" src="imgs/bg03.jpg" alt="">
<img class="item" src="imgs/bg04.jpg" alt="">
<img class="item" src="imgs/bg05.jpg" alt="">
<div class="cart">
<img class="left" src="imgs/logo.png" alt="">
<img class="right" src="imgs/logo2.png" alt="">
</div>
</div>
<script>
// 左侧按钮
var left_btn = document.getElementsByClassName('left')[0];
// 右侧按钮
var right_btn = document.getElementsByClassName('right')[0];
//默认显示的是第一张图片
var i = 0
//找图片
var items = document.getElementsByClassName('item')
console.log(items)
// v1.0 手动
// 点击左侧按钮时
// 将第一个图片的active类取消 给第五个图片加active
// 将第五个图片的active类取消 给第四个图片加active
// ...
// 点击右侧按钮时
// 将第一个图片的active类取消 给第二个图片加active
// 将第二个图片的active类取消 给第三个图片加active
// ...
// 将第五个图片的active类取消 给第一个图片加active
left_btn.onclick = function(){
items[i].className = 'item';//去掉当前的图片active
i--;
if(i<0){
i = items.length-1;//最后一张图的索引值
}
items[i].className = "item active";//将找到的图片添加active
}
right_btn.onclick = function(){
items[i].className = 'item';//去掉当前的图片active
i++;//找下一个图片的索引
if(i==items.length){//最后一张图递增变成第一张图
i = 0;
}
items[i].className = "item active";//将找到的图片添加active
}
right_btn.onclick = function(){
items[i].className = 'item';//去掉当前的图片active
i++;//找下一个图片的索引
if(i==items.length){//最后一张图递增变成第一张图
i = 0;
}
items[i].className = "item active";//将找到的图片添加active
}
// v2.0自动
//将右侧按钮点击功能直接交给定时器
var timer = setInterval(right_btn.onclick,1500)
var silder = document.getElementById('silder');
// 创建定时器 执行(点击右侧按钮)函数
// 鼠标移入停止定时器
// 鼠标移出启动定时器
//当鼠标移入到silder上停止定时器
silder.onmouseover = function(){
clearInterval(timer)
}
//当鼠标移出silder启动定时器
silder.onmouseout = function(){
// 新启动的定时器的id要保存在全局 供停止定时器的函数使用
timer = setInterval(right_btn.onclick,1500)
}
</script>
Demo【获取id方式】
<div id="div1"></div>
<script>
//方法1
// document.getElementById('div1').innerHTML = 'hello world';
//方法2
// var div = document.getElementById('div1');
// div.innerHTML = 'hello world';
// 方法3
// 封装id函数
function $(id){
return document.getElementById(id)
}
$('div1').innerHTML = 'hello world'
</script>
方便获取更多学习、工作、生活信息请关注本站微信公众号
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号