关于DOM节点操作

关于DOM节点的操作

DOM就是我们html中一个个节点构成的，我们的标签、文本内容、注释、包括空格都是节点
DOM的节点也分三种：
		元素节点、文本节点、属性节点
		
那么关于关于节点的几个操作有哪些呢？

创建节点

document.createElement(元素标签)  //创建元素节点（创建标签）
document.createAttribute(元素属性)  //创建属性节点（创建属性，只有属性名，没有属性值）
document.createTextNode(文本内容)  //创建文本节点（创建了一个内容）
**我们常用的就是创建元素节点**

var div = document.createElement("div");
    // 创建元素节点，参数是字符串加引号

删除节点

删除指定元素的子节点
父元素.removeChild(要删除的节点);

// 获取父节点和子节点
    var div = document.querySelector("div");
    var p = document.querySelector("p");
// 删除div下的p标签
    div.removeChild(p);
// 如果无法获取父元素，只知道要删除的子元素
    p.parentElement.removeChild(p);

替换节点

父节点.replaceChild(新的节点,被替换的节点)

// 使用i标签替换掉p标签
// 先创建一个i标签
    var i = document.createElement("i");
    var p = document.querySelector("p");
    p.parentElement.removeChild(i,p);

插入节点

父节点.appendChild(所添加的新节点) 	//追加子节点
父节点.insertBefore(所要添加的新节点，已知子节点)  //在已知的子节点前插入一个新的子节点

//获取标签
    var div = document.querySelector("div");
    var p = p.querySelector("p");
    var i = document.createElement("i");
// 将创建好的i标签放到div的最后面，作为一个子元素
    div.appendChild(i);
// 将i标签插到p标签前面
    div.insertBefore(i,p);

复制节点

被复制的节点.cloneNode()

// 复制p标签
    var p = p.querySelector("p");
    var p1 = p.cloneNode();
// 如果想将被复制的标签里面的内容也复制出来 - 给这个方法加一个参数 true
    var p2 = p.cloneNode(true);

节点操作总结

创建元素节点
删除节点
替换节点
追加子节点
插入到指定节点前面
复制节点