DOM节点之间的关系,与节点的基本操作

1. 节点之间的关系
1.1 第一种获取方式
以下获取节点都会获取所有的节点类型,不只是包括元素节点,还有文本类型等

获取一个元素节点的所有子节点

元素节点对象.childNodes

获取到的是一个类数组 NodeList

获取一个元素节点的第一个子节点

元素节点对象.firstChild

获取一个元素节点的最后一个子节点

元素节点对象.lastChild

获取一个元素节点的下一个节点对象

元素节点对象.nextSibling

获取一个元素节点的上一个节点对象

元素节点对象.previousSibling

获取一个元素节点的父节点

元素节点对象.parentNode

1.2 第二种获取方式
以下获取节点只会获取到元素节点类型

获取一个元素节点的所有子节点

元素节点对象.children

获取到的是一个类数组HTMLCollection

获取一个元素节点的第一个元素子节点

元素节点对象.firstElementChild

获取一个元素节点的最后一个元素子节点

元素节点对象.lastElementChild

获取一个元素节点的下一个兄弟元素节点

元素节点对象.nextElementSibling

获取一个元素节点的上一个兄弟元素节点

元素节点对象.previousElementSibling

获取一个元素节点的元素父节点

元素节点对象.parentElement

获取一个元素节点的所有子节点个数

元素节点对象.childElementCount

2. 节点的增加,插入,替换,移除,克隆
2.1 增加节点
增加文本节点

var text = document.createTextNode("文本内容")
增加元素节点

var ele = document.createElement("元素名")
2.2 插入子节点
插入节点必须通过父元素进行插入

如把上面的文本节点添加到元素节点中去

追加法

语法: 父元素对象.appendChild(要插入的节点对象名)

ele.appendChild(text);
在某一个子节点前插入节点

语法: 父元素对象.insertBefore(要插入的节点对象名,插入到哪个元素节点前)

ele.insertBefore(text,ele.lastElementChild);
ele.insertBefore(text,null);
ele.insertBefore(text,undefined);
如果第二个参数传入的是undefined或者null,那么效果跟appendChild方法一样

2.3 替换子节点
语法:父元素节点对象.replaceChild(新的节点,旧的节点)

//例: 将第2个li替换成p元素

    
• 第 1 个 li

    
• 第 2 个 li

   
• 第 3 个 li

var ul = document.querySelector(".ul1");
var p = document.createElement("p");
ul.replace(p,ul.firstElement.nextElementSibling);
2.4 移除子节点
语法: 父元素节点对象.removeChild(要移除的子节点对象)

例:
ul.replace(ul.lastElementChild);
2.5 克隆节点
语法: 要复制的节点对象.cloneNode(true/false)

true表示深复制,就是全部复制,子孙之类的全部复制

false表示浅复制,就是只复制当前的节点,子孙节点不会复制

var ul = document.querySelector(".ul1");

    
• 第 1 个 li

    
• 第 2 个 li

   
• 第 3 个 li

​
//复制一份ul成为ul的下一个兄弟
​
ul.parentElement.insertBefore(ul.cloneNode(true),ul.nextElementSibling);