文档章节

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

奥巴码侬
 奥巴码侬
发布于 2015/04/15 10:39
字数 339
阅读 30
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
私信 提问
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
12/07
0
0
【quickhybrid】H5和Native交互原理

前言 架构的核心就是交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前也整理过类似的文章,本系列重新梳理)...

dailc
07/01
0
0
JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度
2015/08/08
0
0
​基于 WKWebview 进行二次封装的 WebView - KSWebView

KSWebView,最好的 WKWebView 继承者。 KSWebView是基于WKWebview进行2次封装的WebView。 KSWebView具有: 用JS语句的方式调用原生类/对象,方便快捷,老板提出来的临时需求也能马上解决的方...

kinsunlu
08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot与pageHelper版本问题

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.6.RELEASE</version></parent> <dependency>......

WALK_MAN
9分钟前
0
0
PHP开发支付宝微信个人免签支付接口实例

这是一个PHP开发支付宝微信个人免签支付接口实例,支付宝微信即时到帐接口,使用原生支付宝即时到帐接口修改而来,即可实现多接口收款功能,开发只需要按照支付宝即时到帐接口开发即可,减少...

sucaihuo
14分钟前
1
0
《孩子,你慢慢来》的读书笔记与读后感2600字

《孩子,你慢慢来》的读书笔记与读后感2600字: 龙——保护儿童的思维: 今天读《孩子,你慢慢来》龙这一节,安安的妈妈是中国人,她在安安两岁的时候就认识到安安有着固执的个性。安安正是处...

原创小博客
25分钟前
2
0
kubernetes每个节点创建一个服务的Pod

1. 问题场景 希望一个worker节点上仅部署同样的服务一个. 比如: kubernets有三个worker节点,三个节点部署N个副本的api服务, 为了提高服务效率希望加入缓存,需要为三个节点个部署一个redis服务...

jimmywa
28分钟前
5
0
搭建Git服务器

Git本身是没有服务器和客户端的区别,但是如果我们要共享git仓库时,就需要ssh、http,它们就有服务器和客户端的区别。 Windows平台下搭建Git服务器 1、在自己电脑搭建Git服务器,且只有自己...

国仔饼
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部