Dom与Bom

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

DOM

什么是dom

document object modle 文档对象模型
整个文档就是一颗树
树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
在页面上还有一些动作效果:
	根据人的行为改变的 点击 鼠标悬浮
	自动在改变的

js是怎么给前端的web加上动作的呢?

1.找到对应的标签
2.给标签绑定对应的事件
3.操作对应的标签

查找标签

直接查找

var a = document.getElementById('baidu')           //直接返回一个元素对象
console.log(a)
var sons = document.getElementsByClassName('son')  //返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象  
var divs = document.getElementsByTagName('div')    //返回元素组成的数组
console.log(divs)

间接查找

找父亲
var a = document.getElementById('baidu')          
console.log(a)
var foodiv = a.parentNode          //获取到父节点的对象

找儿子
var foo= document.getElementById('foo')
foo.children     //获取所有的子节点,返回一个数组
foo.firstElementChild //获取第一个子节点
foo.lastElementChild //获取最后一个子节点

找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling     //找下一个兄弟 返回一个对象
son1.previousElementSibling //找上一个兄弟 返回一个对象

操作本身的标签

标签的创建

var obj = document.createElement('标签名')   // a div ul li span
obj就是一个新创建出来的标签对象

标签的添加

父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后
父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前

标签的删除

父节点.removeChild(要删除的子节点)
子节点1.parentNode.removeChile(子节点2)

标签的替换

父节点.replaceChild(新标签,旧儿子)

标签的复制

节点.cloneNode()     //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上

节点的属性操作

dom树

整个文档就是一棵树
整个文档是从上到下依次加载的 
当加载到script标签的时候,会有一个特殊的变量提升的解析方法,导致我们后定义的函数可以提前被调用
每一个节点描述 : 父标签 子标签 兄弟节点
               属性
               文本
               标签名

查找节点

直接查找

var 节点对象 = document.getElementById('标签的id')   返回一个
var 节点对象 = document.getElementsByClassName('标签的类名') 返回一组
var 节点对象 = document.getElementsByTagName('标签名')  返回一组

间接查找

找父亲   节点.parentNode 返回一个
找兄弟   节点.previousElementSilblings 返回上一个    节点.nextElementSilblings 返回下一个
找儿子   节点.firstElementChild    节点.lastElementChild
		节点.children 返回一组

操作节点

标签的创建  节点对象 = document.createElement('标签名')
添加标签      父节点.appendChild(子节点)     放在所有儿子的最后  
             父节点.insertBefore(子节点,参考儿子节点) 放在参考点之前
删除节点      父节点.removeChild(子节点)
替换         父节点.replaceChild(新的节点,旧)
克隆         节点.cloneNode(true)   true表示拷贝这个标签的子子孙孙

文本操作

innerText   只识别文本,所有的标签也当做文本识别
innerHtml   可以识别标签

属性操作

节点对象.getAttribute('属性名')
节点对象.setAttribute('属性名','属性值')
节点对象.removeAttribute('属性名')
节点对象.classList.add('类名')
节点对象.classList.remove('类名')
节点对象.classList.contains('类名')
节点对象.classList.toggle('类名')
节点对象.value = 值
节点对象.value查看值
节点对象.style.样式属性 = 值    设置样式 所有带中线的方法都要改变成驼峰命名

节点的文本操作

节点对象.innerText = '只能写文字'
节点对象.innerHTML = '可以放标签'

BOM

操作的是浏览器

DOM

事件

绑定方式:
<button id="btn">点击一下</button>
方式一:
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        alert('点我干嘛')
    }
方式二:
	btn.onclick = clik
    function clik() {
        alert('不要点')
    }
方式三:
	<button id="btn" onclick="clik()">点击一下</button>
	function clik() {
        alert('不要点')
    }

BOM

browser object model

定时器

setInterval

每隔一段时间就完成某个操作
var tid = setInterval(fn,n)  每隔n毫秒就调用一次fn函数
var tid = setInterval("fn()",n) 

clearInterval(tid)   清除定时器

setTimeOut

在设定时间之后执行一次来完成某个操作
var tid = setTimeout(fn,n)       n毫秒之后只调用一次fn函数
var tid = setTimeout("fn()",n) 

clearTimeout(tid)   清除定时器

location对象

window的子对象 window.location

属性:
window.location.href 查看当前网页的url
window.location.href = 'http://www.baidu.com'   修改当前网页的url,修改之后会跳转
方法:
window.location.reload()  刷新页面

练习

onscroll事件

window.onscoll 在页面的滚动条滚动的时候触发的事件
document.documentElement.scrollTop 针对获取浏览器的垂直滚动条的位置

select的onchange事件

select对象.options.selectedindex 被选中的选项在options中的索引位置

DOM事件

事件的绑定

方式一 行内绑定
<a onclick="函数名()"></a>
function 函数名(){
    函数体
}

方式二 匿名函数绑定
某对象.onclick = function(){
    函数体
}

方式三 函数名绑定
某对象.onclick = 函数名
function 函数名(){
    函数体
}

常见事件

onclick()      单机事件 
onmouseover()  鼠标悬浮
onmouseout()   鼠标离开
onscroll()     滚动轴移动
onChange()     文本区域内内容变化
onfocus()      获取焦点
onblur()       失去焦点

BOM

和浏览器的操作相关的

window对象

定时器方法
setInterval("fn()",n)  每隔n毫秒就执行fn函数一次
setTimeout("fn()",n)   n毫秒之后执行fn函数一次

innerHeight   浏览器显示网页内部内容的高度,会随着浏览器窗口变化
innerWidth    浏览器显示网页内部内容的宽度,会随着浏览器窗口变化

location对象 地址栏

属性 :href
查看页面的url连接,href = '新的url',跳转到新的页面

方法:reload()
刷新页面

history对象

history.back()     go(-1)   //回到上一页
history.go(0)               //刷新
history.forward()  go(1)    //去下一页