BOM

BOM: Browser Objiect Model，浏览器对象模型

window:浏览器中的顶级对象

一、window.navigator

1.
var userAgent = window.navigator.userAgent //浏览器版本及型号
2.
var appName =window.navigator.appName //网景公司

二、编程式导航

通过JS让页面跳转

var add =window.location.href
例:
btn.onclick =function(){
window.location.href="http://www.sina.com"
}

三、获取页面历史记录

var history =window.history
history.back //返回
history.forward //前进
history.go

四、window.onload

window.onload=function(){}	//页面资源加载完毕执行

五、浏览器可视区(包含滚动条)

window.innerWidth //浏览器可视区宽度
window.innerHeight //浏览器可视区高度

六、页面滚动事件

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

七、获取非行间样式 : getComputedStyle

1. window.getComputedStyle(要获取的元素).要获取的样式属性

例：
var dv = document.getElementsByTagName("div")[0]
var width =window.getComputedStyle(dv).width
console.log(width)
//IE9以上和其他浏览器支持

2. currentStyle 谷歌不支持

var dv = document.getElementsByTagName("div")[0]
var width =dv.currentStyle.width
console.log(width)

要做到自动识别用户浏览器以获取非行间样式

var dv = document.getElementsByTagName("div")[0]
if(window.getComputedStyle){
var width =window.getComputedStyle(dv).width
}else{
var width =dv.currentStyle.width
}

八、获取元素实际宽高 内容+padding+border

var dv = document.getElementsByTagName("div")[0]
var width =dv.offsetWidth
console.log(width)
var height =dv.offsetHeight
console.log(height)

九、获取元素的偏移量

var dv = document.getElementsByTagName("div")[0]
var left =dv.offsetLeft

十、插入元素的方法 createElement( )、insertBefore( )

<div>
<p class="pp">我是一个 P 标签</p>
</div>
<script>
var span = document.createElement("span")//创建一个span元素
span.innerHTML = "新来的"
var p = document.querySelector("p")
var dv = document.querySelector("div")
dv.insertBefore(span,p) //div中插入span且在p之前插入 
</script>

DOM

DOM:Document Object Model 文档对象模型

一、页面卷曲出去的高度

1.有doctype
document.documentElement.scrollTop
2.无doctype
document.body.scrollTop
//要获取兼容所有浏览器的卷曲高度：
var top =document.documentElement.scrollTop || document.body.scrollTop

二、DOM获取元素：

1.ID获取法
//ID具有唯一性，重复后通过id名获取元素只能拿到一个，后面的拿不到。
var box =document.getElementById("box")
2.通过标签名获取元素
// 获取到的是一个伪数组，数组和伪数组都有 length 属性，也都可以通过下标获取，但是伪数组不能使用数组的方法
var div =document.getElementsByTagName("div")
3.通过类名class名获取
//获取到的也是一个伪数组，且是第一个满足条件的元素
var sp =document.getElementsByClassName("sp")
4.通过CSS选择器获取：
//获取的是一个元素，且是第一个满足条件的元素
var ss =document.querySelector("div>span") //div下边的span
5.通过CSS所有选择器获取：
//获取的是所有满足条件的元素(伪数组)，只有通过querySelectAll方法获取的 **伪数组** 能够使用forEach这个方法(可且仅可)
var sp = document.querySelectorAll("ul>li")

三、innerHTML 和 innerText

innerText 获取的只是元素里面的的文本内容
赋值是会把里面所有的内容全部替换成 ...
innerHTML 获取到的是 一个元素内部所有的标签 都是以字符串的形式返回
也是完全替换
如果 innerHTML 赋值 会把字符串里面的标签进行解析
如果 innerText 赋值 会把字符串里面所有内容原封不动 直接当成文本内容放进元素里面

四、获取属性

1.获取属性
getAttribute("")
2.设置自定义属性
setAttribute("参数1"，参数2)
//参数1：设置的属性名 ，参数2：属性值
document.querySelctor("div").setAttribute("index",2)
3.移除属性
removeAttribute()
document.querySelector("div").remove("index")

五、定时器:

返回值为这个定时器是这个页面的第几个定时器

1. 间隔定时器

