DOM BOM 与事件

DOM(document object model)
DOM把html当做一个文档树,文档所有内容都可称为节点,标签称为元素，根元素html,根据节点找到父节点，子节点，兄弟节点
var btn = document.getElementById("btn");
btn.onclick = function(){
  alert("dian wo");
  }
document.getElementById //通过ID获取某个元素，所有浏览器兼容（ie7会把表单name当id使用）
[context].getElementsByClassName //通过class类名获取,获取是一组,不支持IE8及以下
[context].getElementsByTagName //通过标签名获取,获取是一组,所有浏览器兼容
document.getElementsByName //通过name获取,获取是一组,很少用,所有浏览器兼容,一般用来操作表单元素
document.body 获取整个body对象
document.all 获取所有标签
document.querySelector()  只会返回找到的第一个元素
document.querySelectorAll()返回所有符合条件的元素。返回数组形式
这两个方法都是用document对象来调用，都是传递一个选择器字符串作为参数，会自动根据选择器
字符串去网页中查找元素。

childNodes 表示当前节点的所有子节点
firstChild 表示当前节点的第一个子节点
lastChild 表示当前节点的最后一个子节点
parentNode 表示当前节点的父节点
previousSibling 表示当前节点的前一个兄弟节点
nextSibling 表示当前节点的后一个兄弟节点

结点的增删改查
var li = document.createElement("li")
var text = document.createTextNode("广州")
// city2.appendChild(li);
// city.insertBefore(li, bj)
// city.replaceChild(li, bj)
//city.removeChild(bj)
//bj.parentNode.removeChild(bj)
//alert(city.innerHTML)
// bj.innerHTML = "昌平"
city.innerHTML += "<li> 广州 </li>"
操作子父节点时需要注意table里有个隐藏的tbody标签

读取和设置style， 都是内联样式的值
box1.style.width = "300px"
box1.style.backgroundColor = "blue"
alert(box1.style.width) //带有单位px
获取当前生效样式，
getComputedStyle传递元素获得一个对象封装了元素的属性，第二个参数用于伪元素
alert(getComputedStyle(box1, null).width)
box1.currentStyle.width （只有ie支持）

获取可见宽度和高度
alert(box1.clientHeight)（包括内容区和padding，不包括边框和margin）
alert(box1.clientWidth)
alert(box1.offsetWidth)
alert(box1.offsetHeight)（包括内容区和padding和border）
box1.offsetParent (获取到最近的开启定位的祖先元素)
box1.offsetLeft(获取和最近的开启定位的祖先元素的水平距离)
box1.offsetTop
box1.scrollWidth（元素整个滚动区的宽度）
box1.scrollHeigh
box1.scrollLeft（元素水平滚动条滚动的距离）
box1.scrollTop
当scrollHeigh-scrollTop==clientHeight说明滚动条滚到低了

var st =document.body.scrollTop ||document.documentElement.scrollTop(对于取得整个页面的滚动条，兼容性处理，后一个支持chrome)

BOM    
浏览器对象模型
window
代表整个浏览器窗口，window也是整个网页的全局对象，所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法
navigator
代表当前浏览器的信息，通过对象可以识别不同的浏览器
location
代表当前浏览器的地址栏信息，可以获取地址栏信息或操作浏览器跳转页面
history
代表浏览器历史记录， 由于隐私原因，只可以操作向前向后翻页
screen
代表用户屏幕信息，可以获得用户显示器相关信息

window
//等同于< a href="http://www.wrox.com" target="topFrame"></a> 
window.open("http://www.wrox.com/", "topFrame"); 
定时器
var time=setInterval(function(){},1000) 每隔1000毫秒执行一次函数，会返回一个数字
clearInterval(time);关闭对应的time号定时器
开启定时器前，先关闭定时器，以解决多次开启定时器加速问题
var time=setTimeout(function(){},3000) 延时调用，3000毫秒后调用，只调用一次
clearTimeout(time) 关闭延时调用
为了防止定时器的冲突，最好不要定义全局变量定时器，可以给对象加一个定时器属性，比如 obj.time=setInterval 然后clearInterval(obj.time);
JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。setTimeout()的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中
超时调用和间歇调用转化
var num = 0; 
var max = 10; 
function incrementNumber() { 
 num++; 
 //如果执行次数未达到 max 设定的值，则设置另一次超时调用
 if (num < max) { 
 setTimeout(incrementNumber, 500); 
 } else { 
 alert("Done"); 
 } 
} 
setTimeout(incrementNumber, 500); 
确认或取消对话框
confirm("Are you sure?")
输入对话框，确定返回输入的内容，Cancel 或没有单击OK 而是通过其他方式关闭了对话框，则该方法返回 null
prompt("What's your name?","Michael")

navigator
可以用来检测一些插件
navigator.userAgent 返回一个字符串，包含描述浏览器的信息
var ua =navigator.userAgent;
if(/firefox/i.text(ua)){火狐}
else if(/chrome/i.text(ua)){谷歌}
else if(/msie/i.text(ua)){ie}
else if("ActiveXObject" in window){ie11}
因为各浏览器的差异，使用能力检测来判断浏览器版本以使用不同的逻辑代码
callback &&callback() 有callback()函数就执行，没有就不执行

history
history 获取到当次访问的连接数量
history.back();和浏览器回退按钮一样
history.forward();前进
history.go(n);前进n个页面，负数就是向后跳转n个

location
可以解析url
location="http://www.baidu.com"; 修改会跳转到指定地址，也可以填相对地址
location.assign("http://www.baidu.com")
location.reload();刷新当前页面
location.reload(true);如果传了true会强制清空缓存刷新页面
location.repalce("http://www.baidu.com") 也是去新的网页，但不能回退

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()
事件的绑定
addEventListener() 可以同时为一个元素绑定多个响应函数，按照函数顺序从上往下执行，ie8及以下不支持
参数：事件（不要on），回调函数，是否捕获时触发
btn.addEventListener("click",function(){},false)
var btn = document.getElementById("myBtn"); 
btn.addEventListener("click", function(){ 
 alert(this.id); 
}, false); 
btn.addEventListener("click", function(){ 
 alert("Hello world!"); 
}, false); 
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除，匿名函数无法移除
var btn = document.getElementById("myBtn"); 
var handler = function(){ 
  alert(this.id); 
}; 
btn.addEventListener("click", handler, false); 
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效！

attachEvent()ie8及以下用，事件参数，要on
btn.addEventListener("onclick",function(){})

事件的委派：
将事件统一委派给祖先元素，当后代元素触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。比如给ul绑定事件，则子元素li都可以触发事件。
可以通过event.target获得触发事件的元素

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的
信息，如鼠标坐标，按下的那个键
window.event 兼容ie
event=event||window.event 实现都兼容
event.clientX 鼠标的x坐标（相对于窗口）
event.clientY
event.pageX 鼠标的x坐标（相对于整个页面）
event.pageY 

一些事件
onblur 失去焦点onFocus 获得焦点
onmouseover onmouseout onmousewheel 鼠标滚轮滚动
用wheelDelate和detail（兼容火狐）获取方向
if（event.wheelDelate>0 ||event.detail<0)
向上滚
else{
向下滚
}
onscroll 滚动条事件（滚动条谁的，给谁绑定）
onkeydown 按键按下onkeyup 按键松开
if（event.keyCode==89&&event.ctrlKey）
{ ctrl和y都被按下了
}
可以通过在函数里添加return false阻止默认行为，来阻止用户在input内输入一些特定字母