Java教程

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

本文主要是介绍JavaScript从放弃到入门(四)| JS操作BOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

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操作BOM的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!