关于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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python numpy元素的区间查找方法
2018/11/14 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
历史学专业推荐信
2013/11/06 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
天坛导游词
2015/02/02 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js