BOM与DOM知识点总结

一、 什么是BOM？ 浏览器对象模型
二、BOM中的顶级对象是什么？
window
三、 window对象中有哪些子对象？
document history location navigator frames screen
四、location
1. href : 设置或获取当前地址栏中的URL
2. window.location : 设置或获取当前地址栏中的URL

3. reload([true]) : 加true,不经缓存加载      不加true : 从缓存中加载

五、history
1. back() : 后退
2. forward : 前进
3. go(int) : 前进或后退指定的历史记录

六、可以实现刷新页面的方法:
1. location.reload()
2. history.go(0)
七、navigator
userAgent : 可以获取当前浏览器的名称，版本、以操作系统的信息
八、onload : 加载事件
window.onload : 页面加载（页面中的一切）
九、window的方法
alert() : 警告框
prompt():输入框
confirm():选择框 返回boolean
open(): 打开新窗口
close():关闭当前窗口
十、定时器（计时器）
1. setInterval(表达式,毫秒数) 间歇性计时器
clearInterval(计时器的返回值) 清除计时器
//问题一： 重复启动同一个计时，会累加执行
//解决： 开启新的计时器前，先清楚上一次的计时器
2. setTimeout(表达式，毫秒数) 一次性计时器
clearTimeout(定时器的返回值); 清除定时器
十一、onscroll 滚动事件
//滚动条距顶端的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//滚动条距左端的距离
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
十二、什么是DOM？ 文档对象模型
十三、DOM的作用： 通过DOM可以利用javascript对HTML或CSS进行增加、删除、修改内容或属性样式，从而实现一些特殊的效果。
十四、 如何获取页面中的元素对象？
1. document.getElementById(‘id’) : 通过id获取指定的元素对象。返回对象，如果没有获取到，返回null
2. document.getElementsByTagName(‘标签名’) : 通过标签名获取元素对象的集合。返回伪数组或类数组。
3. document.getElementsByClassName(‘类名’) : 通过class属性值获取元素对象的集合，返回伪数组或类数组。
注： IE9以下不支持
function byClassName(obj,className){
if(obj.getElementsByClassName){
//支持
return obj.getElementsByClassName(className);
}else{
//不支持
var arr = [];
var eles = obj.getElementsByTagName(’*’); //获取所有的元素对象
for(var i = 0,len = eles.length;i < len;i ++){
//遍历所有元素，判断是否与指定的class名相同
if(eles[i].className === className){
arr.push(eles[i]); //如果相同，存入新的数组
}
}
return arr;
}
}
4. document.getElementsByName(‘name名’) : 通过name属性值获取元素对象的集合，返回伪数组或类数组;
5. document.querySelector(‘选择器’) : 通过选择器获取指定的对象。
6. document.querySelectorAll(‘选择器’) : 通过选择器获取元素对象集合，返回伪数组或类数组

7. document.documentElement : 获取html
8. document.body : 获取body

十五、创建节点对象
1. 创建元素节点对象： document.createElement(‘标签名’)
2. 创建文本节点对象： document.createTextNode(‘文本内容’)
3. 创建文档碎片 ： document.createDocumentFragment() : 作用：提高性能
十六、追加子节点对象
父节点对象.appendChild(子节点对象) : 将当前子节点追加到指定父节点对象的子节点列表的末尾。
十七、替换新节点
父节点对象.replaceChild(新节点对象，旧节点对象)
十八、 删除节点
1. 父节点对象.removeChild(子节点对象) : 通过父节点删除指定的子节点
2. 节点对象.remove() : 删除当前节点对象。
十九、 克隆节点（复制节点）
节点对象.cloneNode([true]) 没有true : 只克隆当前节点，不包含内容
加上true : 克隆当前节点，包含内容
二十、
1. 常见节点类型： 元素节点 属性节点 文本节点
2. 节点属性： nodeName nodeType nodeValue

				元素节点     属性节点     文本节点
nodeName         元素名       属性名       #text
nodeType            1           2            3
nodeValue        null          属性值       文本内容（纯文本）