常用的 js HTMLDOM对象 原生方法兼容

children （非标准的）

在ie下会返回注释节点，不建议试用

childNodes  （标准的）

chorme(版本39) firfox(版本37) 会获取 文本节点，所以需要用nodeType 过滤一下

        window.onload = function () {
	    	var i = 0,
	    	    length=aChilds.length,
	    	    aChilds = document.getElementsByTagName('body')[0].childNodes,
	    	    newChilds = [];
	    	for (; i < length; i++) {
	    	    if (aChilds[i].nodeType == 1) {
	    	        newChilds.push(aChilds[i]);
	    	    }
	    	}
        }

firstChild

所有主流浏览器都支持，会返回 文档节点;  firstElementChild id6-8不支持; 可以用此方法代替：

function getFirst (ele) {
   var e,
       i = 0;
   for (; e = ele.childNodes[i++];) {
	if (e.nodeType ==1) {
	   return e;
	}
   }
}

lastChild

同上，可以用以下方法代替:

function getLast (ele) {
    var e,
        i = ele.chlldNodes.length - 1;
    for (; e = ele.childNodes[i--];) {
        if (e.nodeType == 1) {
            return e;
        }                
    }
}

parentNode

html节点缺失 ie8下为空，chrome 下为 form :

<form action="">
    <table>
	<input type="text" id="test">
    </table>
</form>

 所以要保证 html不要缺失！

nextsibling 和 prevsibling 

FF会包含空格作为节点所以需要过滤一下

function sibling (cur, direction) {
    do{
	cur = cur[direction];
    }while(cur && cur.nodeType !==1);
    return cur;
}

sibling(xxx, 'nextSibling');

removeChild()

需要通过父节点删除自己

ele.parentChild.removeChild(ele);

innerHtml

无兼容问题

element.innerHtml = "test";
.....

属性查询总结：

    1:常规属性建议使用 node.XXXX。
    2:自定义属性建议使用node.getAttribute("XXXX")。
    3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX")，如label中的for。
    4:当获取的目标是保留字,如：class,请使用className代替。