[学习笔记] 动态网页开发基础之JavaScript操作BOM对象
# 学习 # · 2020-08-06
Window对象
1、BOM:浏览器对象模型,是JavaScript的组成之一,提供独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。
2、BOM核心:window。
3、BOM可实现的功能:①弹出新的浏览器窗口;②移动、关闭浏览器窗口及调整窗口大小;③在浏览器窗口中实现页面的前进后退功能。
4、window对象常用属性:
(1)history:有关客户访问过的URL的信息。
history.back(); //后退一页
history.go(-1); //后退一页
history.forward(); //前进一页
history.go(1); //前进一页
(2)location:有关当前URL的信息。
location.host; //设置或返回主机名和当前URL的端口号
location.hostname; //设置或返回当前URL的主机名
location.href; //设置或返回完整的URL
location.reload(); //重新加载当前文档
location.replace(); //用新的文档替换当前文档
(3)screen:只读属性,包含有关客户端显示屏幕信息。
screen.availWidth; //可用的屏幕宽度
screen.availHeight; //可用的屏幕高度
(4)其他用法:
window.innerHeight; //浏览器窗口的内高度(以像素计)
window.innerWidth; //浏览器窗口的内宽度(以像素计)
//一个实用的JavaScript解决方案,显示浏览器窗口的高度和宽度(包括所有浏览器)
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
5、window对象常用方法:
(1)promp():显示可提示用户输入的对话框。
var result = promp("请输入结果:","");
(2)alert():显示警告对话框。
alert("温馨提示!");
(3)confirm():显示一个带有确定取消按钮的对话框,其中确定按键返回ture,取消按钮返回false。
var flag = confirm("确认要删除这条数据吗?");
(4)close():关闭浏览器窗口。
window.close();
(5)open():在页面上弹出新的浏览器窗口。
window.open("url","窗口名称","窗口特征");
(6)setTimeout():在指定的毫秒后调用函数或计算表达式,只执行一次。
var id = setTimeout("调用的函数名称",等待的毫秒数);
(7)setInterval():按照指定的周期(毫秒)来调用函数或计算表达式,可执行多次。
var id = setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数);
(8)clearTimeout():清除由setTimeout()函数设置的定时器。
clearTimeout(setTimeout()返回的ID值);
(9)clearInterval():清除由setInterval()函数设置的定时器。
clearInterval(setInterval()返回的ID值);
Document对象
1、Document对象常用属性:
(1)referrer:返回载入当前文档的URL。
(2)URL:返回当前文档的URL。
2、Document对象常用方法:
(1)getElementById():返回对拥有指定ID的第一个对象的引用。一般用于访问div、图片、表单元素、网页标签等,但要求访问对象的ID是唯一的。
document.getElementById("name").innerHTML = "";
(2)getElementsByName():返回带有指定名称的对象的集合。一般用于访问同一组相同的name属性的元素。
var iInput = document.getElementsByName("text");
var sStr = "";
for(var i = 0;i < iInput.length;i++) {
sStr += iInput[i].value;
}
(3)getElementsByTagName():返回带有指定标签名的对象的集合,一般用于访问一组相同的元素。
var iInput = document.getElementsByTagName("input");
(4)write():向文档写文本、HTML表达式或JavaScript代码。
document.write();
JavaScript内置对象
1、Array:数组对象。
2、String:字符串对象。
3、Date对象:操作日期和时间。
var day = new Date();
var days = day.getDate(); //返回第几天,值为1-31
var days = day.getDay(); //返回星期几,值为0-6(周一-周日)
var hour = day.getHours(); //返回小时,值为0-23
var minutes = day.getMinutes(); //返回分钟,值为0-59
var seconds = day.getSeconds(); //返回秒钟,值为0-59
var month = day.getMonth(); //返回月,值为0-11(1月-12月)
var year = day.getFullYear(); //返回四位数年份
var year = day.getYear(); //返回二位或四位年份
var time = day.getTime(); //返回时间戳
4、Math对象:数学函数。
var num = Math.ceil(25.5); //向上舍入
var num = Math.floor(25.5); //向下舍入
var num = Math.round(25.5); //四舍五入
var num = Math.random(); //返回0(包含)-1(不包含)随机小数
var num = Math.floor(Math.random()*100+1); //返回1-100随机数
var num = Math.floor(Math.random()*98+2); //返回2-98随机数
如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/58/
评论