常用的 js HTMLDOM对象 原生方法兼容
常用的 js HTMLDOM对象 原生方法兼容
奥巴码侬 发表于3年前
常用的 js HTMLDOM对象 原生方法兼容
  • 发表于 3年前
  • 阅读 29
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: children childNodes firstChild lastChild nextSibling previousSibling removeChild innerHtml

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代替。

共有 人打赏支持
粉丝 34
博文 97
码字总数 43584
×
奥巴码侬
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: