今天学习了JavaScript 中两块重要的知识点 DOM 和 BOM，笔记如下：
什么是 DOM
DOM 的英文全称为 Document Object Model（文档对象模型），它是浏览器为每个窗口内的 HTML 页面创建的一个 document 对象来对页面的元素进行操作。
DOM 属性
常用的 DOM 属性如下表所示：
| 属性 | 描 述 |
|---|---|
| document.title | 获取文档的 title 元素。 |
| document.body | 获取文档的 body 元素。 |
| document.URL | 获取文档的 URL。 |
| document.forms | 获取文档的 form 元素。 |
| document.images | 获取文档的 img 元素。 |
| document.links | 获取文档的 a 元素。 |
| document.cookie | 获取文档的 cookie。 |
| document.referrer | 返回来用户当前浏览页面的 URL。 |
举例：
<script>
var get_title = document.title;
document.write("该页面标题为 " + get_title);
</script>
DOM 方法
常用的 DOM 方法如下表所示：
| 方法 | 描 述 |
|---|---|
| document.getElementById() | 通过 id 获取元素。 |
| document.getElementByTagName() | 通过标签名获取元素。 |
| document.getElementByClassName() | 通过 class 获取元素。 |
| document.getElementByName() | 通过 name 获取元素。 |
| document.querySelector() | 通过选择器获取第一个元素。 |
| document.querySelectorAll() | 通过选择器获取所有元素。 |
| document.createElement() | 创建元素节点。 |
| document.createTextNode() | 创建文本节点。 |
| document.write() | 输出内容。 |
| document.writeln() | 输出内容并换行。 |
举个例子！
<script>
// 改变元素的颜色
function changeColor() {
document.getElementById("demo").style.color = "blue";
</script>
BOM 的使用
什么是BOM
BOM（Browser Object Mode）是浏览器对象模型，通过操作对象的属性和方法来实现与浏览器的交互。
BOM 的构成如下所示：
window 是顶级对象
在 window 下面有：
- document 是 DOM 对象。
- location 是用于获取或设置窗体。
- navigation 包含浏览器配置相关的信息。
- history 浏览器的历史记录。
- screen 用于显示设备信息。
window 对象的方法如下所示：
| 方法 | 描 述 |
|---|---|
| alert() | 显示一个警告框。 |
| prompt() | 显示可提示用户输入的对话框。 |
| confirm() | 显示一个有确认和取消按钮的对话框。 |
| open() | 打开一个新的浏览器窗口。 |
| close() | 关闭浏览器。 |
| print() | 打印当前窗口内容。 |
举例
<script>
// 警告框
function myFunction1() {
alert("你好!");
}
</script>
<body>
<input type="button" onclick="myFunction1()" value="点我" />
</body>
location对象
什么是location对象
location对象是window对象的一个属性，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
location对象有以下常见的属性和方法：
| 属性/方法 | 内容 |
|---|---|
| host | 主机名：端口号 |
| hostname | 主机名 |
| href | 整个 URL |
| pathname | 路径名 |
| port | 端口号 |
| protocol | 协议部分 |
| search | 查询字符串 |
| reload() | 重载当前 URL |
| repalce() | 用新的 URL 替换当前页面 |
location对象不仅仅是window对象的一个属性，还是document对象的一个属性。
history对象
什么是history对象
history 对象是 window 对象的属性，它保存着用户上网的记录，这个记录的时间戳是从窗口被打开的那一刻算起。
history对象有以下常见的属性和方法：
| 属性/方法 | 描述 |
|---|---|
| length | history 对象中的记录数 |
| back() | 前往浏览器历史条目前一个 URL，类似后退 |
| forward() | 前往浏览器历史条目下一个 URL，类似前进 |
| go(num) | 浏览器在 history 对象中向前或向后 |
navigator对象
什么是navigator对象
navigator对象，是BOM中识别客户端浏览器的一个window属性。
与navigator相关的一些常见属性：
| 属性 | 说明 |
|---|---|
| appName | 完整的浏览器名称和版本信息 |
| platform | 浏览器所在的系统平台 |
| plugins | 浏览器中安装的插件信息的数 组 |
| userAgent | 浏览器的用户代理字符串 |
| userLanguage | 操作系统的默认语言 |
