节点的操作一共四种:
创建节点(3种)
添加节点(2种)
删除节点(1种)
复制节点
1、创建节点(3种)
第一种。document.write(“”);
缺点:在事件触发后,书写内容,容易覆盖掉原有内容。
如果是在页面加载的时候,直接书写,不会发生覆盖。
第二种。innerHTML属性。这个属性会识别标签。
注意点:时时刻刻都会覆盖掉原有内容,所以赋值之前,先获取内容,并到一起重新赋值。
缺点:原有的子元素事件会被取消
优点:操作简单。属性绑定简单。标签嵌套简单。
第三种:document.createElement(“li”);
优点:老元素的事件不会被覆盖。创建方便,想绑定什么属性,都可以。
缺点:每次都要绑定属性,而且还需要添加。比较繁琐。
2、添加节点(2种)
第一种:父节点.appendChild(新节点);
把一个新节点,放入一个父节点的最末尾。
第二种:父节点.insertBefore(新节点,参考节点);
把一个新节点,放入一个参考节点之前。
如果参考节点是undefined或者null,那么方法等同于appendChild
3、删除节点(1种)
- 父节点.removeChild(子节点);
- 不知道父级的情况下,可以这么写:
子节点.parentNode.removeChild(子节点);//自杀
4、复制节点
节点.cloneNode();
参数为布尔类型值,true为深层复制(复制节点及其所有子节点),默认为false浅层复制(复制节点本身,不复制子节点)。
console.log(box.cloneNode());//不加参数浅层赋值。
console.log(box.cloneNode(true));//加参数true深层赋值。
节点操作案例源码下载地址:https://github.com/luyu1314/03-DOM-case