JavaScript：BOM与DOM

BOM
Window

代表的是整个浏览器的窗口，同时window也是网页中的全局对象

Navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

Location

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

History

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

Screen

代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

Navigator
判断浏览器

var ua = navigator.userAgent;

console.log(ua);

if(/firefox/i.test(ua)){
alert(“你是火狐！！！”);
}else if(/chrome/i.test(ua)){
alert(“你是Chrome”);
}else if(/msie/i.test(ua)){
alert(“你是IE浏览器~~~”);
}else if(“ActiveXObject” in window){
alert(“你是IE11，枪毙了你~~~”);
}
History
对象可以用来操作浏览器向前或向后翻页

length

属性，可以获取到当成访问的链接数量

back()

可以用来回退到上一个页面，作用和浏览器的回退按钮一样

forward()

可以跳转下一个页面，作用和浏览器的前进按钮一样

go()

1:表示向前跳转一个页面 相当于forward()

2:表示向前跳转两个页面

-1:表示向后跳转一个页面

-2:表示向后跳转两个页面

可以用来跳转到指定的页面

它需要一个整数作为参数

Location
对象中封装了浏览器的地址栏的信息

直接打印location，则可以获取到地址栏的信息

如果直接将location属性修改为一个完整的路径，或相对路径则我们页面会自动跳转到该路径，并且会生成相应的历史记录

location = “http://www.baidu.com”;

assign()

location.assign(“http://www.baidu.com”);

用来跳转到其他的页面，作用和直接修改location一样

reload()

location.reload(true);

用于重新加载当前页面，作用和刷新按钮一样

如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

replace()

location.replace(“01.BOM.html”);

可以使用一个新的页面替换当前页面，调用完毕也会跳转页面

不会生成历史记录，不能使用回退按钮回退

setInterval()
可以将一个函数，每隔一段时间执行一次

参数：

1.回调函数，该函数会每隔一段时间被调用一次

2.每次调用间隔的时间，单位是毫秒

返回值：

返回一个Number类型的数据

这个数字用来作为定时器的唯一标识

var timer = setInterval(function(){

count.innerHTML = num++;

if(num == 11){
//关闭定时器
clearInterval(timer);
}

},1000);
clearInterval()可以用来关闭一个定时器方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

Dom
事件
就是用户和浏览器之间的交互行为

比如：点击按钮，鼠标移动、关闭窗口。。。

绑定一个单击事件

这种为单击事件绑定的函数，我们称为单击响应函数

btn.onclick = function(){
alert(“你还点~~~”);
};
onload事件
整个页面加载完成之后才触发

window绑定一个onload事件

window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById(“btn”);
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert(“hello”);
};
};
dom查询
获取到button对象

var btn = document.getElementById(“btn”);

修改按钮的文字

btn.innerHTML = “I’m Button”;

查找所有li节点

var lis = document.getElementsByTagName(“li”);

查找name=gender的所有节点

var inputs = document.getElementsByName(“gender”);

如果需要读取元素节点属性，

直接使用 元素.属性名例子：元素.id 元素.name 元素.value注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className

返回#city的所有子节点

childNodes属性会获取包括文本节点在呢的所有节点

var cns = city.childNodes;

children属性可以获取当前元素的所有子元素

var cns2 = city.children;

firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）

var fir = phone.firstChild;

firstElementChild获取当前元素的第一个子元素

fir = phone.firstElementChild;

innerText

该属性可以获取到元素内部的文本内容

previousElementSibling获取前一个兄弟元素

var pe = and.previousElementSibling;

在document中有一个属性body，它保存的是body的引用

var body = document.body;

document.documentElement保存的是html根标签

var html = document.documentElement;

document.all代表页面中所有的元素

var all = document.all;

document.querySelector()

var div = document.querySelector(".box1 div");

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

document.querySelectorAll()

box1 = document.querySelectorAll(".box1");

该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回

操作CSS
修改
元素.style.样式名 = 样式值

这种名称在JS中是不合法的比如background-color需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写

在样式中写了!important，则此时样式会有最高的优先级

