BOM与DOM
目录
1. BOM与DOM
JavaScript分为 ECMAScript，DOM，BOM
BOM (Browser Object Model): 是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
**DOM **(Document Object Model): 是指文档对象模型，通过它，可以访问HTML文档的所有元素。
2. BOM
2.1 window对象
所有浏览器都支持 window 对象。它表示浏览器窗口
常用的Window方法:
window.innerHeight; // 浏览器窗口的内部高度
625
window.innerWidth; // 浏览器窗口的内部宽度
740
window.open(); // 打开新窗口
window.close(); // 关闭当前窗口
2.2 window的子对象
2.2.1 navigator对象(了解)
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息
navigator.appName; // Web浏览器全称
"Netscape"
navigator.appVersion; // Web浏览器厂商和版本的详细字符串
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
navigator.userAgent; // 客户端绝大部分信息
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
navigator.platform; // 浏览器运行所在的操作系统
"Win32"
2.2.2 history对象(了解)
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面
window.history; // 对象包含浏览器的历史
history.forward(); // 前进一页
history.back(); // 后退一页
2.2.3 location对象
window.location; //对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
location.href; // 获取URL
location.href="https://www.baidu.com"; // 跳转到指定页面
location.reload(); // 重新加载页面
2.2.4 弹出框
JavaScript 中可以创建三种消息框：警告框、确认框、提示框
alert("警告框");
confirm("确认框");
prompt("提示框","你的答案")；
2.2.5 计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件
// setTimeout()方法会返回某个值
// 在指定时间之后执行一次相应函数
var t=setTimeout('alert("hahahaha")',2000);
// 取消setTimeout设置
clearTimeout(timer);
// setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。
// 每隔一段时间就执行一次相应函数
var t = setInterval(function(){console.log(123);},3000)
// clearInterval()方法可取消由setInterval()设置的 timeout。它的参数必须是由setInterval()返回的ID值
clearInterval(t);
3. DOM
3.1 HTML DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node)
JavaScript 能够改变页面中的所有 HTML 元素，所有 HTML 属性，所有 CSS 样式，能够对页面中的所有事件做出反应
3.2 查找标签
3.2.1 直接查找
a1Ele = document.getElementById('a1'); // 根据ID获取一个标签
// <div class="a" id="a1">div111</div>
b1Ele = document.getElementsByClassName('b1'); // 根据class属性获取
// HTMLCollection [div#b1.b.b1.b2, b1: div#b1.b.b1.b2]
b1Ele = document.getElementsByClassName('b')[0];
// <div class="b b1 b2" id="b1">…</div>
aEle = document.getElementsByTagName('a'); // 根据标签名获取标签合集
// HTMLCollection [a]
aEle = document.getElementsByTagName('a')[0];
// <a href>a标签</a>
3.2.2 间接查找
d1Ele.parentElement; // 父节点标签元素
// <div class="b b1 b2" id="b1">…</div>
d1Ele.children; // 所有子标签
// HTMLCollection [a]
d1Ele.children[0];
// <a href>a标签</a>
b1Ele.firstElementChild; // 第一个子标签元素
// <span class="c" id="c1">div222下的span</span>
b1Ele.lastElementChild; // 最后一个子标签元素
// <div class="d" id="d1">…</div>
d1Ele.nextElementSibling; // 下一个兄弟标签元素
// null
d1Ele.previousElementSibling; // 上一个兄弟标签元素
// <span class="c" id="c1">div222下的span</span>
3.2.3 节点操作
// 创建节点
var imgEle = document.createElement('img');
imgEle.src='1.jpg';
// 添加节点
a1.appendChild(imgEle); // 追加一个子节点（作为最后的子节点）
b1Ele.insertBefore(imgEle,c1Ele); // 把增加的节点放到某个节点的前边
// 删除节点
b1Ele.removeChild(imgEle);
// 属性节点
// 获取文本节点的值
var divEle = document.getElementById('d1');
divEle.innerText;
// "div222下的diva标签"
divEle.innerHTML;
// "div222下的div<a href="">a标签</a>"
// 设置文本节点的值
divEle.innerText='222222';
// "222222"
divEle.innerHTML='div222下的div<a href="">a标签</a>';
// "div222下的div<a href="">a标签</a>"
// attribute操作
var e1Ele = document.getElementById('e1');
e1Ele.setAttribute('age','3');
e1Ele.getAttribute('age');
"3"
e1.removeAttribute('age');
// 获取值操作
// 适用于 input,select,textarea
var iEle = document.getElementsByTagName('input')[0];
console.log(iEle.value);
// 123
// class操作
b1Ele.className; // 获取所有样式类名(字符串)
// "b b1 b2"
b1Ele.classList;
// DOMTokenList(3) ["b", "b1", "b2", value: "b b1 b2"]
b1Ele.classList.remove('b'); // 删除指定类
b1Ele.classList;
// DOMTokenList(2) ["b1", "b2", value: "b1 b2"]
b1Ele.classList.add('b'); // 添加类
b1Ele.classList;
// DOMTokenList(3) ["b1", "b2", "b", value: "b1 b2 b"]
b1Ele.classList.contains('b'); // 类存在返回true，否则返回false
// true
b1Ele.classList.toggle('b'); // 类存在就删除，否则添加
// false
// 指定CSS操作
b1Ele.style.backgroundColor='red';
// "red"
3.3 事件
3.3.1 常用事件
onclick: 当用户点击某个对象时调用的事件句柄
ondblclick: 当用户双击某个对象时调用的事件句柄
onfocus: 元素获得焦点
onblur: 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证
onchange: 域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发（select联动）
onkeydown: 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交
onkeypress: 某个键盘按键被按下并松开
onkeyup: 某个键盘按键被松开
onload: 一张页面或一幅图像完成加载
onmousedown: 鼠标按钮被按下
onmousemove: 鼠标被移动
onmouseout: 鼠标从某元素移开
onmouseover: 鼠标移到某元素之上
onselect: 在文本框中的文本被选中时发生
onsubmit: 确认按钮被点击，使用的对象是form
3.3.2 绑定方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<!-- <script>-->
<!-- window.onload事件在文件加载过程结束的时候触发, .onload()函数存在覆盖现象-->
<!-- window.onload=function () {-->
<!-- var a1Ele = document.getElementById('a1')-->
<!-- console.log(a1Ele)-->
<!-- }-->
<!-- </script>-->
</head>
<body>
<div id="a1" onclick="f(this)">内容，绑定事件方法一</div>
<div id="a2">内容，绑定事件方法二</div>
<script>
//绑定事件方法一
// window对象
console.log(this); // this是实参，表示触发事件的当前元素
function f(_this) { // _this是形参
// window对象
console.log(this);
//当前函数的调用者
console.log(_this);
//结束事件: 下面的语句都不执行
// return false;
alert('123')
}
//绑定事件方法二
var a2Ele = document.getElementById('a2')
a2Ele.onclick = function () {
alert(3)
}
</script>
</body>
</html>
4. 时间显示器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间显示器</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="stop">
<script>
var t;
var i1Ele = document.getElementById('i1');
var startELe = document.getElementById('start');
var stopELe = document.getElementById('stop');
function ShowTime() {
var day = new Date();
var time = day.toLocaleString();
i1Ele.value = time;
}
startELe.onclick = function () {
if (!t){
t = setInterval(ShowTime,1000);
}
};
stopELe.onclick = function () {
clearInterval(t);
t = ''
};
</script>
</body>
</html>
