关于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面向对象继承方法经典实现
Aug 20 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
将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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
客户端静态页面玩分页
2006/06/26 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
高中课前三分钟演讲稿
2014/08/18 职场文书
导游词怎么写
2015/02/04 职场文书
2016年记者节感言
2015/12/08 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
浅谈Python基础之列表那些事儿
2021/05/11 Python