ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript从放弃到入门(四)| JS操作BOM

2021-06-10 09:31:44  阅读:177  来源: 互联网

标签:浏览器 对象 JavaScript JS window BOM navigator document location


目录

1 window对象

2 navigator 对象

3 screen对象

4 location

5 document

6 history


BOM(Browser Object Model)即浏览器对象模型

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

BOM浏览器对象模型提供了一些基本的对象让我们操作。操作BOM也就是操作它为我们提供的这些对象的属性。

这里对BOM的属性和方法都做一个说明。

1 window对象

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

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

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

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

  • 甚至 HTML DOM 的 document 也是 window 对象的属性之一

 

我们可以直接通过window.property=值 直接赋值的方式来对属性进行修改。但是有些地方要注意的是有些属性是只读,只能获取值,修改并不会生效。

window的一些方法。

 

很多方法使用的并不频繁,我们常用的有

alter():显示带有一段消息和一个确认按钮的警告框。

alert("ok") //不返回值,只提示消息

confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。

var ok = confirm("ok")  //选择确定。
ok              //true

open():打开一个新窗口。

open("/s?wd=ss")    //在域名的基础上跳转页面

2 navigator 对象

navigator 对象包含有关浏览器的信息。

  • navigator .appName:浏览器名称;

  • navigator .appVersion:浏览器版本;

  • navigator .language:浏览器设置的语言;

  • navigator .platform:操作系统类型;

  • navigator .userAgent:浏览器设定的 User-Agent 字符串。

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"
navigator.language
"zh-CN"
navigator.platform
"Win32"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0"

属性值信息可以被修改,因此有时读取的并不准确。

3 screen对象

screen 对象表示屏幕的信息,常用的属性有:

  • screen.width:屏幕宽度,以像素为单位;

  • screen.height:屏幕高度,以像素为单位;

  • screen.colorDepth:返回颜色位数,如8、16、24。

screen.width
1366
screen.height
768
screen.colorDepth
24

4 location

location 对象表示当前页面的URL信息。例如,一个完整的URL:

https://search.bilibili.com/all?keyword=java%E5%9F%BA%E7%A1%80%E5%B0%9A%E7%A1%85%E8%B0%B7&from_source=web_search

获取URL的信息

 

window.location.href
"https://search.bilibili.com/all?keyword=java%E5%9F%BA%E7%A1%80%E5%B0%9A%E7%A1%85%E8%B0%B7&from_source=web_search"
window.location.protocol
"https:"
window.location.host
"search.bilibili.com"
window.location.port
""
window.location.pathname
"/all"
window.location.search
"?keyword=java%E5%9F%BA%E7%A1%80%E5%B0%9A%E7%A1%85%E8%B0%B7&from_source=web_search"
window.location.hash
""

5 document

document 对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结,document 对象就是整个DOM树的根节点。

常用的document属性

document.cookie //获取用户的cookie信息。

document.scripts //返回页面中所有脚本的集合

document.title //获取文件title属性

document.URL //返回文件完整URL

document. getElementsById() //获取一个指定id的标签

document.getElementsByTagName() //获取一组指定标签名的集合。

document. getElementsByClassName() //获取一组指定类名的集合。

document可以有效的对标签元素进行操作。

6 history

history不建议再使用。

标签:浏览器,对象,JavaScript,JS,window,BOM,navigator,document,location
来源: https://blog.csdn.net/super1223/article/details/117767594

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有