最近用到了一些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,可以得到一个属性集,还要进一步检索才可得到想要的属性。一个结点不一定是一个元素,而一个元素一定是一个结点。