第3章 HTML5中的对象

3.1 文档对象模型入门

浏览器打开HTML文档时会根据文档中的标签创建元素对象。元素对象是如JavaScript访问和操作HTML文档的接口。

3.1.1 文档对象模型的概念
3.1.2 通过DOM树访问元素
3.1.3 通过HTML选择器访问元素

3.1.1 文档对象模型的概念

文档对象模型（Document Object Model，缩写为DOM）是HTML向JavaScript提供的编程接口。DOM把HTML文档中的标签抽象为JavaScript语言中的对象。如图所示，HTML文档中的标签都可以通过DOM提供的编程接口访问。

下面是一段示例代码，有三层嵌套的标签


<!DOCTYPE html>
<html>
	<head>
		页面标题
	</head>
	<body>
		章节标题1
		段落文字1
		
		章节标题2
		段落文字2
	</body>
</html>

上面代码3个层次，<html>标签是最外层的元素。下面是<head>和<body>，其中又有各自的内容，他们构成了树形结构。如下图：

DOM也常被称为DOM树，因为它通常具有树形结构。DOM提供了通过这种树状的层次结构，访问HTML 标签对象的能力。

3.1.2 通过DOM树访问元素

document对象是一个页面全局对象，是自动生成的，也就是浏览器解析每个页面后都会自动生成一个 document对象。document对象就对应着HTML文档中的HTML标签。

3.1.3 通过HTML选择器访问元素

复杂的HTML文档或者DOM会有多层错综复杂的结构。这种情况下通过这种层级结构访问很不方便。 HTML提供了多种选择特定元素的方法，比如按照标签属性选择，常用的是根据id属性、name属性和 class属性选择，还可以通过标签名选择

3.2 window对象

window对象是代表浏览器窗口的全局对象，提供了与浏览器窗口交互的能力。

3.2.1 通过window对象获取浏览器窗口大小
3.2.2 通过window对象获取浏览器窗口相对位置
3.2.3 通过window对象与用户交互
3.2.4 通过window对象滚动到指定位置
3.2.5 通过window对象打开和关闭窗口
3.2.6 通过window实现base64编码解码
3.2.7 window对象的子对象

3.2.1 通过window对象获取浏览器窗口大小

很多时候需根据窗口显示区域的大小决定内容的大小和布局，从而实现最佳的展示效果

下面代码使用alert方法在对话框中展示了当前窗口的宽度和高度。


							
							    <meta charset="utf-8" />
            <script>
            alert("窗口的高度是" + window.innerHeight + "像素"); 
            alert("窗口的宽度是" + window.innerWidth + "像素");
					       </script>

3.2.2 通过window对象获取浏览器窗口相对位置

当页面文档内容的宽度或高度超过窗口大小时，浏览器窗口只显示当前窗口内可容纳的内容，同时显示滚动条允许用户滚动窗口从而浏览完整的文档内容

3.2.3 通过window对象与用户交互

除了只读属性，window对象还提供了一些方法供调用，通过方法的调用，可以产生与用户的交互。与用户交互简单的说就是向用户传递信息和从用户那里获取信息（即获取用户输入）。

例如在HTML5文档中插入下面的代码，调用alert，confirm与prompt方法。


							<script>
							alert('来自网页的问侯');
							let result = confirm('来自网页的询问');
							alert('您刚刚点击的结果是：' + result);result = prompt('请输入文字：');
							alert('您刚刚输入的文字是：' + result);
							</script>

在Edge浏览器中运行上面代码的效果如下图：

3.2.4 通过window对象滚动到指定位置

当需要通过程序要滚动窗口时，可通过window对象提供的方法执行。两种用法的示例代码如下:


							<script>
								window.scrollTo(0, 500);
								window.scrollTo({
								left: 0,
								top: 500,
								behavior: 'instant'
								});
							</script>

3.2.5 通过window对象打开和关闭窗口

window对象还提供了打开或关闭窗口的能力。如下面代码


							<script>
								window.open('https://es2q.com')
							</script>

3.2.6 通过window实现base64编码解码

window对象还提供了许多通用功能。btoa和atob用于实现字符串的base64编码和解码功能。下面的代码演示了这两个方法的使用。


								<script>
								let x = window.btoa('https://es2q.com');   // 进行base64编码
								let y = window.atob(x);                  // 进行base64解码
								</script>

3.2.7 window对象的子对象

