《HTML教程》_6.6-6.7教学材料.pptxVIP

6.6.1获取节点的基本信息在实际编程中，有时需要获得某个节点的一些信息，如该节点是什么类型的节点，节点的值是什么，它有什么属性，属性值是什么。

下面通过对文档中a标记的分析来演示获取节点基本信息的用法。用于分析的a标记如下：aid=mylinkhref=Listing6-1.htmlMylink/a通过以上代码可以看出它有一个文本节点（Mylink），两个属性节点id和href。分析a标记的代码如清单6-2所示。

要分析a标记需要在文档中找到它，这需要用到节点的引用知识（见6.3节），观察要解析的a标记，发现它有一个值为mylink的id属性，所以选择getElementById()来获取这个a标记元素。

查找到a标记节点后保存在变量a（变量名可以变化，不一定与标记名相同）中，以备后续使用，代码如下：vara=document.getElementById(mylink);要找到a标记节点的所有孩子，首先应该想到childNodes属性（表6-2），它代表元素的所有孩子节点的数组。

找到a标记节点的所有孩子并保存在aChilds数组中，代码如下：varaChilds=a.childNodes;得到所有孩子节点的数组后，就可以通过遍历这个数组，分析所有孩子节点了。要遍历某个元素的所有孩子节点需要用到循环，在每次循环中，通过nodeType判断孩子节点的类型，通过nodeName获取节点的名称，通过nodeValue读取孩子节点的值。

根据表6-1我们感兴趣的类型有3种分别是元素的nodeType值为1，属性的nodeType为2，文本的nodeType为3，其余的节点类型通常不予以处理。实际应用中多数情况下，只需要处理这三种类型的节点就可以了。处理每个孩子节点的孩子代码如下：

for(vari=0;iaChilds.length;i++){ //获得节点名称 varnodeDetail=节点名称：+aChilds[i].nodeName+,节点类型：; //获取节点的类型 vartype=aChilds[i].nodeType; if(type===1){ nodeDetail+=标记记节点; }elseif(type==2){

nodeDetail+=属性节点; }elseif(type==3){ nodeDetail+=文本节点; } //获取节点内容 nodeDetail+=,节点的值：+aChilds[i].nodeValue; out(nodeDetail); }

写到这里是不是就完成了呢？可以运行一下观察一下结果（完整的示例见Listing6-2.html，观察结果只需要在浏览器中打开Listing6-2.html，点“超链接详细信息”按钮即可。），运行结果如下：节点名称：#text,节点类型：文本节点,节点的值：Mylink

可以看到这里只输出了a标记的文本子节点Mylink，却没有输出两个属性子节点，虽然文本节点和属性节点都是a标记的孩子节点，但获取/访问这两种孩子的方法是不同的。访问元素（或标记）子节点使用childNodes属性（见表6-2），而访问属性子节点则要使用attributes属性（见表6-2）。

attributes属性保存了元素的所有属性的NodeMap，遍历NodeMap与遍历节点的数组是不同的，代码如下：//获取所有的属性节点varaAttrs=a.attributes;for(varj=0;jaAttrs.length;j++){ varattr=aAttrs.item(j);

varattrDetail=属性名：+attr.nodeName+,属性值：+attr.nodeValue; out(attrDetail);}首先，通过a标记的attributes属性获取它的所有属性子节点的NodeMap，并保存在变量aAttrs中，然后遍历这个NodeMap。

虽然遍历NodeMap与数组十分相似，但还是不同的，访问数据可以通过aAttrs[j]的形式，而对于NodeMap则需要通过item(j)函数获取第j个元素。而且属性节点比较简单，只有属性名和属性值的概念而没有类型的概念，所以输出时只输出属性名和属性值就可以了。

亲爱的读者你学会了吗？为了检验你的学习效果，请你根据清单6-2的内容，自行选择一个标记，分析一下它的节点组成（有哪些孩子，各是什么类型）吧。好了，这作为练习留给读者巩固学习成果吧。下面再介绍一个节点添加删除和修改的例子。

6.6.2节点的添加删除与修改

这