节点操作、定时器

节点操作

所有的内容都是节点

• 元素节点

• 属性节点

• 标签节点

• 注释节点

节点类型

1. 获取节点

   document的节点类型---9

   console.log(document.nodeType);//9

   标签的节点类型---1

   var box1 = document.getElementById("box1");
   ​
   console.log(box1.nodeType);//1

   属性的节点类型---2，getAttributeNode("属性"):获取元素的属性节点

    var attr1 = box1.getAttributeNode("class");
   ​
    console.log(attr1.nodeType);//2

   文本的节点类型---3，元素的第一个子节点就是文本节点

   console.log(box1.firstChild.nodeType);//3

创建元素

1. document.write()

   弊端：只能往body中添加元素

   document.write('<div class="box1">我是div</div>');

2. InnerHTML

   弊端：在同级下只能添加一种元素，多个会覆盖，但是会丢失原有元素的事件

   document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

3. document.reateElement()

   父元素.appendicle(子元素)：给父元素末尾添加子元素（文本为createTextNode()）

   var pObj = document.createElement("p");
   divObj1.appendChild(pObj);

4. 删除元素

   u1.remove()

事件进阶

覆盖

1. 监听事件：不会相互覆盖

   1. 绑定监听事件addEventListener(“事件的类型”,事件的处理程序)

      box1.addEventListener("click", myFunc)
      function myFunc() {
      this.style.backgroundColor = "blue";
      }

   2. 解绑监听事件removeEventListener(‘事件的类型’,’事件的处理程序’)

      box1.removeEventListener("click", myFunc);

2. 事件对象

   1. event.target 事件源

3. BOM

   1. window.location.herf：跳转

   2. window.location.history.forward：前进

   3. window.location.history.back：后退

4. 定时器

   1. setTimeout(‘函数’,’时间’)

      多少毫秒后执行函数一次

   2. setInterval(‘函数’,’时间’)

      隔多少毫秒后循环执行该函数