window对象包含众多的属性，方法和子对象。下面的章节将继续展开介绍window对象的子对象的使用

3.3 document对象

document对象是window对象的子对象。对于HTML5页面开发至关重要。

3.3.1 document对象的属性
3.3.2 通过document对象选择元素
3.3.3 通过id选择一个元素
3.3.4 通过标签名、class或name选择多个元素
3.3.5 通过createElement和append修改页面

3.3.1 document对象的属性

document对象对应整个DOM树，是整个页面的可视部分。通过document对象可以选择页面内容，读取页面内容，和修改页面内容

3.3.2 通过document对象选择元素

document.body对应了页面的<body>元素。而document.head对应了文档的<head>标签。

3.3.3 通过id选择一个元素

前面介绍过对于有id的标签，浏览器会生成与id同名的全局变量，可以直接在当前页面嵌入JavaScript代码引用它们。

3.3.4 通过标签名、class或name选择多个元素

createElement方法用于创建新的元素对象，而append方法则用于把创建出来的元素插入到页面中。

3.4 console对象

console对象对应开发者工具中的控制台标签。可以用于输出调试信息。普通用户很少会打开控制台，一般不会察觉到这里输出的内容。但这些输出对于调试非常重要。开发人员可以在这里输出代码调试信息。

3.4.1 通过console输出日志
3.4.2 通过console调试

3.4.1 通过console输出日志

最常用的输出方法是console.log()。该方法不仅可以输出文本信息，还可以直接输出JavaScript中的对象，输出的对象可以直接在控制台中查看，甚至有的浏览器提供了保存输出的对象为全局变量的功能，可以继续进行交互式调试。

3.4.2 通过console调试

console.assert提供了断言功能，即console.assert可以接受一个参数，如果该参数为false，程序终止执行并提示错误信息。如果参数为true则什么也不发生。assert的参数往往是一个条件判断表达式，这个表达式按照开发者的期望应该永远为真。

3.5 location对象

location对象用于与浏览器的地址交互。

3.5.1 通过location对象跳转页面
3.5.2 通过location对象读取页面地址
3.5.3 通过location对象获取URL参数

3.5.1 通过location对象跳转页面

location.href属性可以读取到当前正在访问的地址。而修改这个值可以直接使页面跳转到指定网址。如下面代码：


								<script>
								location.href = 'https://es2q.com/html5/';
								</script>

3.5.2 通过location对象读取页面地址

location.host可以获取当前页面的主机名。location.pathname获取路径名。location.protocol 获取当前使用的协议。location.search获取页面的query参数。location.hash获取URL的hash信息。 location.port可以获取URL的主机的端口号。

3.5.3 通过location对象获取URL参数

URL参数主要有query和hash。通常来说query改变会导致浏览器页面刷新，而hash改变则不会引发浏览器页面的刷新。可以通过字符串处理的方式从URL中提取参数。

3.6 navigator对象

navigator代表浏览器对象，通过navigator对象可以获得关于浏览器的信息，比如浏览器版本，浏览器运行的操作系统等多种信息

3.6.1 通过navigator对象获取浏览器信息
3.6.2 navigator对象的应用

3.6.1 通过navigator对象获取浏览器信息

navigator.userAgent是一个字符串，它是浏览器的User Agent信息，也会包含在浏览器发送给服务器的HTTP 请求头中。常用来鉴别浏览器以及操作系统。

3.6.2 navigator对象的应用

navigator对象有多种应用，比如区分设备的操作系统和浏览器版本。如今浏览网页的设备多种多样，通过navigator 的信息可以区分不同设备，并在界面上予以不同的优化以提升用户体验

3.7 小结

本章介绍了HTML5中的对象，他们是HTML和JavaScript间沟通的桥梁。因为有了这些对象，JavaScript可以方便高效的操作HTML页面，HTML也经有它们获得了JavaScript动态的力量。

3.8 课堂练习—开发显示浏览器信息的HTML5程序

综合本章内容实现一个综合项目，动态获取信息，并动态修改页面元素，把这些信息展示给用户。

3.8.1 背景介绍
3.8.2 获取信息
3.8.3 展示信息

3.8.1 背景介绍

开发一个单页面小工具，利用navigator对象获取浏览器和操作系统信息。使用document对象的接口写在页面上。

3.8.2 获取信息

