关于firefox的ElementTraversal 接口 使用说明


Posted in Javascript onNovember 11, 2010

firstElementChild
访问一元素的这个属性必须将该nodeType 1 元素第一子节点引用返回为 Element 对象。如果该被访问元素属性没有任何子节点,或者如果所有这些子节点都不是元素节点, 那么该属性必须返回 null。
lastElementChild
访问一元素的这个属性必须将该nodeType 1 元素最后子节点引用返回为 Element 对象。如果该被访问元素属性没有任何子节点,或者如果所有这些子节点都不是元素节点, 那么该属性必须返回 null。
previousElementSibling
访问一元素的这个属性必须将按文件顺序排在该元素之前属于nodeType 1 元素同级节点引用返回为 Element 对象。如果该被访问元素属性没有任何处于它之前的同级节点,或者如果所有这些同级节点都不是元素节点, 那么该属性必须返回 null。
nextElementSibling
访问一元素的这个属性必须将按文件顺序紧跟着这个属于nodeType 1 元素同级节点引用返回为 Element 对象。如果该被访问元素属性没有任何跟在它之后的同级节点,或者如果所有这些同级节点都不是元素节点, 那么该属性必须返回 null。
childElementCount
访问一元素的这个属性必须返回这个属于nodeType 1.元素子节点当前数目, 访问此属性时,执行可能存贮该数目,或可能计算该数目,但该数目必须始终代表访问该属性时子元素节点的数目。 只有直接子节点才应该计算在内,如被访问属性元素子节点之一又有元素子节点那么 这下一级的就不算。如果属性被访问的这个元素没有子节点,或者所有这些子节点都不是元素节点,那么这个属性必须返回0 。

function spaceChildren( el ) { 
// 求元素节点数目 
var elCount = el.childElementCount; var eachWidth = window.innerWidth / (elCount + 1); 
// 求第一子元素 
var childEl = el.firstElementChild; 
// 设置初始位置 
var nextPos = eachWidth/2; 
// 逐一循环子元素 
while ( childEl ) { 
// 放好子元素 
childEl.style.setProperty( 'position', 'absolute', '' ); 
childEl.style.setProperty( 'left', nextPos + 'px', '' ); 
childEl.style.setProperty( 'width', eachWidth + 'px', '' ); 
// 按宽度增距 
nextPos += eachWidth; 
// 然后导航到下一个子元素 
childEl = childEl.nextElementSibling; 
} 
}
Javascript 相关文章推荐
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
将string解析为json的几种方式小结
Nov 11 #Javascript
js读取本地excel文档数据的代码
Nov 11 #Javascript
JS维吉尼亚密码算法实现代码
Nov 09 #Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 #Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 #Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 #Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
python的Template使用指南
2014/09/11 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python 爬虫请求模块requests详解
2020/12/04 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
中班幼儿评语大全
2014/04/30 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
人力资源部岗位职责
2015/02/11 职场文书
工作简报格式范文
2015/07/21 职场文书
公司新员工欢迎词
2015/09/30 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android