html前端改原生,常用的 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 

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 :

所以要保证 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代替。