setInterval( code,time) //逗号前是执行的代码，逗号后是间隔时间(毫秒)

var time =setInterval(function(){
console.log("男神")
},1000 //1000毫秒执行一次)
clearInterval(time) //停止定时器

2.倒计时定时器（炸弹定时器）

只执行一次

setTimeout(code,time)

• 停止定时器

clearInterval(),clearTimeout
//两种方法可以混用，但一般不会去停止setTimeout,因为它执行一次就没了

六、获取特殊元素的特殊方式：

• 获取页面的title

  var tit =document.title
  //
  拿到的 title 标签里面的内容获取页面的body
  

• 获取页面的head

  var head =document.head
  

• 获取页面的body

  var bod =document.body
  

• 获取页面的HTML标签

  var html =document.documentElement
  

• 通过name属性获取元素 表单元素

  var uname = document.getElementsByName("uername")
  

七、元素节点

获取页面上的节点

var dv = document.querySelector("div")
var p = document.querySelector("p")
var p2 = document.querySelectorAll("p")[1]
1、获取这个 div 所有的 子节点
//childNodes
var child = dv.childNodes
console.log(child)
2、获取这个 div 所有的 **子元素节点**
//children
var child = dv.children
console.log(child)
3、获取 第一个 ** 子节点 **
//firstChild
var first = dv.firstChild
console.log(first)
4、获取 最后一个 **子节点**
//lastChild
var last = dv.lastChild
console.log(last)
5、获取第一个 ** 子元素节点 **
//firstElementChild
var firstEle = dv.firstElementChild
console.log(firstEle);
6、获取 最后一个 ** 子元素节点
**
// lastElementChild
var
lastEle = dv.lastElementChild
console.log(lastEle)
7、获取 上一个 **兄弟节点**
//previousSibling
var
prev = p2.previousSibling
console.log(prev)
8、获取 下一个 **兄弟节点**
//nextSibling
var next = p.nextSibling
console.log(next)
9、获取上一个
**兄弟元素节点**
//previousElementSibling
var prev = p2.previousElementSibling
console.log(prev)
10、获取下一个 **兄弟元素节点**
//nextElementSibling
var next = p.nextElementSibling
console.log(next);
11、获取
**父节点**
//parentNode
var parent = p.parentNode
console.log(parent);
12、属性节点
var attrs = p.attributes
console.log(attrs[0])

节点的属性

1. 节点的类型：nodeType，用数字表示是哪一个节点

    console.log(text.nodeType)
   //
   文本节点的 节点类型
   === 3
   console.log(ele.nodeType)
   //
   元素节点的 节点类型
   === 1
   console.log(attrs.nodeType)
   //
   属性节点的 节点类型
   === 2
   console.log(com.nodeType)
   //
   注释节点的 节点类型
   === 8
   

2. 节点的名称：nodeName

   
   console.log(text.nodeName)
   // 文本节点都是 #text 表示
   console.log(ele.nodeName)
   // 元素节点都是 大写的标签名称
   console.log(attrs.nodeName)
   // 属性节点都是
   属性名
   console.log(com.nodeName)
   // 注释节点都是
   #comment 表示
   

3.节点的值：nodeValue

console.log(text.nodeValue)
// 文本节点就是里面的文字
console.log(ele.nodeValue)
// 元素节点
没有
nodeValue
都是 null 
console.log(attrs.nodeValue)
// 属性节点都是
属性值
console.log(com.nodeValue)
// 注释节点
注释里面的文字内容

八、获取页面的宽高

1.获取不包含滚动条的宽高

var width =
document.documentElement.clientWidth
var height = document.documentElement.clientHeight

2.body的宽高

var width =document.body.clientWidth
var height =document.body.clientHeight

九、

window.open( ) 打开新页面

btn.onclick =function(){
window.open("http://www.sina.com")
}

window.close( ) 关闭当前页面

btn.onclick =function(){
window.close()
}

window.onresize 窗口改变事件

window.onresize =function(){
console.log("窗口改变了")
}

最后

以上就是刻苦自行车为你收集整理的BOM和DOM知识点总结BOMDOM的全部内容，希望文章能够帮你解决BOM和DOM知识点总结BOMDOM所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。