JavaScript | BOM对象(BrowserObjectModel)（内含常用对象方法）

最新推荐文章于 2020-08-14 11:05:15 发布
最新推荐文章于 2020-08-14 11:05:15 发布
阅读量108 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47982238/article/details/107911204
版权

一、window对象

1.属性

下面两个现在也慢慢被淘汰了，不经常用了

frames  //窗口数组

top  //顶级窗口

<html>
<head>
    <meta charset="UTF-8" />
    <title>index</title>
</head>
<frameset rows="50,*">
    <frame src="top.html">
        <frameset cols="150,*">
            <frame src="left.html" noresize> //边界线不可拖动
            <frame src="right.html">
        </frameset>
</frameset>
</html>

2.方法

alert();
confirm();
prompt();
setInterval();
clearInterval();
setTimeout();
clearTimeout();

二、navigator浏览器特性

1. 属性

userAgent  //更精确的版本

<script>
    nav=navigator.userAgent;
    ntype=nav.match(/chrome|firefox|trident/i);//分别为谷歌，火狐，IE浏览器
    alert(ntype);
</script>
//根据上面代码可以判断当前的浏览器

三、screen屏幕对象

1.属性

availHeight //屏幕有效高
availWidth //屏幕有效宽
height //屏幕高
width //屏幕宽 
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <h1>aaaaaaaaaaaaaaaaaaaa</h1>
</body>
<script>
    sw=screen.width;
    sh=screen.height;
    saw=screen.availWidth;
    sah=screen.availHeight;
    document.write(sw+'-'+sh+'-'+saw+'-'+sah);
</script>
</html>

四、history对象

1. 方法:

back()  //后退一个历史

forward()  //前进一个历史

go(-1)  //前进一个历史

test0810.html
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div >
        <a href="left.html">下一页</a>
    </div>
</body>
</html>

left.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <a href="javascript:" id="aid">返回上一页</a>
    </div>
</body>
<script>
    aobj=document.getElementById('aid');
    aobj.onclick=function(){
        history.back();
    }
</script>
</html>

五、location地址栏

1.属性

hash  //获取url里的锚点#abc 

<script>
    alert(location.hash);
</script>

host  //域名

<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <h1>aaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaa</h1>
</body>
<script>
    alert(location.host);
</script>
</html>

href  //当前的url地址 

<script>
    document.write(location);
    document.write("<br>");
    document.write(location.href);
</script>
//说明二者等价

pathname  //index.html 页面的名称 

<script>
    alert(location.pathname);
</script>

protocol  //协议 

<script>
    document.write(location.protocol);
</script>

search  //参数 ?id=10&name=user1

<script>
    alert(location.search);
</script>

2. 方法

reload(); 

<body>
    <div class="main">
        <script>
            dobj=new Date;
            h=dobj.getHours();
            m=dobj.getMinutes();
            s=dobj.getSeconds();
            document.write(h+'-'+m+'-'+s);
        </script>
    </div>
    <p><a href="javascript:" id="aid">刷新</a></p>
</body>
<script>
    aobj=document.getElementById('aid');
    aobj.onclick=function(){
        location.reload();
    }
</script>
//刷新当前页面也可以重新获取当前时间

六、document对象

