day28-BOM和DOM（上）

BOM

BOM 是三个单词的首拼 --Browser Object Model ，即浏览器对象模型。

既然是对象模型，那么所有内容，都是用对象来描述的。

BOM 中最大的对象叫 window ，是浏览器窗口对象。他包含了很多浏览器的操作。

浏览器的信息

浏览器的名称、版本等信息。关于浏览器的信息， window 交给了他的子对象 navigator 去记录

console.log(window.navigator.appCodeName);         // 返回浏览器的代码名

console.log(window.navigator.appName);         // 返回浏览器的名称

console.log(window.navigator.appVersion);         // 返回浏览器的平台和版本信息

console.log(window.navigator.cookieEnabled); // 返回指明浏览器是否启用cookie的布尔值

console.log(window.navigator.platform);         // 返回运行浏览器的操作系统平台

console.log(window.navigator.userAgent); // 返回由客户机发送服务器的user-agent头部的值

使用说明：其实 navigator 对象是属于 window 对象的，但是 window 是所有对象的顶级对象，所以通常在写的时候，可以省略掉window 。

 浏览器的历史记录

历史记录的操作是 window 的子对象 history 。可以操作网页的前进和后退。

history.back();         # 返回到上一个页面，相当于浏览器的后退按钮

history.forward();         # 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮

history.go()      

浏览器的地址栏信息

浏览器的地址栏操作， window 对象交给了自己的子对象 location 对象去处理。

console.log(location.hash);         // 设置或返回从#开始的url --- 锚点

console.log(location.href);         // 设置或返回完整的的url

console.log(location.search);         // 设置或返回url中的参数部分

方法：

语法：
location.assign("要跳转的地址"); # 这个方法是设置要跳转的地址 
location.reload(); # 重新加载本页面 
location.replace() # 使用新地址替换掉旧地址（跳转）

浏览器的弹出层

window.alert("恭喜你！"); 
window.prompt("请输入数字：",1); 
window.confirm("你确定要删除吗？")

浏览器窗口尺寸

         window.innerHeight - 浏览器窗口的高度

        window.innerWidth - 浏览器窗口的宽度

var w = window.innerWidth; 
console.log(w); 
var h = window.innerHeight; 
console.log(h);

说明：

        1. 这两个属性返回的单位是像素

        2. 这两个属性计算的范围包含滚动条的区域

浏览器的事件

         onload事件：当网页中的所有资源都加在完成之后执行这个事件

window.onload = function(){
 console.log("当网页中所有资源加载完成才打印"); 
}

使用说明：通常是将 script 标签放到 head 标签中的时候使用。因为放在 head 中默认是获取不到 body 中的内容的，但 是有了这个事件后，就可以了。

         onscroll 滚动事件：当网页滚动条的位置发生改变的时候触发这个事件

window.onscroll = function () {
 console.log('浏览器滚动了') 
}

使用说明：浏览器要有滚动条才行。

         浏览器窗口改变事件：resize

window.onresize = function(){
 // 当浏览器的窗口大小发生改变的时候触发这个事件 
}

浏览器滚动的距离

获取文档向下滚动的距离，以下两个都可以：

         document.documentElement.scrollTop

        document.body.scrollTop

window.onscroll = function () {
 var t = document.documentElement.scrollTop; 
 console.log(t);
 var t1 = document.body.scrollTop;
 console.log(t1); 
}

使用说明：这两个的区别在于当前文档有没有 doctype ，

有就document.documentElement.scrollTop ，没有就用 document.body.scrollTop

获取页面向右滚动的距离：

         document.body.scrollLeft

        document.documentElement.scrollLeft

使用方式同上。

使用兼容写法：

var t = document.documentElement.scrollTop || document.body.scrollTop; 
var l = document.documentElement.scrollLeft || document.body.scrollLeft;

短路运算

当我们将一个变量赋值给另一个变量的时候，通常需要做判断：如果这个变量有值就赋值，如果变量没有值或是 undefifined或 null 的时候，就赋一个默认的值。这个判断可以省略分支结构使用一个简短的语法来表示 - 短路运算。

短路运算的符号有两个： || 和 &&

var a; 
var b = a || 2; // 如果a有值，就将值赋给b，如果a没有值，就给b赋2 - 此时是将2赋给b

var a = 3; 
var b = a || 2; // 如果a有值，就将值赋给b，如果a没有值，就给b赋2- 此时是将a的值赋给b

其中的原理：赋值时，先将运算符左右两边的值转为布尔值来进行判断，因为是使用 或者 符号来连接的，所以如果左边为 true ，那已经能确定整体的结果是 true ，此时就不会执行后面的值，就将这个值赋给变量了；如果左边为 false ，并不能确定整体的结果，所以需要执行到后面，就会将后面的值赋给变量。

var a;
var b = a && 2; // 如果a有值，就将2赋值给b，如果a没有值，就将a赋给变量 - 此时是将a赋给b 

var a = 3; 
var b = a && 2; // 如果a有值，就将2赋值给b，如果a没有值，就将a赋给变量 - 此时是将2赋给b

其中的原理：赋值赋值时，先将运算符左右两边的值转为布尔值来进行判断，因为是使用 并且 符号来连接的，所以 如果左边为 true ，那还不能确定整体的结果是，此时就会执行后面的值，就将这个值赋给变量了；如果左边为 false ，已经能确定整体的结果，所以不需要执行到后面，就会将前面的值赋给变量。

        因为在赋值前的判断，是将左右两边的值转为布尔值来判断的，所以只要能转为布尔值的数据都可以进行，包含：

