转：DOM操作

转载来自：https://www.jianshu.com/p/632c7dcc67a3

javascript 原生方法对dom节点的操作包括：访问（查找）、创建、添加、删除、替换、插入、复制、移动等。

//查找节点
document.getElementById("id");// 通过id查找，返回唯一的节点
document.getElementsByClassName("class");// 通过class查找，返回值为nodeList类型
document.getElementsByTagName("div");// 通过标签名查找，返回值为nodeList类型

//创建节点
document.createDocumentFragment();//创建内存文档碎片
document.createElement();//创建元素
document.createTextNode();//创建文本节点
 
//添加节点
var ele = document.getElementById("my_div");
var oldEle = document.createElement("p");
var newEle=document.createElement("div");
ele.appendChild(oldEle);

//删除节点
ele.removeChild(oldEle);

//替换节点
ele.replaceChild(newEle,oldEle);

//插入节点
ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点

//复制节点
var cEle = oldEle.cloneNode(true);//深度复制，复制节点下面所有的子节点
cEle = oldEle.cloneNode(false);//只复制当前节点，不复制子节点

//移动节点
var cloneEle = oldEle.cloneNode(true);//被移动的节点
document.removeChild(oldEle);//删除原节点
document.insertBefore(cloneEle,newEle);//插入到目标节点之前

createElemet:创建文档碎片～

var node = document.createElement("nodeName");

createTextNode： 创建文本节点

var txt = document.createTextNode("这是一段文本");

appendChild: 添加子节点(属性节点，文本节点，元素节点)

var parent = document.getElementById("parent");
parent.appendChild(node) ;

insertBefore: 把一个新元素插入到现有元素之前

parentEment.insertBefore(newElement,targetElement);

元素节点的父元素必须死元素节点，属性节点和文本节点的自元素不允许是元素节点

自己实现一个insertAfter:把一个元素插到现有元素之后

function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling)
  }
}

自己实现一个 lastChildrenElement: 获取最后一个元素节点

// * 通配符
function lastChildElement(element) {
    var elementArray = element.getElementsByTagName('*');
    if (elementArray.length<1) return;
    return elementArray.pop();
}

js 设置和更新 css

var para = document.getElementById("element");
para.style.color = "black";
para.style.font = "2em 'times',serif";