JS dom操作

最近用到了一些js对dom的操作，来做个总结：

1、获取节点

document.getElementById()//通过ID获取节点，返回一个元素对象
ducoment.getElementByName()//通过Name属性获取节点，返回一个对象数组
document.getElementByTagName()//通过表现名获取节点，返回一个对象数组
document.getElementByClassName()//通过类名获取节点，返回一个对象数组

2、获取属性

   element.getAttribute(attributeName)     //括号传入属性名
   element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值
   element.removeAttribute('disabled')//移除属性

3、创建、插入、移除

var  newspan=document.createElement("span");//创建新的节点 span
newspan.innerHTML = arrAdmin[i].name + "<font color='red'>" + arrAdmin[i].keyword + "</font>"; //给新创建的节点p 添加内容
element.appendChild(newspan)//插入创建的节点
element.classList.add('is-disabled')//插入class
element.classList.remove("DDP-show");//移除class
document.createTextNode(String); //创建一个文本节点；
document.createAttribute("class"); //创建一个属性节点

4、父子节点

element.parentNode//返回当前元素的父节点对象
element.chlidren//获取的是当前元素的所有子节点元素（不包括文本元素），children返回的是HTMLCollection类型
element.chilidNodes//获取的是当前元素的有所子元素（节点元素和文本元素），childNodes返回的是NodeList类型。空格也会作为一个节点返回
    element.firstChild //返回当前节点的第一个子节点对象        （节点）
    element.firstElementChild //返回当前元素的第一个子节点对象     （元素）
    element.lastChild//返回当前节点的最后一个子节点对象        （节点）
    element.lastElementChild //返回当前元素的第一个子节点对象     （元素）

node.nodeType。返回节点的类型。1：元素节点，2：属性节点，3：文本节点。可以用它来过滤chilidNodes。

function getElementChild(element){
if (!element.children) {
var  List = element.childNodes;
var  Item,
 Arr = [];
for(var i = 0; i <  List.length; i++){
 Item =  List[i];
if( Item.nodeType == 1){//说明该节点为元素节点
 tArr.push( Item);
}
}
return  Arr;
}
else{
return element.children;
}
}

移除所有子节点

 if( document.getElementById("admin").children.length)
 {
                    console.log("校验过了");
                    //移除admin
                    var al = document.getElementById('admin');
                    var childs = al.childNodes;
                    for(var i = childs .length - 1; i >= 0; i--) {
                        al.removeChild(childs[i]);
                    }
  }

节点和元素

元素（element）：页面中所有的标签，即是元素也是节点
节点（node）：页面中所有的内容，包括标签、属性（标签的属性）、文本(文字,换行,空格,回车))
节点的属性:(可以使用标签–元素.（点）出来,可以使用属性节点.出来,文本节点.点出来)
nodeType:节点的类型:1----标签,2—属性,3—文本
元素是节点的子集，Element是Node的扩展，所以也更实用一些。例如，用Element可以方便的获得Node的属性getAttribute(String attrName)如果用Node，可以得到一个属性集，还要进一步检索才可得到想要的属性。一个结点不一定是一个元素，而一个元素一定是一个结点。