【JavaScript教科书】JavaScript之BOM和DOM操作详细总结

于 2020-05-15 19:52:00 发布
阅读量1k 收藏 17
点赞数 5
分类专栏： JavaScript 文章标签： js dom javascript bom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44170221/article/details/106148480
版权

文章目录

一、JavaScript的BOM

1.1 了解BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型 (BOM)：(Browser Object Model)尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

1.2 window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：（两者相同）

window.document.getElementById("header");
document.getElementById("header");
1.3 window尺寸

有三种方法能够确定浏览器窗口的尺寸。

注意： 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)

适用于Internet Explorer、Chrome、Firefox、Opera 以及 Safari浏览器的window如下：

  • window.innerHeight
  • window.innerWidth

适用于Internet Explorer 8、7、6、5浏览器的window如下：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
  • 或者
  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

JavaScript方案，适用于所有浏览器的window如下：

  • var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  • var height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
<script type="text/javascript">	
	document.write(window.innerWidth + "*" + window.innerHeight + "<br />");
    document.write(document.documentElement.clientWidth + "*" + document.documentElement.clientHeight + "<br />");
    document.write(document.body.clientWidth + "*" + document.body.clientHeight + "<br />");

	var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	var height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
	document.write(width + "*" + height);
</script>
1.4 window方法（打开与关闭）
  • 打开新窗口：window.open()
  • 关闭当前窗口：window.close()
body>
<button onclick="newWindow()">百度搜索</button><br />
<button onclick="closeWindow()">关闭</button><br />
<script type="text/javascript">
    var newWindows;
    function newWindow() {
    
        newWindows = window.open("https://www.baidu.com/","baidu");
    }
    function closeWindow() {
    
        newWindows.close();
    }
</script>
</body>
1.5 Screen（屏幕尺寸）

可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

<script type="text/javascript">
document.write(screen.availWidth + "*" + screen.availHeight);
</script>
1.6 location
1.6.1 什么是Location？

location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。window.location 对象在编写时可不使用 window 这个前缀。

1.6.2 location方法
名称 描述
location.href 属性返回当前页面的 URL
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.assign 加载新的文档 
<body>
<button onclick="ass()">百度</button>
<script type="text/javascript">
    //加载新文档
    function ass() {
    
        location.assign("https://www.baidu.com/");
    }
    console.log(location.href);
    console.log(location.hostname);
    console.log(location.pathname);
    console.log(location.port);
    console.log(location.protocol);
</script>
</body>

image-20200510153619961

1.7 history
1.7.1 什么是history？

  • window.history 对象包含浏览器的历史。

  • window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

1.7.2 history方法
名称 描述
history.back 方法名描述 与在浏览器点击后退按钮相同
history.forward 与在浏览器中点击按钮向前相同

以下两个JSP点击超链接后，可以使用前进、后退按钮来实现功能！

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>history</title>
</head>
<body>
<button onclick="f()">前进</button>
<a href="back.jsp">访问页面</a>
<script type="text/javascript">
    function f() {
   
        window.history.forward();
    }
</script>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>回退</title>
</head>
<body>
<button onclick="b()">回退</button>
<script type="text/javascript">
    function b() {
   
        window.history.back();
    }
</script>
</body>
</html>

二、JavaScript计时

2.1 重温Date对象
var date = new Date();
document.write(d);
document.write("<br/>")
document.write("年份："+(date.getYear()+1900));
document.write("<br/>")
document.write("年份："+date.getFullYear());
document.write("<br/>");
document.write("月份:"+(date.getMonth()+1))
document.write("<br/>");
document.write("日期:"+date.getDate());
document.write("<br/>");
document.write("小时:"+date.getHours());
document.write("<br/>");
document.write("分钟:"+date.getMinutes());
document.write("<br/>");
document.write("秒:"+date.getSeconds());
2.2 JavaScript计时函数
2.2.1 setInterval() 周期执行函数

setInterval() 周期执行函数。间隔指定的毫秒数不停地执行指定的代码。

//每三秒弹出一次Hello World!
setInterval(function(){
   alert("Hello World!")},3000);
2.2.2 clearInterval() 停止周期函数

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

var i = setInterval(function(){
   alert("Hello Wrold!")},3000);
//停止周期函数,每三秒弹出一次Hello World!
clearInterval(i);
2.2.3 setTimeout() 延迟执行函数

setTimeout() 延迟执行函数。延迟执行指定的函数，只能执行一次。

语法：window.setTimeout(“javascript 函数”,毫秒数);

  • 第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”，或者对函数的调用，诸如 alertMsg()"
  • 第二个参数指示从当前起多少毫秒后执行第一个参数
//等待3秒后仅弹出一次Hello World!的窗口
setTimeout(function(){
   alert(
最低0.47元/天 解锁文章
何学长在奔跑
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值