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) //去下一页