关于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基础的动画教程,直观易懂
Jan 10 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
详解vue axios中文文档
Sep 12 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
关于Vue中的options选项
Mar 22 Vue.js
将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中使用redis队列操作实例代码
2013/02/07 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
Display SQL Server Version Information
2007/06/21 Javascript
javascript prototype 原型链
2009/03/12 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
深入理解python中的atexit模块
2017/03/07 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python实现图片九宫格分割
2021/03/07 Python
django修改models重建数据库的操作
2020/03/31 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
一道SQL存储过程面试题
2016/10/07 面试题
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
2014年学生会干事工作总结
2014/11/07 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
java版 简单三子棋游戏
2022/05/04 Java/Android