Cacher is the code snippet organizer for pro developers

创建元素

var btn=document.createElement("p");
btn.textContent = "hello";
document.body.appendChild(btn);

var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);

遍历元素

1、childNodes：获取节点，不同浏览器表现不同；

IE：只获取元素节点；

非IE：获取元素节点与文本节点；

解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

2、children：获取元素节点，浏览器表现相同。

因此建议使用children。

3、firstChild与firstElementChild

相同点：获取父节点下的第一个节点对象；

不同点：1、firstchild：IE6,7,8：第一个元素节点；

非IE6,7,8：第一个节点，文本节点或者元素节点；

2、firstElementChild：IE6,7,8：不支持；

非IE6,7,8：第一个元素节点；

function firstChild(obj){
    if(obj.firstElementChild) return obj.firstElementChild;
    return obj.firstChild
}

4、lastChild与lastElementChild

相同点：获取父节点下的最后一个节点对象；

不同点：1、lastchild：IE6,7,8：最后一个元素节点；

非IE6,7,8：最后一个节点，文本节点或者元素节点；

2、lastElementChild：IE6,7,8：不支持；

非IE6,7,8：最后一个元素节点；

5、nextSibling与nextElementChild

相同点：获取后一个兄弟节点对象；

不同点：1、nextSibling：IE6,7,8：后一个兄弟元素节点；

非IE6,7,8：后一个兄弟节点，文本节点或者元素节点；

2、lastElementChild：IE6,7,8：不支持；

非IE6,7,8：后一个兄弟元素节点；

6、previousSibling与previousElementChild

相同点：获取前一个兄弟节点对象；

不同点：1、previousSibling：IE6,7,8：前一个兄弟元素节点；

非IE6,7,8：前一个兄弟节点，文本节点或者元素节点；

2、previousElementChild：IE6,7,8：不支持；

非IE6,7,8：前一个兄弟元素节点；

7、parentNode：获取父元素，符合W3C标准, 不存在兼容性问题。

8 parentElement 仅ie支持

9、offsetParent：获取第一个设置定位的父元素；

 offsetLeft：获取离第一个定位父元素的左距离；

 offsetTop：获取离第一个定位父元素的上距离；

插入元素

appendChild

在指定的元素内追加一个元素节点。

var aChild = element.appendChild(aChild);

insertBefore

在指定元素的指定节点前插入指定的元素。

var aChild = element.insertBefore(aChild, referenceChild);

删除元素

删除指定的节点的子元素节点。

var child = element.removeChild(child);

removeNode(node)

替换元素

replaceNode(newNode，node)

为元素增加自定义属性

自定义属性是相对于内置属性来说的

<input type="text" id="txtBox" displayName="123456" />

var obj = document.getElementById("txtBox");
// 读取
obj.getAttribute("displayName");
obj.attributes["displayName"].nodeValue;
// 判断
obj.hasAttribute("displayName");
// 设置
obj.setAttribute("displayName ","123456");
obj.attributes["displayName"].nodeValue = "123456";
// 移除
obj.removeAttribute("displayName");

为元素更改样式

HTML DOM Style 对象