Bravo！！！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 基础（6）BOM（BrowserObjectModel浏览器对象模型）—— BOM基础
weixin_39141044的博客
05-07 915
什么是BOM? bom 是browser object model 也就是浏览器对象模型，BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。 顶层对象：window 子对象：location、history、screen、navigator、document、event 一.window对象 window对象的方法 （一）aler...
JavaScript-BOM对象
L990614的博客
09-14 165
BOM对象 一 、浏览器对象模型（BOM） 1、BOM对象的概念 BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 2、BOM对象的核心 BOM的核心对象是window(窗口对象); window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性
BOM浏览器对象模型（Browser Object Model (BOM)）
风吹海洋浪的博客
04-04 184
1.浏览器对象模型 允许 JavaScript 与浏览器对话 实现了 JavaScript 交互相同的方法和属性 2.对象 Window 对象：它代表浏览器 所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员的窗口 window.document.getElementById("header"); 等同于： document.getE...
BOM
系统运维
08-05 604
BOM——浏览器对象模型(Browser Object Model) 什么是BOM？ BOM是Browser Object Model的缩写，简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM缺乏标准，JavaScript语法...
25 - JavaScript BOM的常见内置方法和内置对象
JayYuen的博客
11-19 2991
BOM的介绍 JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。 什么是BOM BOM：Brows...
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
10-21
JavaScript中的浏览器对象模型BOM（Browser Object Model）是用于控制浏览器窗口和框架的一种技术。BOM并非是ECMAScript标准的一部分，但其被所有主流的浏览器所支持，它允许JavaScript程序与浏览器窗口进行交互。 ...
JavaScript String 对象常用方法详解
10-22
尽管在上述内容中提到了“对象常用方法详解”这样的词组，但根据上下文分析，它实际上是文章的标题，而并非具体的知识点。在这里我们忽略了对这四个字的详细解释，因为它们并不符合要求。上述内容已经超过了1000字的...
JavaScript中BOM对象原理与用法分析
10-16
JavaScript 中的 BOM（Browser Object Model，浏览器对象模型）是一套用于与浏览器交互的 API，它允许开发者通过 JavaScript 来操作浏览器窗口和框架。BOM 本身并不是一个标准，它是浏览器厂商各自实现的，所以其...
JavaScript常用对象的方法和属性小结
10-28
在深入探讨JavaScript中常用对象的属性和方法之前，我们首先要明确，JavaScript是一种基于对象的编程语言。对象是属性和方法的集合体，属性是数据，而方法则是对这些数据进行操作的函数。这些对象可以是浏览器提供的...
JavScript | 变量详解
weixin_47982238的博客
07-29 1414
一、变量 1.变量定义 str="string" 2.字符串连接变量 'my name is '+str 3.输出变量 1) alert(str) //弹窗形式 2) documentwriet('<h1>'+str+'<h1>) //直接输出到网页 二、变量类型 1.字符串 2.整型 3.浮点型 4.布尔型 5.数组 <script> arr= new Array('a','b','c','d'); ...
JavaScript | 运算符和正则表达式
weixin_47982238的博客
08-05 886
官网JavaScript指路 一、运算符 1.数学运算符 + - * / % 实例——>JavaScript页面隔行换色效果 2.比较运算符 > < >= <= != == 3.逻辑运算符 && || ！ 二、正则表达式 1.修饰词 修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 2.方括号 方括号用于查找某个范围...
JavaScript | 事件绑定、鼠标事件、键盘事件、表单事件
weixin_47982238的博客
08-06 786
一、JS特效 1.事件触发 2.属性改变 3.样式改变 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> img{ cursor: pointer; /*鼠标移动到img上方变成小手*/ } &
JS对象和jQuery对象的区别和转换
weixin_47982238的博客
08-14 328
jQuery就是JS中的new object生成的普通对象，然后在此对象上加方法和属性 JS对象的方法不能与jQuery的对象共用！ JS对象能与jQuery的对象互换！ 1.JS对象转换成jQuery对象 将JS对象转换成jQuery对象的办法就是$(DOM); <script> imgobj=document.getElementById('imgid'); imgobj.onclick=function(){ }//把DOM对象转成jQuery对象 $(imgobj).cli
JavaScript | 如何阻止标签的默认行为
weixin_47982238的博客
08-10 302
一、如何阻止标签的默认行为 1. <a href=""> </a> 2. <form action=""></form> 以上两个标签都会自动跳转页面，要想阻止，可以添加return false。 <body> <a href="http://www.baidu.com" id="aid">百度</a> </body> <script> aobj=document.getEl
6个DOM实例—移入移出特效、循环点击换色、点击换行号、点击标题切换内容、多选反选和不选、选水果
weixin_47982238的博客
08-11 216
一、移入移出特效 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; } </style> </head> <body>
JavaScript实现点击回到顶部的实例
weixin_47982238的博客
08-09 209
top.jpg实例一：利用锚点回到顶部 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px;
JavaScript | DOM和Ajax技术
weixin_47982238的博客
08-11 199
DOM（document object model）文档对象模型 一、获取DOM元素对象 1.document.documentElement 2.document.head 3.document.title 4.document.body 二、获取元素对象的方法 document.getElementById()//通过id找到对象 document.getElementsByTagName()//通过标签名<>找到对象 document.getElementsByClassNam
JavaScript | 消息框介绍（举例说明）
weixin_47982238的博客
08-02 185
一、警告框 aler(123); 二、确认框 confirm('您确认删除吗？') <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <a href="http://www.baidu.com" id='aid'>百度</a> </body> <script&g
JavaScript | 变量类型转换
weixin_47982238的博客
07-30 180
一、类型转换 1.整型->字符串 /num=10 /String(num); //num=10; //str=num+''; 2.字符串->整型 /str='10px'; /num=parseInt(str); 3.所有类型->布尔类型 Boolean(); bool型为假的情况 1）字符串（''）//字符串中无内容，有空格是真 2）整型（0） 3）浮点型（0.0） 4）布尔型（false） 8）null 9）NaN 10）undefined 4.js
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值