js之DOM元素遍历

对于元素间的空格,IE9之前的版本不会返回文本节点,而且他所有浏览器都会返回文本节点。这样就导致

使用childNodes和firstChild等属性时的行为不一致。从而有了Element Traversal API 为DOM元素添加额以下5个元素:

chaildElementCount:返回子元素(不包括文本节点和注释)的个数

firstElementChild:指向第一个子元素

lastElementChild:指向最后一个子元素

previousElementSilbing:指向前一个同辈元素

nextElementSibling:指向后一个同辈元素

下面来看一个例子:过去,要跨浏览器遍历某个元素的所有子元素,需要下面的代码:

var i,len,child = element.firstChild;

while(child!=element.lastChild){

  if(child.nodeType == 1){ //检查是不是元素类型

     ...

  }

  child = child.nextSibling;

}

而现在使用Element Traversal新增元素,可以这样:

var i,len,child = element.firstElementChild;

while(child!=element.lastElementChild){

  .....

  child = child.nextSibling;

}

原文地址:https://www.cnblogs.com/YKingcc/p/9112344.html

时间: 2024-10-07 12:42:28

js之DOM元素遍历的相关文章

Js为Dom元素绑定事件须知

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { alert('I was clicked!'); }); 上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败. 正确的做法是,等待元素加载完后再执行 $('a').click(); $('body').load('LearnClickBi

JS获取DOM元素的八种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

JS复制DOM元素文字内容

要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: 1 <html> 2 <head> 3 <title>Copy text Demo</title> 4 <script type="text/javascript" src="jquery.min.js"></script> 5 <script type="text/javascri

纯js实用DOM元素放大缩小特效插件

Zoomerang.js是一款非常实用的HTML DOM元素放大缩小js特效插件.它可以将页面上的任何元素进行放大缩小.当某个元素处于Zoomerang的监听状态时,点击该元素可以将它放大到屏幕的中间,再次点击它又会回到原来的位置. 使用注意事项: 该元素放大缩小效果依赖于CSS Transform(IE浏览器至少要IE10才能支持) 在固定尺寸的元素上效果最佳:display: block.display: inline-block和img. 避免在很长的文本段上使用. 在mobile上使用时

js操作dom元素属性和方法

1.用于处理xml文档的dom元素属性 属性名                      描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSbling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的的元素 2.用于遍历XML文档的dom元素方法 方法名        

使用Vue.js获取dom元素

标签中添加ref属性,相当于id 在Vue中通过    $refs.ref的属性名    获取或者设置dom元素 <div id="demo"> <button @click="fn">点击这里</button> <div ref="box" style="width:200px;height:300px">西南交大</div> </div> <sc

JS选取DOM元素的方法

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jquery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById)   1)使用方法:document.getElem

JS操作DOM元素

有两种方式可以修改DOM对象的属性: "."运算符 和 getAttribute(setAttribute)方法. 区别如下: Html代码 1.[div id="test" class="cls" dir="ltr" title="wott" ss="ss"][/div]  [div id="test" class="cls" dir="

Js操作DOM元素及获取浏览器高宽

在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS