前端基础学习（4） BOM DOM 节点操作 事件
一、今日内容
- BOM (Browser Object Model)
- DOM (Documentaty Object Model)
- 事件
二、BOM
BOM，即浏览器对象模型，顾名思义，就是利用 JavaScript 实现一些对浏览器对象的操作；主要包含 window 对象、计时器、弹出框等，以及 window 对象的子对象 navigator 对象、screen 对象、history 对象、location 对象；
-
window 对象
当我们在浏览器控制台声明一个新变量
var name = 'hello world';，我们可以发现通过window.name获取到与name相同的结果，这是因为其实我们在控制台声明的所有变量，其实都是在 window 对象下声明的，下面介绍的其他对象，也都是 window 对象的子对象；window 对象表示浏览器窗口，它具备如下一些方法：window.innerHeight // 浏览器窗口的内部高度 window.innerWidth // 浏览器窗口的内部宽度 window.open(); // 打开新窗口 window.open(); // 关闭当前窗口（只能关闭由window.open()打开的页面） -
navigator 对象
navigator 对象指的是浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符表 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统 -
screen 对象
screen 对象代表屏幕对象。
screen.availWidth // 可用的屏幕亮度 screen.availHeight // 可用的屏幕高度 -
history 对象
history 对象包含浏览器的历史，通过浏览历史对象，我们无法查看具体的URL，只能简单的用来前进或者后退一个页面。
history.forward() // 前进一页 history.back() // 后退一页 -
location 对象
location 对象可以获取当前页面的URL，并且把浏览器重新定向到新的页面。
location.href // 获取URL location.href = "URL"; // 跳转到指定页面 location.reload(); // 重新加载页面，就是刷新一下页面 -
弹出框
可以通过 JavaScript 创建三种消息框：警告框、确认框、提示框；
-
警告框
alert("这是一个警告框");
-
确认框
如果点击确认，返回值为 true，如果点击取消，返回值为 false；
confirm("这是一个确认框");
-
提示框
如果点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值返回 null；
prompt("这是一个提示框", '默认返回值');
-
计时相关
在 JavaScript 中，我们可以设定一个时间计时对象，来实现一定时间间隔后执行部分代码，而不是函数被调用后立即执行，我么称之为计时事件；
-
setTimeout 一段时间后执行
var t = setTimeout("console.log('hello world');", 1000); // 第一个参数为执行语句，第二个参数为延迟时间，以ms为单位 // 注意：第一个参数js语句最好是写一个函数，不然一般的js语句到这里就会直接执行，先用函数封装一下，返回的为id值 setTimeout(confirm(), 3000); // 会立即执行 setTimeout("confirm();", 3000); // 延迟后执行 setTimeout(confirm, 3000); // 延迟执行 setTimeout(function () {confirm();}, 3000); // 推荐使用方式，与上面的那种等价（无参数情况下）利用 clearTimeout 清除计时事件：
var a = setTimeout(confirm, 3000); clearTimeout(a); -
setInterval 每隔一段时间执行
用法与 setTimeout 相同，同样利用 clearInterval 可以清除计时事件；
-
-
三、DOM
DOM，即文档对象模型是一套对文档的内容进行抽象和概念化的方法。当网页被加载时，浏览器会创建页面的文档对象模型，DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
-
节点层次
DOM 可以将任何 HTML 文件描绘成一个由多层节点构成的结构。节点可以分为几种不同的类型，每种类型分别表示文档中不同的信息及标记，每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。下面以一个 HTML 为例：
<html> <head> <title>Sample Page</title> </head> <body> <p>hello world!</p> </body> <html>可以将这个简单的 HTML 文档表示为一个层次结构：
-
查找标签
DOM 支持通过节点层级结构寻找节点的操作，同时也可以根据节点的位置寻找关联的节点；
-
直接查找
document.getElementsById('id'); // 根据ID获取一个标签，返回标签对象 document.getElementsByClassName('className'); // 根据class属性获取(获取多个值以列表形式返回) document.getElementByTagName('tagName'); // 根据标签名获取（获取多个值以列表形式返回） -
间接查找
var a = document.getElementById('ID'); a.parentElement; // 父节点标签元素 a.children; // 所有子标签 a.firstElementChild; // 第一个子标签元素 a.lastElementChild; // 最后一个子标签元素 a.nextElementSibling; // 下一个兄弟标签元素 a.previousElementSibling; // 上一个兄弟标签元素
-
-
节点操作
-
创建节点（即创建标签）
// 后插法 var a = document.createElement('a'); var dd = document.getElementById('dd'); dd.appendChild(a); // 将创建的a标签添加到dd标签的最后 // 前插法 var d = document.getElementById('div'); // 父级标签 var a = document.createElement('a'); // 创建一个新的a标签 var d2 = d.children[0]; // 找到父级标签的某个儿子标签 d.insertBefore(a, d2); // 将a标签插入到d2儿子标签的前面 // 删除节点 d.remove(a); // 儿子替换 d.replaceChild(a, d2); // 用a替换d2节点 -
文本操作
// 修改节点内文本 d.innerText = "hello world"; // 中间添加html内容 d.innerHTML = "<a href='https://www.baidu.com'>百度</a>";
-
-
属性值操作
var d = document.getElementById('div'); d.setAttribute('href', 'http://www.baidu.com'); // 设置属性值 d.getAttribute('href'); // 获取属性值 d.removeAttribute('href'); // 移除属性 -
class 属性操作
var d = document.getElementById('div'); d.classList; // 获取d的class属性 d.classList.add('cls_demo'); // 增加对应的class值 d.classList.remove('cls_demo'); // 删除对应的class值 d.classList.contains('cls_demo'); // 判别有无该class值，返回boolean值 d.classList.toggle('cls_demo'); // 如果有对应class值就删除，如果没有就添加 -
CSS 操作
var d = document.getElementById('div'); d.style.backgroundColor = 'deeppink'; // 有横杠的CSS属性，写法改为骆驼法； d.style.height = '1000px';
四、事件
JavaScript 和 HTML 之间的交互是通过事件来实现的，事件处理程序（事件侦听器）即相应某个时间的函数，他们都以 on 开头，如 onclick 是处理 click 时间的事件处理程序：
<!--绑定事件方式1-->
<div id="d1" class="c1" onclick="f1();"></div>
<script>
function f1() {
var d = document.getElemetnById('d1');
d.style.backgroundColor = 'yellow';
}
</script>
<!--绑定事件方式2-->
<div id="d1" class="c1"></div>
<script>
var d = document.getElemetnById('d1');
d.onclick = function f1() {
d.style.backgroundColor = 'yellow';
}
</script>
<!--绑定的函数还可以传参-->
<div id="d1" class="c1" onclick="f1(this);"></div>
<script>
function f1(ths){
// var d = document.getElementById('d1');
ths.style.backgroundColor = 'yellow';
}
</script>
除了 onclick 外，事件处理程序还包括：
// onclick事件，单击某个对象触发
// ondblclick事件，双击某个对象触发
// onfocus事件，获取光标触发
// onblur事件，失去光标触发
// onchange事件，内容发生变化时触发的事件
// onkeydown 某个键盘按键被按下
// onkeypress 某个键盘按键被按下并松开
// onkeyup 某个键盘按键被松开
// onload 一张页面或者一副图像完成加载
// onmousedown 鼠标按钮被按下
// onmousemove 鼠标被移动
// onmouseout 鼠标从某元素移开
// onmouseover 鼠标移动到某元素上
// onselect 在文本框中的文本被选中
// onsubmit 确认按钮被点击