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;