前言:

本文内容:操作BOM对象、获得DOM节点、更新DOM节点

推荐免费JavaScript基础讲解视频:【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

操作BOM对象

JavaScript诞生就是为了能够在浏览器中运行!

BOM:浏览器对象模型

  • IE 6-11
  • Chrom
  • Safari
  • FireFox

Window

window代表 浏览器窗口。

1
2
3
4
5
6
7
8
9
10
11
// 常用获取窗口宽度高度
window.alert('jokerdig')
undefined
window.innerHeight
722
window.innerWidth
951
window.outerHeight
824
window.outerWidth
1536

Navigator封装了浏览器的信息。

1
2
3
4
5
6
7
8
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'
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'
navigator.platform
'Win32'

大多数时候我们不适用navigator对象,因为可以被人为修改。

Screen

代表屏幕尺寸

1
2
3
4
screen.height
864
screen.width
1536

Location

location代表当前页面URL信息。

1
2
3
4
5
6
7
location
host: "cn.bing.com"
href: "https://cn.bing.com/chrome/newtab"
protocol: "https:" // 协议
reload: ƒ reload() // 重新加载 刷新网页
// 设置新的地址
location.assign('https://jokerdig.com')

Document

document代表当前页面,HTML DOM文档树。

1
2
3
4
5
6
document.title
'必应'
document.title='出错了(づ ̄ 3 ̄)づ'
'出错了(づ ̄ 3 ̄)づ'
document.title
'出错了(づ ̄ 3 ̄)づ'

获取具体的文档树节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl id="app">
<dt>JavaScript</dt>
<dd>Java</dd>
<dd>JavaEE</dd>
<dd>JavaSE</dd>
</dl>
<script>
var dl= document.getElementById('app')
</script>
</body>
</html>

获取cookie

1
2
document.cookie
'Hm_lvt_73ce72c8d50c16faa7230ffd058063db=1645854529; _clck=10jp5qg|1|ezb|0; Hm_lpvt_73ce72c8d50c16faa7230ffd058063db=164582377; _clsk=1fnjpdd|1645854378352|2|1|d.clarity.ms/collect'

cookie也可能被恶意劫持,造成隐私泄露。

服务器设置cookie:httpOnly 来保证安全

History

history代表浏览器历史记录。

1
2
history.back()// 后退
history.forward()// 前进

获得DOM节点

浏览器网页就是一个DOM树形结构。

  • 更新:更新DOM节点
  • 遍历DOM节点;得到DOM节点
  • 删除:删除一个DOM节点
  • 添加:添加一个新的节点

要操作一个DOM节点,就必须要先获得这个DOM节点。

获得DOM节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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');
// 获得父节点下的所有子节点
var children = father.children;
// father.firstChild;
// father.lastChild;
</script>
</body>
</html>

上方是原生代码,之后又更简洁的写法;

更新DOM节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--一个空的div-->
<div id="div1"></div>
<script>
// 获得对应DOM
var div1 = document.getElementById('div1');
// 修改文本 表示一个节点及其后代的“渲染”文本内容
div1.innerText='Hey,Joker';
// 修改HTML
div1.innerHTML='<strong>Hey,Joker</strong>'
// 修改css
div1.style.color='red';
</script>
</body>
</html>