请参阅本文勘误表 ,表中可能包括一些规范性更正。
参见 翻译.
Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
本规范定义了 ElementTraversal 接口, 这允许DOM树元素脚本导航,但不包括DOM其他节点, 如文本节点。它还提供陈述某一元素的子元素的数目的属性, 它旨在为现有的DOM导航接口提供更方便、低执行足迹的选择。
本节描述本文档发布时状态, 其他文档可能取代本文档 。最新W3C的出版物清单, 以及本技术报告最新修订本可参见W3C技术报告索引 , 网址 http://www.w3.org/TR/.
元素遍历规范说明推荐标准制订于2008年12月22日
本文件已由W3C成员、软件开发商,以及其他的W3C组织和有关各方审阅,并由W3C理事批准为推荐标准。此为稳定的文档,可以用作参考文献或从另一个文件中引用。W3C 制定推荐标准的任务是使之受到关注,并促使其被广泛使用。这将增强Web的功能性与互操作性。
web应用程序( WebApps )工作组 编写了 测试套件 和 执行情况报告 表明本规范执行支持的现有水平,所有测试全部通过。自成为推荐标准以来,未有变化。 .
.如对本规范有问题和意见请致函 public-webapps@w3.org, 该公共电子邮件列表处理和 WebApps WG 交付有关问题, 该列表公开 存档, 第一次发文即自动要求接受归档条款。 如欲订阅此列表, 请发送电子邮件至 public-webapps-request@w3.org 在主题行中注明“订阅”。
本文由 web应用程序( WebApps )工作组 根据W3C 工作程序所定的程序制订, 该组织属 W3C 富网客户端活动。
ElementTraversal 接口最初是应 SVG, CDF, JCP, 和其他组织要求, 作为SVG 名字空间中可缩放向量图形 (SVG) 微型 1.2 规格 的一部分发表的。 它被转移到 WebAPI WG, 并作为一般设施迁移到DOM 和 DOM 名字空间, 而当WebApps WG负责WebAPI WG可交付使用时,再度转移。
本文档是由根据 2004年2月5日发布的W3C专利政策.运作的团队制定的, W3C 维护着一个与工作组交付产品有关的 已公开的专利列表 ; 页面还包括如何公开一项专利的说明。对某专利拥有实际知识并相信该专利包含了基本要求 的个人必须根据 W3C专利政策第6节的要求公开这个信息。
本节为知识篇
一级DOM Node 接口定义了11种节点类型, 但通常作者希望只用 nodeType 1, 即 Element 节点, 其他节点类型包括Document 元素和 Text 节点, 其中包括空格和换行符。DOM 1 节点遍历包括所有这些节点类型, 而这往往使作者搞乱,这就需要作者用一额外的步骤确认预计 Element 节点接口可用。 这便引入额外的性能制约因素。
ElementTraversal 是一个让作者限制 Element 节点导航接口,它使导航可从一元素导航至其第一子级元素、最后子级元素以及其下一同级元素,或前一同级元素。因为执行过程只显示元素节点,内存和DOM表述之计算足迹可以就约束装置进行优化。
一级DOMNode 接口还定义了 childNodes 属性, 这是一个该节点所有子节点实况列表; childNodes 列表中有一 length 属性,显示所有 nodeTypes子节点总数, 利于预处理操作和预先计算或用来代替子节点循环。 ElementTraversal 接口有一类似 属性 -- childElementCount, childElementCount报告Element 节点数目, 通常此类操作就求这个。
本规范不包括属性,方法和 Element 对象其他可用接口完整列表, 其他规范,特别是DOM核心规范包括了另外的接口。
本节为规范篇
本文档关键词 "必须 " (原文:MUST), "不能 "(原文:MUST NOT), "需要 " (原文:REQUIRED), "应" (原文:SHALL) "不得"(原文:SHALL NOT), "应该"(原文:SHOULD), "不应该 ",(原文:SHOULD NOT) "建议 "(原文:RECOMMEND), "可以 "(原文:MAY), and "可选" (原文:OPTIONAL) 按 RFC 2119 [RFC2119]所述来理解 。为了便于阅读,这些词条在本文中不一定区分大小写。
有时,为了便于阅读,一致性要求可表述为对元素、属性、方法、接口、性能或功能 方面的要求。在所有情况下,这些是要执行的一致性要求。本规范一致性之实现符合所有在其语言绑定范围内使用这些条款的要求。
ElementTraversal 接口本节为规范篇
ElementTraversal 接口是一套只读属性,它使作者能够方便地浏览文档内容。 在符合元素遍历一致性执行时,所有执行 Element对象也必须执行 ElementTraversal 接口。 firstElementChild, lastElementChild, previousElementSibling, 和 nextElementSibling 这四个属性, 每个均提供对定义了与当前元素关系的另一元素的活引用,如果有关的元素存在的话。第五属性, childElementCount,显示一元素的子级元素数目作导航前预处理。合适的用户代理必须执行全部五个属性。用户代理可以在其他规范执行类似的接口,但如果用户代理是专为最低代码足迹而设
计的话,则这种执行就不需要符合本规范。
不论Element 名字空间为何,接口必须在全部Element 执行。对元素遍历机制而言, 实体引用节点是不可见的; 如果转换器遇到实体引用节点,它则下行至它处而不通知原调用者,接着处理子级元素就象是它们本来就在实体节点那里一样。导航必须与名字空间无关,例如,如果在HTML名字空间元素后面跟着SVG名字空间,那么该
nextElementSiblingHTML元素属性将返回SVG元素。
firstElementChild
访问一元素的这个属性必须将该nodeType 1 元素第一子节点引用返回为 Element 对象。如果该被访问元素属性没有任何子节点,或者如果所有这些子节点都不是元素节点,
那么该属性必须返回 null。
lastElementChild访问一元素的这个属性必须将该nodeType 1 元素最后子节点引用返回为 Element 对象。如果该被访问元素属性没有任何子节点,或者如果所有这些子节点都不是元素节点,
那么该属性必须返回 null。
previousElementSibling
访问一元素的这个属性必须将按文件顺序排在该元素之前属于nodeType 1 元素同级节点引用返回为 Element 对象。如果该被访问元素属性没有任何处于它之前的同级节点,或者如果所有这些同级节点都不是元素节点,
那么该属性必须返回 null。
nextElementSibling
访问一元素的这个属性必须将按文件顺序紧跟着这个属于nodeType 1 元素同级节点引用返回为 Element 对象。如果该被访问元素属性没有任何跟在它之后的同级节点,或者如果所有这些同级节点都不是元素节点,
那么该属性必须返回 null。
childElementCount
访问一元素的这个属性必须返回这个属于nodeType 1.元素子节点当前数目, 访问此属性时,执行可能存贮该数目,或可能计算该数目,但该数目必须始终代表访问该属性时子元素节点的数目。 只有直接子节点才应该计算在内,如被访问属性元素子节点之一又有元素子节点那么
这下一级的就不算。如果属性被访问的这个元素没有子节点,或者所有这些子节点都不是元素节点,那么这个属性必须返回0 。
本节为知识篇
本节用元素遍历说明一些ECMAScript [ECMA262] 例子。
previousElementSibling例子
这个例子表明 previousElementSibling 属性的实用性。以下程序取一元素作为参数,并返回该元素按文件顺序在同一父级下的位置:
function findPosition( el ) {
var pos = 0;
// 逆序循环各子元素
while ( null != el ) {
// 导航到上一同级元素
el = el.previousElementSibling;
pos++;
}
return pos;
}
这个例子表明childElementCount 属性的实用性。以下程序取一元素作为参数, 并根据可用空间把每个子级元素等距放好
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;
}
}
这个例子将 ElementTraversal 与其他的DOM接口对比, 下面的脚本显示就以下SVG的片段,以不同的方法遍历一个DOM树:
<g id='shapeGroup'>
<rect id='rect1' x='5' y='5' width='310' height='220' rx='15' ry='15' fill='skyblue'/>
<rect id='rect2' x='15' y='15' width='210' height='180' rx='15' ry='15' fill='cornflowerblue'/>
<ellipse id='ellipse1' cx='90' cy='70' rx='50' ry='30' fill='yellow' stroke='orange'/>
<path id='path1' stroke-width='15' stroke='orange' fill='none' stroke-linecap='round'
d='M25,150 C180,180 290,0 400,140 S420,100 460,90'/>
<text id='text1' x='0' y='0' font-size='35' fill='yellow' stroke='orange'
stroke-width='2' stroke-linejoin='round' font-weight='bold'>
<textPath id='textPath1' xlink:href="#path1">when life gives you lemons...</textPath></text>
</g>
function walkTest( el ) {
// 求所有节点总数
var nodeCount = el.childNodes.length;
// 求第一个子节点
var firstNode = el.firstChild;
// 求第一个子元素
var childEl = el.firstElementChild;
// 逐一循环各子元素
while ( childEl ) {
// 这里做一些有用的事......
// 然后导航到下一个子元素
childEl = childEl.nextElementSibling;
}
}
el 相当于 'id' 为 "shapeGroup"的'g' 元素, nodeCount 的值为 11. firstNode 为text 节点 (nodeType 3), 它不等于childEl的赋值, 那是 element 节点 (nodeType 1) 其 'id' 为"rect1" 。 while 循环将再循环4次, 遍历同级element 节点, 分别是 "rect2", "ellipse1", "path1", 和 "text1", childEl最后值将为 null, 因为 "text1" 没有下一个元素同级, 虽然它有下一个节点同级。
注意 SVG 'text'元素与 Text 节点不同。迭代不包括 'text' 元素的 SVG 'textPath' 子元素, 因为它与 childEl不同级 。
本节为知识篇
本规范提供了一个接口, 它与DOM 1核心的DOM导航属性与功能相似, 但只对元素节点操作, 对其他节点类型不操作。最具可比性的DOM 1核心属性为firstChild, lastChild, previousSibling, nextSibling, 和 nodeList.length.
二级文档对象模型Traversal & Range是非常全面的文档导航规范, 但可能比元素遍历需要更多设备和设备资源。 由于元素遍历是一个二级DOM Traversal 功能的优化子集 ,一个实现两种遍历的用户代理可以这么做以利用遍历的功能。
这是 DOM 3 Core补充规范。
interface ElementTraversal
{
readonly attribute Element firstElementChild;
readonly attribute Element lastElementChild;
readonly attribute Element previousElementSibling;
readonly attribute Element nextElementSibling;
readonly attribute unsigned long childElementCount;
};
firstElementChild null。 lastElementChild null。 previousElementSibling null。nextElementSibling null。 childElementCount nodeType 1子节点, 返回0。ElementElementTraversal 接口的用户代理而言, Element 拥有在其他的DOM规范中所定义 Node 与 Element所有的属性与方法, 此外,还拥有以下属性:firstElementChildElement类型.lastElementChildElement类型.previousElementSiblingElement类型.nextElementSiblingElement类型.childElementCountNumber类型.
package org.w3c.dom;
public interface ElementTraversal
{
Element getFirstElementChild();
Element getLastElementChild();
Element getPreviousElementSibling();
Element getNextElementSibling();
int getChildElementCount();
}
ElementTraversal interface in SVG.以下人员为本规范做出了贡献,编辑在此特别鸣谢:
David Andersson, Robin Berjon, Jean-Yves Bitterlich, Sergiu Dumitriu, Daniel Glazman, Bjoern Hoehrmann, Kurosawa Takeshi, Chris Lilley, Charles McCathieNevile, Cameron McCormack, Simon Pieters, Nandini Ramani, Jonas Sicking, Andrew Sledd, Josh Soref, Anne van Kesteren, Boris Zbarsky, Mohamed Zergaoui
此外,编辑还要向SVG工作组致谢,是他们制订了SVG草案 [SVGD] 而本规范原本基于该草案。
This translation is hosted at Arthritis