WEB基础之：客户端网页 API
客户端网页 API
1. web浏览器的重要部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFZyK5yI-1610672830621)(https://mdn.mozillademos.org/files/14557/document-window-navigator.png)]
navigator表示浏览器存在于web上的状态和标识（即用户代理）。在JavaScript中，用Navigator来表示。你可以用这个对象获取一些信息，比如来自用户摄像头的地理信息、用户偏爱的语言、多媒体流等等。window是载入浏览器的标签，在JavaScript中用Window对象来表示，使用这个对象的可用方法，你可以返回窗口的大小（参见Window.innerWidth和Window.innerHeight），操作载入窗口的文档，存储客户端上文档的特殊数据（例如使用本地数据库或其他存储设备），为当前窗口绑定event handler，等等。document（在浏览器中用DOM表示）是载入窗口的实际页面，在JavaScript中用Document 对象表示，你可以用这个对象来返回和操作文档中HTML和CSS上的信息。例如获取DOM中一个元素的引用，修改其文本内容，并应用新的样式，创建新的元素并添加为当前元素的子元素，甚至把他们一起删除。
2. 文档对象模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple DOM example</title>
</head>
<body>
<section>
<img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
<p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
</section>
</body>
</html>
- 元素节点: 一个元素，存在于DOM中。
- 根节点: 树中顶层节点，在HTML的情况下，总是一个
HTML节点。 - 子节点: 直接位于另一个节点内的节点。例如上面例子中，
IMG是SECTION的子节点。 - 后代节点: 位于另一个节点内任意位置的节点。例如 上面例子中，
IMG是SECTION的子节点，也是一个后代节点。IMG不是BODY的子节点，因为它在树中低了BODY两级，但它是BODY的后代之一。 - 父节点: 里面有另一个节点的节点。例如上面的例子中
BODY是SECTION的父节点。 - 兄弟节点: DOM树中位于同一等级的节点。例如上面例子中，
IMG和P是兄弟。 - 文本节点: 包含文字串的节点
3. 基本的DOM 操作
3.1 创建并放置新的节点
<body>
<section>section 1</section>
<script>
let sect = document.querySelector('section'); //选择section元素
let para = document.createElement('p'); //创建p元素，并写入内容
para.textContent = 'We hope you enjoyed the ride.';
sect.appendChild(para); //插入p元素作为section元素的子元素
var text = document.createTextNode(' — the premier source for web development knowledge.');
var linkPara = document.querySelector('p');
linkPara.appendChild(text);
</script>
</body>
3.2 移动和删除元素
sect.appendChild(linkPara); //把具有内部链接的段落移到sectioin的底部
new_para =para.cloneNode(linkPara) //做一个副本并也把它添加进去
sect.appendChild(new_para)
sect.removeChild(linkPara); //删除节点
linkPara.parentNode.removeChild(linkPara); //删除一个仅基于自身引用的节点
3.3 操作样式
para.style.color = 'white';
para.style.backgroundColor = 'black';
para.setAttribute('class', 'hightligth') //在段落中设置类名为highlight
4. Window对象
Window 对象表示浏览器中打开的窗口。如果文档包含框架（<frame>或 <iframe>标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
4.1 Window 对象属性
| 属性 | 描述 |
|---|---|
closed | 返回窗口是否已被关闭。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| location | 返回窗口的当前 URL 的信息。 window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。 window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| length | 设置或返回窗口中的框架数量 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
4.2 window对象方法
| 方法 | 描述 |
|---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
prompt() | 显示可提示用户输入的对话框。 |
| atob(‘YWRtaW4=’); | 解码一个 base-64 编码的字符串。 |
| btoa(‘admin’); | 创建一个 base-64 编码的字符串。 |
setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
clearInterval() | 取消由 setInterval() 设置的 timer。 |
Timeout() | 在指定的毫秒数后调用函数或计算表达式。 |
clearTimeout(); | 取消由 setTimeout() 方法设置的 timeout。 |
focus() | 把键盘焦点给予一个窗口。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
scrollTo(xpos,ypos) | 把内容滚动到指定的坐标。 |
stop() | 停止页面载入。 |
例：
//创建计时器
let myTimer = setInterval(function fun(){alert('hello');},5000);
myTimer;
//取消计时器
clearInterval(myTimer);
