js5-定时器应用案例节点操作获取子节点

解决: 可以使用变量记录当前是否在做动画, 如果在做动画, 就结束往下执行

var flag = false;
if(flag == false){
    //更改动画状态, 并记录
    flag = true;
}else{
    //正在动画
    return;
}

延时定时器递归调用

  var count  = 5; 
  var timer = null;
  //开启定时器
  timer = setTimeout(arguments.callee, 1000);

DOM节点
- 根据W3C的HTML DOM标准, HTML文档中的所有内容都是节点:
  - 整个文档是一个文档节点
  - 每个HTML元素是元素节点
  - HTML元素内的文本是文本节点
  - 每个HTML属性时属性节点
  - 注释是注释节点
- 通过HTML DOM, 树种的所有节点均可通过JavaScript进行访问. 所有HTML元素(节点)均可被修改, 也可以创建或删除节点
document.createElement('div');: 创建节点(div节点)
- 参数: 标签名, 字符串
- 返回值: 返回新创建的标签
- 注意: 该方法由document调用
insertBefore(new, inBefore): 插入元素- 由父节点调用的方法
- 参数
  - 新节点: 要插入的节点
  - 插入到哪个节点的前面
- 返回值: 插入的新节点
appendChild(): 添加节点-父节点调用方法
- 参数: 要添加的节点
- 返回值: 要添加的节点
- 注意点
  - 谁调用该方法, 节点就添加到谁身上
  - 该方法会在当前元素的末尾添加一个子节点
removeChild(): 删除节点-父节点调用的方法
- 参数和返回值: 要删除的节点
replaceChild(): 替换节点-父节点调用方法
- 参数: 替换的节点, 被替换的节点
- 返回值: 被替换的节点
cloneNode(): 克隆节点, 父节点调用方法
- 参数: 布尔值
  - true会将当前节点里面所有子节点复制
  - false复制当前节点, 不复制子节点
- 返回值: 克隆新节点

.childNodes: 获取子节点返回一个数组(不建议使用)
- nodeType根据nodeType值区分
- 值为1 元素 | 2 属性 | 3 文本
.children: 获取所有的元素节点返回所有元素数组
box.getElementsByTagName('*'): 使用通配符获取所有子元素标签(数组)

getElementsByName(): 返回带有指定名称的节点对象的集合
- 区别: 跟getElementsById方法不同的是, 通过元素的name属性查询元素, 而不是通过id属性
- 注意
  - 因为文档中的name属性可能不唯一, 所有getElementsByName()方法返回的是元素的数组, 而不是一个元素
  - 和数组类似也有length属性, 可以和访问数组一样的方法来访问, 从0开始
getAttribute(): 获取元素节点的属性名称获取属性的值
- 语法: elementNode.getAttribute(name)
- 说明
  - elementNode: 使用getElementById() getElementByTagName()等, 获取到的元素节点的方法
  - name: 要想查询的元素节点的属性名称

DOM对象常用方法

js5-定时器应用案例 节点操作 获取子节点