JS.DOM对象操作基础

通过document对象调用
1getElementById("xx"); 获取id=xx的元素
//var btn = document.getElementById("xx"); 
2.getElemtsByTagName(); 获取一组元素节点对象
会返回一个类数组对象，所有查询到的元素会封装到对象中
3.getElementsByName(); 通过name属性获取一组元素节点对象
获取元素的子节点
1.childNodes 获取当前节点的所有子节点
//会获取包括文本节点在内的的所有节点，标签间的空白也是文本节点
2.firstChild 获取当前节点的第一个子节点，包括空白文本节点
3.lastChild 获取当前节点的最后一个子节点
4.parentNode 获取当前节点的父节点
5.previousSibling 前一个兄弟节点，包括空白文本节点
6.nextSibling 后一个兄弟节点
7.nodeValue 获取文本节点对象的文本值
8.querySelector() 需要一个选择器的字符串作为参数，可以根据css选择器来查询一个元素节点对象 
//var div = document.querySelector(".box1 div");
只会返回一个元素，如果有多个就返回第一个
9.querySelectorAll() 将符合条件的元素封装到一个数组
10.createElement() 创建一个节点，需要一个标签名作为参数，根据标签创建节点
11.createTextNode() 创建一个文本对象，需要一个文本对象作为参数，并将新节点返回
12.appendChild() 向父节点中添加一个新的子节点 ：父节点.appendChild(子节点)
//<li>广州</li>
//1. var li = document.createElement("li")
//2. var gz = document.createTextNode("广州") --li.innerHTML = "广州"
//3. li.appendChild(gz);
13.insertBefore() 在指定子节点前面插入新的子节点 ：父节点.insertBefore(新节点，旧节点)
14.replaceChild() 可以使用指定的子节点替换已有的子节点 ： 父节点.replaceChild(新节点，旧节点)
15.removeChild() 删除子节点 ：父节点.removeChild(子节点 )

innerHTML  修改文字，用于获取元素内部的html代码
//btn.innerHTML = ....
读取元素节点属性：元素.属性
class不能直接读取，可以使用元素.className

innerText 获取元素内部的文本内容，与innerHTML类似，不同的是，可以将html标签去掉

事件
1.onclick 单击
2.ondblclick 双击
3.onmousemove 移动鼠标
4.onload 整个页面加载完成之后才会触发
//window.onload = （）{JS代码}

将事件绑定处理函数
xx.onclick = function(){
    alert("你好");
}

通过 return false 取消超链接的默认跳转

confirm()：用于弹出一个带有确定和取消按钮的提示框，需要一个字符串作为参数，参数作为文字提升，会有返回值：false true

通过JS修改元素的样式：元素.style.样式名 = 样式值，读取的是内联样式，不能读取样式表的
currentStyle.样式名 获取元素当前显示的样式：元素.currentStyle.样式名 （只 有IE浏览器支持）（仅只读）
特殊样式名不行：background-color  ：backgroundColor
如果样式中含有：！important   则不能修改，它的优先级最高

getComputedStyle() 获取元素当前显示的样式  在其他浏览器中可以使用）（仅只读）
   // 需要两个参数：1.要获取样式的元素  2.可以传递一个伪元素，一般都传null
    //会返回一个对象，对象中封装了当前元素对应的样式
//getComputedStyle(box,null).width
//不支持IE8
需要做到兼容的时候：创建函数：判断执行获取元素的样式
clientWidth clientHeight  获取元素的可见高度和可见宽度（仅只读）
//获取包括内部区和内边距
// 返回的是数字，可以直接计算
offsetWidth offsetHeight 获取元素的整个宽度和高度，包括内容区 内边距和边框
offsetParent 可以用来获取当前元素的定位父元素
offsetLeft 当前元素相对于其定位父元素的水平偏移量
offsetTop 当前元素相对于其定位父元素的垂直偏移量
scrollHeight  可以获取元素整个滚动区域的高度
scrollWidth  可以获取元素整个滚动区域的 宽度
scrollTop  可以获取垂直滚动条滚动的距离
scrollLeft  可以获取水平滚动条滚动的距离
//scrollHeight - scrollTop == clientHeight 说明垂直滚动条到底了
overflow：auto  设置一个滚动条
disabled = "disabled" 如果给表单设置了这个，则变得不可用
//disabled 可以设置一个元素是否禁用，true为禁用，false为可用
onscroll 滚动事件，在事件滚动的时候触发

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘那个案件被按下，鼠标滚轮滚动的方向
clientX 可以获取鼠标指针的水平坐标(相对于可见窗口) IE8：window.clienetX
clientY 可以获取鼠标指针的垂直坐标(相对于可见窗口) IE8：window.clienetX
//兼容处理： event = event || window.event 
pageX 可以获取鼠标指针的水平坐标(相对于整个页面) IE8：不支持
pageY 可以获取鼠标指针的垂直坐标(相对于整个页面)
target 返回触发事件的对象

取消冒泡：将事件对象的cancelBubble设置为true，即可取消冒泡

事件委派：将事件统一绑定给元素的共同的祖先元素，当后代元素的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

使用 对象.事件 = 函数 的形式绑定函数
//只能绑定一个，绑定多个会覆盖

addEventListener（） ：可以为元素绑定函数    （不支持IE8）
1.参数：事件的字符串，不用on：click
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个bool ，一般都传false
ps：btn.addEventListener("click",function(){ alert(1) },fasle);
//可以同时为一个元素的相同事件同时绑定多个响应函数，按照绑定顺序执行
//this为绑定对象
使用addEventListener时，取消默认行为不能使用return false ，需要使用event.preventDefault();（不支持IE8）

attachEvent（） ：跟addEventListener（）差不多 （仅支持IE8）
1.参数：事件的字符串，需要on：onclick
2.回调函数
ps：btn.attachEvent("click",function(){ alert(1) });
//可以同时为一个元素的相同事件同时绑定多个响应函数，后绑定先执行，与上述方法相反
//this为window

自定义 兼容的绑定函数：兼容所有浏览器
function bind (obj , eventStr , callback){
               if(obj.addEventListener){
    obj.addEventListener(eventStr , callback , false);}
    else{
    obj.attachEvent("on"+eventStr , function(){callback.call(obj)});}
}

事件传播有三个阶段
1.捕获阶段：从外层祖先元素先目标元素进行事件的捕获，但是默认不会触发事件
2.目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素上触发事件
3.冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
//如果希望在捕获阶段就触发事件，可以将addEventListener（）中将第三个参数设置为true
//IE8没有捕获阶段 

捕获事件： 
元素.setCapture() 强制捕获（只有IE支持，火狐不会报错 ）

鼠标滚轮滚动事件：
onmousewheel（火狐不支持）
DOMMouseScroll，需要跟addEventListener共同使用（火狐支持）
event.wheelDelta 鼠标滚动方向（火狐不支持）//返回值为：向上滚120  向下滚-120
event.detail 鼠标滚动方向（火狐支持）//返回值为：向上滚-3 向下滚3

键盘事件：（绑定给可以获取到焦点的对象或者document）
onkeydowm 按键被按下
onkeyup 按键松开
keyCode：获取按键的编码
altKey：判断alt是否被按下，是返回true
ctrlKey：判断ctrl是否被按下，是返回true
shiftKey：判断shift是否被按下，是返回true

通过style属性修改元素的样式：每修改一次，浏览器就渲染一次。