JS高级学习历程-1
JS高级-34-昨天内容回顾 时间:2015-5-11
1、DOM获取元素节点
document.getElenmentById(id 属性值) 具体元素节点对象
document.getElenmentsByTagName(tag 标签名称 div ul li) 数组列表
document.getElenmentsByName(Name 属性值) 数组列表
2、DOM获取属性节点及属性操作
node.attributes; 数组列表
node.attributes.属性名称; 获取具体属性节点对象
node.attribute['class'] 获得 class 属性节点
属性操作
操作w3c规定的属性
node.属性名称; 获得属性信息
node.属性名称=属性值; 修改属性信息
操作 class属性，需要将其设置为className名称。
node.className;
操作w3c规定的 和 自定义的 属性
node.getAttribute(属性名称);
node.setAttribute(名称，值)
3、DOM获得文本节点
<div>hello</div>
divnode.firstChild; 获得文本节点
nodeType:
1 -> 元素节点
2 -> 属性节点
3 -> 文本节点
4 -> document文档节点
lastChild; childNodes nextSibling previousSibling parentNode
4、DOM各个节点创建、追加
创建：
元素节点 document.createElement(tag 标签名称)
文本节点 document.createTextNode(文本内容)
属性 node.setAttribute(属性名称，值)
追加
父节点.appendChild(子节点);
父节点.insertBeFore(new,old);
父节点.replaceChild(new,old);
5、DOM节点删除和复制
删除：
父节点.removeChild(子节点)
复制：
节点.cloneNode(true 深层复制/false浅层复制);
6、DOM操作css样式
node.style.样式名称; //获得样式属性信息
node.style.样式名称=值; //设置样式属性信息
注意：
① 自能操作行内样式
② 操作符合属性（例如：background-color、border-left、margin-bottom），中横线去掉后边首字母大写，backgroundColor、borderLeft、marginBottom
7、dom2 级方式事件设置
主流浏览器
node.addEventListener(类型、事件处理、事件流)
node.removeEventListener(类型、事件处理、事件流)
类型：click mouseover mouseout focus blur 等事件
事件处理：匿名函数表达式、函数名称
事件取消注意：
① 事件取消的参数 与 绑定的参数完全一致
② 事件处理必须是一个有名函数
IE 浏览器
node.attachEvent(类型，事件处理)；
node.detachEvent(类型，事件处理)；
类型：onclick onmouseover onmouseout 等等
事件流：只有一种冒泡型事件流
8、事件流
有许多节点，他们的物理位置彼此嵌套，他们还有相同的事件，一旦一个节点的事件被触发，会把其他节点的相同时间也给触发，连续多个事件同时顺序执行就是一个“事件流”。
9、事件对象获取及相关作用
事件对象获取：
① 主流浏览器 node.onclick = function(evt){ 操作 evt }
② IE方式 windows.event;
事件对象作用：
① 获得鼠标位置(clientX clientY pageX pageY screenX screenY)
② 获得键盘被按下的情况 event.keyCode
③ 阻止事件流的产生
event.stopPropagation(); 主流浏览器
event.returnValue = false; IE浏览器
10、加载事件
相关的js代码要等待全部的 html 和 css 都加载到内存之后再执行，这个过程称为“加载过程”，可以利用“加载事件”执行该过程
window.onload = function(){ 执行具体加载过程 }
window.onload = fn;
