文档章节

常用的 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
​基于 WKWebview 进行二次封装的 WebView - KSWebView

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

kinsunlu
08/30
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
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx/Apache/PHP Hidden Version Number

nginx隐藏版本号的方法 在nginx配置文件nginx.conf中,加入以下代码: server_tokens off; apache隐藏版本号的方法 在apache配置文件httpd.conf中,加入以下代码: ServerTokens ProdServer...

Linux就该这么学
5分钟前
1
0
iOS 滚动视图 UIScrollView 代理方法 相关属性 状态栏 滚动条 回弹 弹簧效果

iOS 滚动视图 UIScrollView 代理方法 相关属性 状态栏 滚动条 回弹 弹簧效果 #import "ViewController.h"@interface ViewController () <span style="color:#ff0000;"><UIScrollViewDel......

壹峰
11分钟前
0
0
【转】Hive 工作原理详解

什么是Hive? Hive是建立在 Hadoop 上的数据仓库基础构架。它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储、查询和分析存储在 Hadoop 中的大规模数据的机制。...

hnairdb
11分钟前
1
0
开源 java CMS - FreeCMS2.8 微信管理 公众号设置

项目地址:http://www.freeteam.cn/ 公众号设置 管理员可以在这里设置微信公众号的相关配置,每个站点都可设置自己的微信公众号。 其中接口URL需要配置在微信公众号中,如下图所示 App Key ...

freeteam
13分钟前
1
0
MySQL中 replace 函数应用

将以下字段中的【忻州】替换为【洛阳】 Sql语句如下 UPDATE sys_organization SET org_name = REPLACE(org_name,'忻州','洛阳'); 执行结果如下...

karma123
16分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部