BOM
BOM (Browser Object Model) is the browser object model, which is a special object provided by the browser, and we can operate it. For the study of BOM, in addition to understanding what these objects represent, you also need to learn to use its common methods
The following will introduce a total of 6 objects:
- window
- navigator
- screen
- location
- document (important)
- history (garbage)
Note: The initials above are all lowercase, after all, this is an object, not a class
1、window
Remember that JavaScript has a global object, its name is window, the window object can not only act as a global object, but also represent the browser window (that is, the web page window we open), which is generally used to obtain the width and height of the window inside and outside. Here is an explanation of what the outer window is, which is the entire browser you see, and the inner window is just the part of the web page we open (in fact, you can find out if you try it yourself)
//获取浏览器窗口的内高度、宽度
console.log("当前网页的内宽度是：" + window.innerWidth);
console.log("当前网页的内高度是：" + window.innerHeight);
//获取浏览器窗口的外高度、宽度
console.log("当前网页的外宽度是：" + window.outerWidth);
console.log("当前网页的外宽度是：" + window.outerHeight);
//打开指定的窗口
window.open("https://www.baidu.com/");
//关闭当前的窗口（copy 执行的时候记得注释掉）
window.close();
Console output:
2、navigator
Contains some basic browser information , such as browser version, application name, etc.
console.log("浏览器名称：" + navigator.appName);
//出于兼容性的考虑，目前任何的浏览器都可以返回 “Netscape”，个人觉得可能是缅怀网景公司吧
console.log("浏览器版本：" + navigator.appVersion);
console.log("浏览器语言：" + navigator.language);
Console output:
But please note that the information from the navigator object is misleading . Sometimes novices like to use navigator.appVersion to get the version to write different codes, but in fact this is not advisable. Let's change the browser version:
Object.defineProperty(window.navigator, 'appVersion', {
value: "This is wrong version, haha", writable: false});
console.log("浏览器版本：" + navigator.appVersion);
Current browser version:
3、screen
The literal translation is 'screen', which is actually the screen, which contains some information about the user's current screen (that is, your laptop screen)
console.log("当前屏幕的宽度是：" + screen.width);
console.log("当前屏幕的高度是：" + screen.height);
console.log("当前屏幕的色深是：" + screen.colorDepth);
Console output:
4、location
Get information about the URL of the current page , what is a URL you ask? It is the content in the address bar. The components include protocol, domain name, port, virtual directory, file name, etc.
//都写了是什么，自己看吧（结果就不展示了哈）
console.log("URL：" + location.href);
console.log("协议 " + location.protocol);
console.log("域名 " + location.host);
console.log("端口 " + location.port);
//重定向 URL
console.log(location.assign("https://www.baidu.com/"));
//刷新当前页面
console.log(location.reload());
5. document (important)
I personally think that the document object is very important, and then we will come into contact with DOM (Document Object Model), which is a tree-structured model, and document is the root node of the DOM tree . We can use document to obtain the nodes of the DOM tree and modify them. content or attributes. You may not understand it now, but it doesn’t matter, I will introduce the usage in detail in the DOM blog, and it’s enough to be familiar with it now
Because of the need to operate page elements, we all write the code in the HTML file this time:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<!-- 我希望你们不要忘了这种写法 -->
<script type="text/javascript">
function changeTitle() {
//修改页面的标题，就是 <head> 标签中的 <title> 标签
document.title = "This is document object";
}
function func1() {
//获取当前列表节点，并返回
return document.getElementById('language');
}
changeTitle();
</script>
</head>
<body>
<!-- 列表 -->
<ul id="language">
<li>C</li>
<li>C++</li>
<li>Python</li>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
We execute the func1() function on the console and check the result, we can see that the list node has been obtained:
There is another important attribute of document, that is Cookie
In layman's terms, cookies are used to let the browser remember you, store your personal information, and facilitate the next login . But please note that since the document can directly obtain the user's cookie, this will lead to the exposure of the user's personal information. The solution is that we can use httpOnly when setting the cookie on the server side, so that others cannot use JavaScript code to read the current page. cookies
//获取当前页面 Cookie
document.cookie;
6、history
Literally, it stores browser history. Actually, I shouldn’t talk about this object here, because it has been eliminated. Personally, I suggest not to use it. Forward and backward, it can be done better with AJAX
//看看俩方法就行，back() & forward()
//相当于浏览器的后退
history.back();
//相当于浏览器的前进
history.forward();