[学习笔记] 动态网页开发基础之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/

评论