扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关JavaScript 中怎么利用DOM实现文档遍历,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联是一家专注于成都网站建设、成都做网站与策划设计,雅安网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:雅安等地区。雅安做网站价格咨询:18982081108
访问元素,你应该明白它是该文件的document元素,那你就可以使用document的documentElement属性:
var oHtml=document.documentElement;//可以直接访问元素 alert("节点名称 : "+oHtml.nodeName);//节点名称 alert("节点类型 : "+oHtml.nodeType);//节点类型为 1
获取
和 元素:var oHead=oHtml.firstChild;//HEAD节点 var oBody=oHtml.lastChild;//BODY节点
也可以通过childNodes属性,获取
和 元素:var oHead=oHtml.childNodes.item(0);//HEAD节点 //var oHead=oHtml.childNodes[0];//简写,也有同样的结果是HEAD节点 var oBody=oHtml.childNodes.item(1);//BODY节点 //var oBody=oHtml.childNodes.item(1);//简写,也有同样的结果是BODY节点
注意:方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法:HTML DOM 中的专有属性 document.body ,它常用于直接访问元素:
var oBody=document.body;
既然我们都知道了以上节点对象的获取方式,那我们用oHtml,oHead,oBody 这三个变量来确定一下它们之间的关系:
alert(oHead.parentNode==oHtml);//HEAD节点的父节点是BODY节点,返回 true alert(oBody.parentNode==oHtml);//BODY节点的父节点是BODY节点,返回 true alert(oBody.previousSibling==oHead);//BODY节点的上一个兄弟节点是HEAD节点 ,返回 true alert(oHead.nextSibling==oBody);//HEAD节点的下一个兄弟节点是BODY节点,返回 true alert(oHead.ownerDocument==document); //返回一个节点的根元素(Document),HEAD节点是否指向该文档,返回 true
通过上面的学习我们已经了解遍历节点的最基本的方式, 也学会了如何找到某一个节点的兄弟节点及它的子节点。
复杂的节点遍历
在上面的学习中我们好像没有遇到过大的阻碍,下面我们以一个“导航条”为实例:
首先我想把看一下我的导航条下有多少个子节点。我***想到的是前面我学过的查找元素的2种方法:
◆getElementById() # 通过ID属性查找元素
该方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。
◆getElementsByTagName() # 通过标签名称查找元素
该方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。
节点遍历
那我们接下来,测一下是否是我们想要的东西:
先看一下***个方法queryElementsId()好像我们在IE中没有发现有什么问题,那我们在Firefox中看一下是否也是我们想要的结果。
这时,问题出现了,不同的浏览器在判断何为Text节点上存在着一些差异,例如在A级浏览器中的FF和IE就有很大的差异,FireFox会把元素之间的空白、换行、tab都是Text节点,IE下会把空白全部忽略掉,只有内联元素(如em,span)后的换行、空格、tab会被认为是一个Text。既然遇到了问题那我们就得解决问题,问题的根源我们也知道了,那相应的解决方案就好做了。
方法一:
方法二:
方法三:推荐
好了,我们在验证一下,#Text节点问题是否处理掉了。那我们就用方法3 中removeWhitespace(nav)方法来处理queryElementsId()方法中的#Text节点问题。
正如看到的结果,IE和FireFox中都没有问题了。
一个比较通用的方法:
用元素节点的DOM属性遍历DOM树
写到这里,既然标准的previousSibling,nextSibling,firstChild,lastChild,parentNode遍历方法有浏览器不兼容问题。我上面的解决方案是去掉遍历元素的相关空的#Text节点,是一个好的解决方案,但是使用起来不方便,我们何不自己写一些遍历节点的方法来代替标准的的previousSibling,nextSibling,firstChild,lastChild,parentNode。
我们的思路是利用元素是nodeType属性来判断元素是节点类型中那种节点类型,在DOM节点中我最常用的是元素节点,文本节点,属性节点,对应的类型值是元素节点nodeType=1 or ELEMENT_NODE, 文本节点 nodeType=2 or ATTRIBUTE_NODE,属性节点 nodeType=3 or TEXT_NODE,但是IE中并不支持命名常量,那就用数值吧,再配合标准的遍历属性。完全可以自己生产一些辅助函数来取代标准的遍历方式。以下一系列的辅助函数可以帮助您,他们能取代标准的previousSibling,nextSibling,firstChild,lastChild,parentNode;
以上就是JavaScript 中怎么利用DOM实现文档遍历,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流