BOM&DOM

BOM

【浏览器对象模型，即所用内容都在对象中操作】

浏览器的顶级对象：window；

其他指向window：this 、top；其中name是window中的属性，属性值为空字符串；

浏览器的尺寸

1. innerHeight  可视窗口的高度（包括底边滚动条）
2. innerWidth  可视窗口的宽度（包括侧边滚动条）

console.log(window.innerHeight);
console.log(window.innerWidth);

浏览器信息

【是浏览器存储浏览器信息的对象】

1.  navigator.appName       浏览器名称，html5的兼容问题；
2. navigator.appVersion      浏览器版本；
3. navigator.platform           浏览器平台操作系统；不正确
4. navigator.userAgent       浏览器的整体信息；

console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.platform);
console.log(navigator.userAgent);

弹出层

【浏览器弹出层，会中断程序】

1. alert()            弹窗；点击确认后消失；
2. confirm()       询问弹窗；确定返回true，取消返回false
3. prompt()        提示输入弹窗；                                                                                                    输入内容确认 返回结果是输入的内容，没有输入确认 返回空字符串，点击取消 返回null

浏览器的地址栏信息

1、location.href   获取当前浏览器访问url完整地址

    若url中有中文会被转为url编码字符(乱码)； 也可赋值一个地址；

console.log(location.href);       //获得当前浏览器的地址

//给location.href赋值一个地址，页面就跳转到该地址
btn.onclick = function(){
    location.href = 'http://www.baidu.com'
}

2、location.reload()    页面重新重载，  不要写在全局中，否则会一直加载

btn.onclick = function(){
    location.reload()
}

浏览器历史记录对象

history.back()           //退回到历史记录的上一个页面
history.forward()        //前进到历史记录的下一个页面
history.go(参数)         //传正数，前进；传负数，后退

浏览器事件

1、页面加载事件，页面中所有的资源加载完毕后触发   onload

window.onload = function(){
    console.log('页面加载完毕')
}

2、窗口改变事件，窗口大小改变触发                onresize

window.onresize = function(){
    console.log('窗口大小发生改变')
}

3、浏览器滚动事件 ，滚动条变化触发              onscroll

window.onscroll = function(){
    console.log('滚动条变化')
}

定时器

【都有返回值，返回值一个定时器的标识id】

1、间隔定时器：每间隔一段时间就执行一次函数

     单位：毫秒；

//语法：setInterval(函数,时间)
var timerId =  setInterval(function(){
    console.log(666)
},1000)

2、倒计时定时器(爆炸定时器) 隔一段时间之后执行一次函数(函数最多执行一次)

      单位：毫秒

//语法：setTimeout(函数,时间)
var timerId = setTimeout(function(){
    console.log(999)
},1000)

3、关闭定时器

clearInterval(定时器id)     关闭间隔定时器；

clearTimeout(定时器id)      关闭倒计时定时器；

但，两个可以混用； 

DOM操作

【Doument Object Model  文档对象模型；DOM中的顶级对象是document对象，document的上一级对象是window】

1、通过id值获取元素       document.getElementById('id值')

      返回页面中的标签为对应id值得元素；若找不到则返回null；

//语法：document.getElementById(id值)
console.log(document.getElementById('id值'));    
 //若有对应的id值则返回该id对应的元素，没有则返回null

2、通过tagName获取元素      document.getElementsByTagName('标签名')

      返回对应标签名的元素结合(伪数组)；若找不到则返回空伪数组；

//语法：document.getElementsByTagName('标签名')
console.log(document.getElementsByTagName('标签名'));   
 //有对应标签名则得到伪数组；没有则返回空伪数组

//可将伪数组中的集合遍历出来
for(var i = 0;i<标签名.length;i++){
    console.log(标签名[i])
}

3、通过className获取元素       document.getElementsByClassName('类名')

     返回对应有该类名的元素集合(伪数组)；没有则返回空伪数组；

//语法：document.getElementsByClassName('类名')
console.log(document.getElementsByClassName('类名'))
 //返回有该类名的对应元素集合也叫伪数组；没有则返回空伪数组

4、通过name属性 获取元素     document.getElementsByName('name属性值')

      返回对应有该类名的元素集合，是伪数组；若找不到则返回空伪数组；

//语法：document.getElementsByName('name属性值')
console.log(document.getElementsByName('name属性值'))
 //找到则返回对应有该类名的元素集合(伪数组)，没有则返回空伪数组

5、通过选择器获取元素      

     document.querySelector             只能获取到一个元素，且是页面中第一个满足条件的；

      document.querySelectorAll        能获取到所有满足条件的元素，以伪数组形式返回；

//语法：document.querySelector('选择器')
//语法：document.querySelectorAll('选择器')
console.log(document.querySelector('#top'));

属性操作

1、获取设置元素的文本内容    innerText

      设置元素的文本内容(覆盖式设置)，不识别html

console.log(div.innerText);   //打印出div标签的文本内容
div.innerText = '我是div标签'      
//覆盖div中原有的文字内容，并在原位置输出我是div标签
div.innerText = '<div>我是div标签</div>'
//覆盖div中原有的文字内容，并在原位置输出<div>我是div标签</div>,不识别html标签

2、获取设置元素的超文本内容(包括html标签)     innerHTML

     设置元素的超文本内容(覆盖式设置)，能识别html标签

console.log(div.innerHTML);      //打印出带有html标签的超文本内容
div.innerHTML = '<h1>我是好标签</h1>'
//覆盖原本div文本内容，并识别html标签，在原文本位置输出覆盖的内容
div.innerHTML += '<h1>我是好标签</h1>'
//不覆盖原文本内容，在原内容上新增

3、样式属性操作—给元素添加css样式—添加的都是行内样式       style

      样式名称，在css中用-连接单词的样式名称，在js中需要改为小驼峰写法；

//语法：元素.style.样式名称 = '值'；
console.log(div.style);      //打印出div的所有样式
div.style.backgroundClock = 'pink'

4、类名操作     className

//获取设置元素的类名   元素.className
console.log(box.className);
//设置元素的类名  元素.className = "类名"  (覆盖式设置)
box.className = 'box'
//给元素添加类名
box.className += 'cls'
console.log(box)

5、获取元素的某个属性(包括自定义属性)     getAttribute

//语法：元素.getAttribute('属性名')    所有属性都能获取
console.log(box.getAttribute('name'))

6、给元素设置属性(包括自定义属性)      setAttribute

//语法：元素.setAttribute('属性名','属性值')    所有属性都能设置
box.setAttribute('id','box')

7、移除元素属性    removeAttribute

//语法：元素.removeAttribute('属性名')
box.removeAttribute('name')