前言：

本文内容：操作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>