DOM-动态操作心得

时间:2022-08-13 19:11:20

这个知识点都是之前看过的,就当是复习了

一、创建元素的三种方法

  第一种:  document.write()

    • 识别标签
    • 但会覆盖之前内容

  第二种:  用元素自身的innerHTML方法

    • 不识别标签
    • 但可以不覆盖之前内容
      ul.innerHTML += "<li></li>";

  第三种:利用DOM自身api创建元素

    • 先var newLi = document.createElement("li")  ***()内传入的参数只写标签名字即可,不要写格式<li></li>***
    • newLi.innerHTML = "我是document.createElement方法创建的";
    • ul.appendChild(newLi);  //添加到ul中  ***appendChild()是在父元素的最后面添加新创建的元素***
    • 还可以用ul.innerinsertBefore(newLi,2);  //***insertBefore()方法的第二个参数是获取到的指定节点,在该节点之前添加新创建的元素***

二、删除和替换

  1. 删除 removeChild()     //直接传入要删除的子元素
  2. 替换 replaceChild()    //父元素调用,第一个参数是新元素.第二个参数是要被替换的元素
ul.replaceChild(li3,li2);

替换方法,很少用,完全可以用删除再添加替代

三、克隆

  • node.cloneNode();     //被复制的节点来调用,参数是true时,深层复制,包括里边包含的其他子元素;参数是false,浅复制,只复制该元素本身