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;

   

转载于:https://www.cnblogs.com/daipianpian/p/4494139.html