box1.style.width = “300px”;
box1.style.height = “300px”;
box1.style.backgroundColor = “yellow”;
读取
元素.style.样式名

box1.style.width

获取元素的当前显示的样式
元素.currentStyle.样式名(只有IE浏览器支持)

getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用 需要两个参数

第一个：要获取样式的元素

第二个：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象.样式名来读取样式

获取指定元素的当前的样式的函数
function getStyle(obj , name){

if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}

//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];

}
可见宽度和高度
clientWidth clientHeight

box1.clientWidth

只读的，不能修改

不带px的，返回都是一个数字，可以直接进行计算

元素宽度和高度，包括内容区和内边距

元素的整个的宽度和高度
offsetWidth offsetHeight

box1.offsetWidth

当前元素的定位父元素
offsetParent

var op = box1.offsetParent;

偏移量
offsetLeft

当前元素相对于其定位父元素的水平偏移量

offsetTop

当前元素相对于其定位父元素的垂直偏移量

滚动区域的宽度和高度
scrollWidth scrollHeight

滚动的距离
scrollLeft

可以获取水平滚动条滚动的距离

scrollTop

可以获取垂直滚动条滚动的距离

满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚动到底了

当满足scrollWidth - scrollLeft == clientWidth说明水平滚动条滚动到底

Date对象
在JS中使用Date对象来表示一个时间

创建一个Date对象
var d = new Date();

创建一个指定的时间对象
日期的格式 月份/日/年 时:分:秒

var d2 = new Date(“2/18/2011 11:10:30”);

getDate()
获取当前日期对象是几日

var date = d2.getDate();

getDay()
获取当前日期对象时周几

会返回一个0-6的值0 表示周日 1表示周一

var day = d2.getDay();

getMonth()
获取当前时间对象的月份

会返回一个0-11的值0 表示1月 1 表示2月 11 表示12月

var month = d2.getMonth();

getFullYear()
获取当前日期对象的年份

var year = d2.getFullYear();

getTime()
获取当前日期对象的时间戳

时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒

var time = d2.getTime();

Date对象
在JS中使用Date对象来表示一个时间

创建一个Date对象
var d = new Date();

创建一个指定的时间对象
日期的格式 月份/日/年 时:分:秒

var d2 = new Date(“2/18/2011 11:10:30”);

getDate()
获取当前日期对象是几日

var date = d2.getDate();

getDay()
获取当前日期对象时周几

会返回一个0-6的值0 表示周日 1表示周一

var day = d2.getDay();

getMonth()
获取当前时间对象的月份

会返回一个0-11的值0 表示1月 1 表示2月 11 表示12月

var month = d2.getMonth();

getFullYear()
获取当前日期对象的年份

var year = d2.getFullYear();

getTime()
获取当前日期对象的时间戳

时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒

var time = d2.getTime();

Math
Math.PI 表示的圆周率

abs()可以用来计算一个数的绝对值
console.log(Math.abs(-1));

Math.ceil()可以对一个数进行向上取整，小数位只有有值就自动进1
Math.floor()可以对一个数进行向下取整，小数部分会被舍掉
Math.round()可以对一个数进行四舍五入取整
//console.log(Math.ceil(1.1));
//console.log(Math.floor(1.99));
//console.log(Math.round(1.4));
Math.random()
可以用来生成一个0-1之间的随机数

生成一个0-x之间的随机数

Math.round(Math.random()*x)

生成一个x-y之间的随机数

Math.round(Math.random()*(y-x)+x)

for(var i=0 ; i<100 ; i++){
//console.log(Math.round(Math.random()*10));
//console.log(Math.round(Math.random()*20));

//console.log(Math.round(Math.random()*9)+1);
//console.log(Math.round(Math.random()*8)+2);

//生成1-6之间的随机数
console.log(Math.round(Math.random()*5+1));
}
max() 可以获取多个数中的最大值
min() 可以获取多个数中的最小值
var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);
Math.pow(x,y)返回x的y次幂
console.log(Math.pow(12,3));

Math.sqrt() 用于对一个数进行开方运算
console.log(Math.sqrt(2));