JavaScript--dom

1. 谈谈this对象的理解
 this总是指向函数的直接调用者
 如果有new关键字，this指向new出来的实例对象
 在事件中，this指向触发这个事件的对象
 IE下attachEvent中的this总是指向全局对象Window

2、this总是指向函数的直接调用者

var obj = {

      name: "热巴",

      dance: function () {

        console.log(this);

        console.log(this.name);

      },

    };

    obj.dance();

3、 如果有new关键字，this指向new出来的实例对象

function Box() {

      //   console.log(this);

      this.name = "jack";

    }

    var b = new Box(); //实例化对象

    console.log(b.name);

4、 事件对象 event

var oBtn = document.getElementById("btn");

    oBtn.onclick = function (e) {

      console.log(e); //event 事件对象

      console.log(e.type); //事件对象 类型

      console.log(e.target); //事件作用的目标 this

      console.log(e.target === this); //事件作用的目标 button对象 this true

      console.log(e.target === oBtn); //事件作用的目标 button对象 this true

      //   console.log(event); //关键字 event

      //   alert(event); //[object PointerEvent]

    };

    // console.log(event); //undefined

5、 节点创建

document.createElement(); //创建元素节点对象
    var _id = document.createAttribute("id"); //创建属性节点对象
    var _txt = document.createTextNode("abc"); //创建文本节点对象
    document.body.appendChild(_txt);
    console.log(_txt);

6、克隆

var oDiv = document.getElementsByClassName("box")[0];

    // var newDiv = oDiv.cloneNode();

    var newDiv = oDiv.cloneNode(true); //深入

    document.body.appendChild(newDiv);

    console.log(oDiv, newDiv)

节点对象.cloneNode(参数) 克隆节点对象

参数：可选 布尔值 深拷贝/浅拷贝  默认false浅拷贝 不克隆子节点;

7、插入

父节点对象.insertBefore(参数1,参数2) 把参数1节点对象插入到参数2节点对象之前

     参数1：必需 插入的节点

     参数2：必需 参照物

 

var oDiv = document.getElementsByClassName("box")[0];
    var oSpan = oDiv.firstElementChild;
    var cloneSpan = oSpan.cloneNode();
    cloneSpan.innerHTML = "world";
    cloneSpan.setAttribute("id", "con2");
    // oDiv.insertBefore(cloneSpan, oSpan);
    document.body.insertBefore(cloneSpan, oDiv);

 8、删除节点

删除节点：

    父节点.removeChild(删除节点)

    节点对象.remove()

9、替换节点

替换节点

    父节点.replaceChild(用来替换的节点，被替换的节点)