根据要求可以通过location.href或document.URL拿到当前页面地址信息。navigator的userAgent获取浏览器 User Agent。通过navigator.platform获取用户浏览器运行的系统平台名称。


								<script>
								let ua = navigator. userAgent;
        let url = location.href;
        let platform = navigator.platform;
								</script>

3.8.3 展示信息

通过向document.body写入HTML信息把上一步获取到的信息展示在页面中，代码如下所示：


<meta charset='utf8'>
<body>
</body>
<script> 
let ua = navigator. userAgent;
let url = location.href;
let platform = navigator.platform;
document.body.innerHTML += '操作系统平台：' + platform + '';
document.body.innerHTML += 'User Agent：' + ua + '';
document.body.innerHTML += '当前访问：' + url + '';
</script>

显示结果如图:

3.9 课堂练习— 2048小游戏：自动适应屏幕的界面

本小节将开发一个自动适应屏幕大小的HTML5正方形游戏界面，如棋类游戏的棋盘，2048或数独类游戏的方格都可以用这样的技术实现。

3.9.1 HTML5游戏背景介绍
3.9.2 2048小游戏界面
3.9.3 获取屏幕大小判断屏幕比例
3.9.4 窗口大小与页面布局
3.9.5 设置<svg>元素的宽高与背景

3.9.1 HTML5游戏背景介绍

HTML5常常用来开发游戏、数据大屏等应用类页面。这类应用可能需要在不同尺寸的屏幕上运行。如何在这些屏幕上均能取得良好的显示效果是一个非常重要的问题。

3.9.2 2048小游戏界面

2048小游戏通常由一个4×4的正方形界面构成。效果如图:

从本小节开始，直到后面章节，将一步一步实现一个可以真正运行的2048小游戏。

3.9.3 获取屏幕大小判断屏幕比例

一般来说开发人员不必关心窗口外部大小，只需要关注innerHeight和innerWidth即窗口内，展示内容的区域的大小。

编写下面的代码，把屏幕宽高保持在变量中，比较他们的大小并生成输出提示内容，使用alert方法提示用户。


<meta charset='utf8'/>
<script>
let width = window.innerWidth;   // 窗口内宽度
let height = window.innerHeight; // 窗口内高度
let msg = ""   // 关于窗口宽高的提示信息，先设为空字符串
if (width > height) {
    msg = "窗口宽度大于高度";
}
else if (width < height) {
    msg = "窗口高度大于宽度";
}
else {
    msg = "窗口宽高相等";
}
alert("窗口宽度是：" + width + "像素\n" + "窗口高度是：" + height + "像素\n" + msg);
<
/script>

在浏览器中打开，若使用开发者工具模拟iPad Pro的竖屏状态的屏幕，可以看到程序正确提示出了窗口的大小，并判断出屏幕高度大于宽度，可以根据这样的判断结果对屏幕进行不同的布局处理。

3.9.4 窗口大小与页面布局

对于单页面HTML5应用的主页，有的可以设置为全屏不可滚动的入口页，有的可以纵向滚动以展示更多内容，有的可以向任意方向滚动，有的可以在不同的视频间切换。上述种种情况均需要在应用或页面初始化的时候获取屏幕高度，并根据设计进行布局。

3.9.5 设置<svg>元素的宽高与背景

可以根据元素id属性来选择元素。更简单的方法是，浏览器会自动生成与元素id同名的全局变量。直接使用全局变量名即可操作对应的HTML5元素。实现如下代码:




<script>
let width = window.innerWidth;   // 窗口内宽度
let height = window.innerHeight; // 窗口内高度
if (width > height) {
    svg.style.height = height + "px";
    svg.style.width = height + "px";
}
else {
    svg.style.height = width + "px";
    svg.style.width = width + "px";
}
</script>

将<svg>标签的背景颜色设为黑色。效果如图

3.10 课堂练习— 2048小游戏：绘制方格

本练习将在上节基础上，给游戏界面中添加方格，并通过本章学习的URL参数的方法实现方格行列数量根据参数动态调整的功能。

3.10.1 绘制方格
3.10.2 通过hash参数实现方格数量变化

3.10.1 绘制方格

3.10的课堂练习中仅绘制了黑色的背景，学习完本节，可以继续完善这个项目，绘制4×4的方块。

3.10.2 通过hash参数实现方格数量变化

仅需要在绘制方格之前，预先读取URL的hash参数，转换为整数，并赋值给cnt即可实现方格数量动态变化。