一、操作BOM对象
1,1浏览器介绍
JavaScript 和浏览器关系
JavaScript 诞生就是为了能够让他在浏览器中运行
BOM浏览器对象模型
window
window代表浏览器窗口,调整浏览器窗口也可以改变高度和宽度
window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
886
window.outerHeight
908
window.outerWidth
901
navigator
封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.56'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.56'
navigator.platform
'Win32'
大多数时候我们不会使用navigator对象,因为会被人为修改
screen
代表屏幕尺寸
screen.width
1440
screen.height
960
location(重要)
代表当前页面的url信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=44004473_27_oem_dg"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('某个网页网址')
document
document代表当前的页面,HTML DOM文档树
document.title
'百度一下,你就知道'
document.title='名字'
'名字'
取具体的文档树节点
<dl id="dl">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
history
history.back() //后退
history.forward() //前进
二、操作DOM对象(重点)
2.1核心:
浏览器网页就是一个DOM树形结构
更新:更新DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获得DOM节点</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
</script>
</body>
</html>
var childrens = father.children;
//father.firstChild
//father.lastChild