js中的DOM操作汇总

nodeType

document.createTextNode

varnode1=document.createElement('div');
varnode2=document.createTextNode('helloworld!');

//返回当前文档中第一个类名为"myclass"的元素
varel=document.querySelector(".myclass");

//返回一个文档中所有的class为"note"或者"alert"的div元素
varels=document.querySelectorAll("div.note,div.alert");

//获取元素
varel=document.getElementById('xxx');
varels=document.getElementsByClassName('highlight');
varels=document.getElementsByTagName('td');
Element也提供了很多相对于元素的DOM导航方法：

//获取父元素、父节点
varparent=ele.parentElement;
varparent=ele.parentNode;//只读，没有兼容性问题
varoffsetParent=ele.offsetParent;//只读，找到最近的有定位的父节点。
　　　　　　　　　　　　　　　　　　　　　//没有定位父级时，默认是body;但在IE7以下，如果当前元素没有定位属性，返回body，如果有，返回HTML;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//如果当前元素某个父级触发了haslayout，则返回触发了haslayout这个元素。

//获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
varnodes=ele.children;//标准下、非标准下都只含元素类型，但对待非法嵌套的子节点，处理方式与childNodes一致。
varnodes=ele.childNodes;//非标准下：只包含元素类型，不会包含非法嵌套的子节点。
　　　　　　　　　　　　　　　　//标准下：包含元素和文本类型，会包含非法嵌套的子节点。

//获取元素属性列表
varattr=ele.attributes;

//查询子元素
varels=ele.getElementsByTagName('td');
varels=ele.getElementsByClassName('highlight');

//当前元素的第一个/最后一个子元素节点
varel=ele.firstChild;//对待标准和非标准模式，如childNods
varel=ele.lastChild;
varel=ele.firstElementChild;//非标准不支持
varel=ele.lastElementChild;
//下一个/上一个兄弟元素节点
varel=ele.nextSibling;
varel=ele.previousSibling;
varel=ele.nextElementSibling;
varel=ele.previousElementSibling;

//添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

//替换子元素
ele.replaceChild(el1,el2);

//插入子元素
parentElement.insertBefore(newElement,referenceElement);

//克隆元素
ele.cloneNode(true)//该参数指示被复制的节点是否包括原节点的所有属性和子节点

//获取一个{name,value}的数组
varattrs=el.attributes;

//获取、设置属性
varc=el.getAttribute('class');
el.setAttribute('class','highlight');

//判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');

//是否有属性设置
el.hasAttributes();

innerHTML与outerHTML的区别？

<div>content<br/></div>

innerHTML

content<br/>

outerHTML

<div>content<br/></div>

innerText

content

outerText

content

outerText

innerText

outerText

xxText

.html()

.innerHTML

catch

.empty()

.append()

.innerHTML