0

null

undefined

false

''

定时器

延迟执行：

var timerId = setTimeout(function () {
 console.log('我执行了') 
}, 1000) 
console.log(timerId) // 1

使用说明：第一个参数是要执行的函数，第二个参数延迟的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

每间隔一段时间执行：

var timerId = setInterval(function () {
 console.log('我执行了') 
}, 1000)

使用说明：第一个参数是要执行的函数，第二个参数是间隔的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

关闭定时器：

定时器返回的数字，就是用来关闭定时器的

        clearTimeout(timerId); // 关闭延迟执行的定时器

        clearInterval(timerId); // 关闭间隔执行的定时器

使用说明：其实这两个方法可以混用。

var timerId = setTimeout(function () {
 console.log('倒计时定时器') 
}, 1000) 
// 关闭延迟执行定时器 
clearInterval(timerId) 

var timerId2 = setInterval(function () { 
console.log('间隔定时器') 
}, 1000) 
// 关闭间隔定时器 
clearTimeout(timerId2)

异步操作

异步和同步的概念

张三叫李四一起去吃饭，张三说他还有作业没做完，让李四先去，李四去吃饭，张三在写作业，这两个人做的事情不 一样，但是在同一时间段内，两个人的事情在同时做，这就是异步。

张三叫李四一起去吃饭，张三说他还有作业没做完，让李四等一下，李四就等张三做完作业后两个人才一起去吃饭。 这就是同步。

同步的操作需要等待，执行起来是有顺序可循的；异步的操作不需要等待，两件事情是同行进的。

我们平常写的代码都是同步代码，定时器我们接触到的第一个异步代码。

js 的特点是单线程的，也就是同一时间只能做一件事情，所以 js 会将异步代码交给浏览器去处理，因为浏览器是多线程的。

js 的线程，会先将所有同步代码执行完，与此同时，浏览器也在处理异步代码 ( 例如正在等待时间 ) ，当浏览器中的异步代码到了应该执行的时候了，会将需要执行的异步代码放在一个队列中，进行排队等候；当js 线程将所有同步代码执行结束后，会从队列中拿出第一个需要执行的代码去执行，执行过一个以后，再次到队列中拿出第二个需要执行的

代码去执行。。。。

js 的异步操作，是在所有同步代码执行完成以后才执行异步代码

一般情况代码是按顺序执行的，上一行代码执行结束之前，下一行代码一直在等待，这是同步机制

DOM

DOM 的全拼是： Document Object Model ，叫做文档对象模型，主要用于操作 html 文档。例如，改变标签的背景颜色，让标签移动产生动画。。。。

DOM 中的顶级对象是 document ，言外之意， DOM 其实是属于 BOM 的。

例如

window.document.write(); 
window.document.bgColor="red";

html 基本结构的操作：

1. document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取

2. document.documentElement : 可以获取html元素及其所有内容

3. document.head : 可以直接获取head元素

4. document.title : 可以直接获取title的文本

获取元素

在 js 中，标签的 id 名，可以当做是变量，直接就能代表这个标签元素，但是， id 名可以随便定义，但是变量名不能随便定义，所以使用id 名代表标签是有风险的。所以需要通过方法来获取到标签元素，自己定义给变量，可以避免这种 风险。

通过document获取节点

document.getElementById("标签id名"); // 通过标签的id名获取标签

document.getElementsByTagName("标签名"); // 通过标签名获取标签

document.getElementsByClassName("标签类名"); // 通类名获取标签

document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签

// 上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）

使用css选择器获取元素：

document.querySelector(css选择器); // 获取到匹配css的第一个元素

document.querySelectorAll(css选择器); // 获取到匹配css的所有元素

属性操作

自定义属性

元素.setAttribute(属性名,属性值) # 设置元素的属性

元素.getAttribute(属性名); # 获取元素属性

元素.removeAttribute(属性名); # 删除元素属性

元素自带属性

元素.属性名 = 值;

console.log(元素.属性名)

例：

btn.onclick=function(){
img.src = '2.jpg';
}

内容操作

语法：

元素.innerHTML         # 代表元素中的所有内容（包含标签）

元素.innerText         # 代表元素中的文本内容

表单元素.value         # 单标签操作内容其实就是在操作元素的属性

例：

<body>
<div id="box" introduce="区域"><p>我是盒子</p></div>
</body>
<script type="text/javascript">
document.getElementById("box").innerText = "今天你要嫁给我";
var text = document.getElementById("box").innerText;
document.write(text);
document.getElementById("box").innerHTML = "<a href='http://www.baidu.com'>百度</a>";
var content = document.getElementById("box").innerHTML;
console.log(content);

样式设置

元素.style.css属性名 = css属性值; # 给标签设置样式

例：

<body>
<style type="text/css">
#box{
width:100px;
height:100px;
background:#f00;
}
</style>
<input type="button" id="btn" value="走你">
<div id="box"></div>
</body>
<script type="text/javascript">
var n = 0;
document.getElementById("btn").onclick=function(){
n += 100;
document.getElementById("box").style.marginLeft = n + "px";
}
</script>

这样设置的样式都是行内样式。

元素类名

使用元素的 className 属性可以设置元素的类名，也可以获取类名

 

<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div>
console.log(div.className) // test
</script>
</body