文档章节

常用的 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
【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
React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit
05/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式:简单工厂模式(静态共产方法模式)

简单工厂的构成包括三个角色: 1)抽象产品类 2)具体产品类(继承抽闲产品类) 3)工厂类(生产具体产品) 具体代码实现 1、抽象产品类 /** * 抽象类 */public abstract class Car ...

京一
7分钟前
0
0
Lombok使用

1 介绍 Lombok是一个简单的Java库,改工具可以通过注解自动地提供一些方法,简化开发。比如编写POJO时需要为每个属性提供getter()方法和setter()方法,这就可以使用Lombok实现。 2 配置 Lomb...

SuperHeroes
15分钟前
0
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
17分钟前
0
0
java虚拟机之内存模型

1. 概述 对于从事 C、C++ 程序开发的人员来说,在内存管理领域,他们既是拥有最高权力的「皇帝」又是从事基础工作的「劳动人民」 --- 既拥有每个对象的「所有权」,又担负着每一个对象生命开...

firepation
20分钟前
0
0
解决linux的-bash: ./xx: Permission denied

解决linux的-bash: ./xx: Permission denied 在linux下执行sh文件时提示下面信息: -bash: ./xx.sh: Permission denied解决:chmod 777 xx.sh 1 2 3 4 Linux chmod +755和chmod +777 ......

DemonsI
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部