JS对DOM节点操作整理
获取节点：
//按照ID获取 document.getElementById('element'); //按照节点名称获取，返回类数组对象 document.getElementsByTagName('element'); //按照name名称获取，返回类数组对象 document.getElementsByName('element'); // 按照className获取，返回类数组对象,IE8及以下并不支持； document.getElementsByClassName('className') //html5提供的新接口，类似jq的选择器，可以使用层叠关系，多选，返回值为第一个元素 document.querySelector('.element') //根据class querySelector在IE7以下不支持，IE8支持 document.querySelector('#element') //根据id document.querySelector('#element .div') //层叠关系 document.querySelector('.div,.div2') //多选 document.querySelector("div.test > p:first-child"); //子选择器 document.querySelector("div.test + p"); //兄弟选择器 document.querySelector("div[type=qq]") //属性选择器; //使用方法同上，也是html5提供的新接口，这个返回类数组对象 document.querySelectorAll('.element')
获取子节点：
//元素子节点集合，这个有兼容性问题，在IE9以下，会忽略文本节点，比如换行符，空格，文字，而IE9以上，包括现代浏览器会获取文本节点，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 element.childNodes //元素子节点集合，这个不返回文本节点，直接获取元素节点，也是最常用的，兼容性也不错，只是在IE9以下，会包含注释节点，只要div里面不写注释也就没啥大问题 element.children
获取第一个子节点：
//获取元素的第一个子节点，这个同样有兼容性问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会 element.firstChild //同样获取元素的第一个子节点，但是在IE9以下不支持，现代浏览器中会忽略文本节点。 element.firstElementChild //我们可以通过下面的写法获取第一个子节点，来兼容所有浏览器。 var firstChild = ele.firstElementChild || ele.firstChild alert(firstChild)
获取最后一个子节点：
//获取元素的最后一个子节点，同firstChild一样，这个同样有兼容性问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会 element.lastChild //同样获取元素的第一个子节点，但是在IE9以下不支持，现代浏览器中会忽略文本节点。 element.lastElementChild //我们可以通过下面的写法获取最后一个子节点，来兼容所有浏览器。 var lastChild = ele.lastElementChild || ele.lastChild alert(lastChild)
获取父元素：
//获取元素的父元素 element.parentNode //获取元素的父元素，据说这个只支持IE，但是测试了一下貌似Firefox和chrome也支持，大部分情况下还是用parentNode来取代parentElement element.parentElement
获取上一个兄弟元素：
//获取上一个兄弟元素，这个同上面获取第一个子节点一样的问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会 element.previousSibling //同样获取上一个兄弟元素，但是在IE9以下不支持，现代浏览器中会忽略文本节点。 element.previousElementSibling //我们可以通过下面的写法获取上一个兄弟元素，来兼容所有浏览器。 var prevEle = ele.previousElementSibling || ele.previousSibling alert(prevEle)
获取下一个兄弟元素：
//获取下一个兄弟元素，这个同上面获取第一个子节点一样的问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会 element.nextSibling //同样获取下一个兄弟元素，但是在IE9以下不支持，现代浏览器中会忽略文本节点。 element.nextElementSibling //我们可以通过下面的写法获取下一个兄弟元素，来兼容所有浏览器。 var nextEle = ele.nextElementSibling || ele.nextSibling alert(nextEle)
获取上下兄弟元素：
var siblings = Array.prototype.slice.call(el.parentNode.children); for (var i = siblings.length; i–;) { if (siblings[i] === el) { siblings.splice(i, 1); break; }; }; ;[].forEach.call(el.parentNode.children, function(child){ if(child !== el); });
获取元素或者属性节点的标签名称：
element.nodeName
获取元素的内容(包含HTML标签)：
element.innerHTML
获取元素的纯文本内容(不包含HTML标签)：
element.innerText //Firefox不认识这个 element.textContent //Firefox用这个
设置元素的属性节点：
element.setAttribute(Name,Value);
获取元素的属性节点：
element.getAttribute(Name);
删除元素的属性节点：
element.removeAttribute(Name);
创建元素：
document.createElement('element'); //创建元素节点：
document.createTextNode('text'); //创建文本节点：
document.createAttribute('attribute'); //创建属性节点：
删除节点（必须从父层开始删除）：
parentNode.removeChild(ele);
插入节点：
//插入到父节点的尾部 parentNode.appendChild(ele); //插入到已存在节点的前面； parentNode.insertBefore(newNode,ele)
克隆节点：
node.cloneNode(true) //传入true为深度复制
替换节点：
parentNode.replaceChild(newNode,oldNode);
循环节点：
[].forEach.call(ele,function(el,i){ //xxx }); for(var i = 0;i < ele.length;i ++){ //ele[i] }
以下是HTML5提供的新方法：
ele.classList //元素的class对象 IE9及以下不支持 ele.classList.add('xxx') //添加class ele.classList.remove('xxx') //删除class ele.classList.toggle('xxx') //切换class ele.classList.contains('xxx') //是否包含class
以下是利用原生js实现对class的添加删除和判断：
//添加class function addClass(_object,_clsname){ var _clsname = _clsname.replace(".",""); if(!hasClass(_object,_clsname)){ _object.className = _object.className+(" "+_clsname); }; } //判断是否存在已有class function hasClass(_object,_clsname){ var _clsname = _clsname.replace(".",""); var _sCls = " "+(_object.className)+" "; return (_sCls.indexOf(" "+_clsname+" ") != -1) ? true : false; } //删除class function delClass(_object,_clsname){ var _clsname = _clsname.replace(".",""); if(hasClass(_object,_clsname)){ _object.className = _object.className.replace(new RegExp("(?:^|\\s)"+_clsname+"(?=\\s|$)","g")," "); }; }
