《HTML教程》-6.6-6.7教学材料

6.6.1获取节点的基本信息在实际编程中，有时需要获得某个节点的一些信息，如该节点是什么类型的节点，节点的值是什么，它有什么属性，属性值是什么。下面通过对文档中<a>标记的分析来演示获取节点基本信息的用法。用于分析的<a>标记如下：<aid="mylink"href="Listing6-1.html">Mylink</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;i<aChilds.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;j<aAttrs.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节点的添加删除与修改

这个例子主要实现添加复选框、删除复选框、全选和反选复选框，效果如图6-3所示。图6-3节点操作实例界面实现图6-3界面的HTML文档结构如下所示。<p>

你的爱好： <inputtype="checkbox"name="favor"value="Guzheng"/>琴 <inputtype="checkbox"name="favor"value="chess"/>棋 <inputtype="checkbox"name="favor"value="calligraphy"/>书<inputtype="checkbox"name="favor"value="painting"/>画</p>所有复选框都在一个p元素中，也就是说所有复选框都是p元素的子节点，p元素是所有复选框的容器。首先，先来实现添加节点的功能。如果添加复选框节点呢？首先要创建一个input元素节点，可以使用createElement()函数；然后添加type属性、name属性和value属性，可以使用setAttribute()函数，再添加一个文本节点——可以使用createTextNode()函数——就可以了；最后要做就是把创建好的input元素和文本节点添加到p容器中，使用appendChild()函数就可以了。实现代码如下：//添加节点functionaddNode(){ //第1步：创建input元素节点 varinput=document.createElement('input'); //第2步：设置type属性input.setAttribute("type","checkbox"); //第3步：设置name属性 input.setAttribute("name","favor"); //第4步：设置value属性 input.setAttribute("value","jiaozi"); //第5步：把创建好的input元素添加到p容器中varp=document.getElementsByTagName('p')[0]; //将新创建的input节点添加到p容器的末尾 p.appendChild(input); //第6步：创建input元素的提示文本 varjiaozi=document.createTextNode("饺子"); //第7步：将文本节点添加到p容器中 p.appendChild(jiaozi);}第二，实现删除节点的功能。为了减化节点操作，我们只删除最后的复选框。一个复选框包括两部分：一个input元素，另一个是提示文本。要删除一个复选框需要先删除提示文本，再删除input元素才算完成任务。删除节点需要父节点调用removeChild()函数，所以先要获取p容器节点，然后调用p节点的removeChild()。要删除的节点每次都是p的最后一个孩子，可以用p.lastChild表示，删除节点的代码如下：//删除最后一个复选框functiondelLast(){//获取复选框的容器p varp=document.getElementsByTagName('p')[0]; //删除最后一个复选框的文本 p.removeChild(p.lastChild); //删除最后一个复选框的input元素 p.removeChild(p.lastChild);}第三，实现节点的全选和反选。要实现选择复选框只需要在复选框的input元素中添加“checked”属性即可，添加checked属性后的HTML代码如下所示：<inputtype="checkbox"name="favor"value="Guzheng"checked="checked"/>添加checked属性可以使用setAttribute()函数。实现复选框的反选，只需要删除复选框input元素的checked属性即可，这可使用removeAttribute()函数。实现复选框全选的代码如下：//全选复选框functioncheckedAll(){ //获取所有复选框 varfavors=document.getElementsByName('favor'); for(vari=0;i<favors.length;i++){ //将当前复选框置为非选中状态 favors[i].setAttribute("checked","checked"); }}实现复选框反选的代码如下：//反选复选框functionuncheckedAll(){ //获取所有复选框 varfavors=document.getElementsByName('favor'); for(vari=0;i<favors.length;i++){ //将当前复选框置为非选中状态 favors[i].removeAttribute("checked"); }}第四，这个实例中还有一个功能，那就是图6-3中“全选”按钮，单击一下会选择所有的复选框（调用checkedAll()函数），然后变为“反选”按钮。再单击一下“反选”按钮，则取消所有选中的复选框（调用uncheckedAll()函数），并重新变为“全选”按钮。实例中按钮的HTML代码如下：<buttononclick="checkToggle()">全选</button>“全选”是<button>的孩子节点，而且只有一个孩子（元素节点，另一个孩子为属性节点）节点，所以“全选”是<button>第一个孩子的nodeValue，读取“全选”的代码如下：varsrcTxt=src.firstChild.nodeValue;其中src是触发单击事件（事件处理第7章介绍）的元素节点，这里是<button>元素。设置“反选”的代码如下：src.firstChild.nodeValue='反选';实现这个功能的完整代码如下：//全选/反选复选框functioncheckToggle(e){varevt=window.event||e; varsrc=evt.target||evt.srcElement; varsrcTxt=src.firstChild.nodeValue; if(srcTxt=='全选'){ checkedAll(); src.firstChild.nodeValue='反选'; }else{ uncheckedAll(); src.firstChild.nodeValue='全选'; }}这个函数中前2条语句是获取事件对象，从事件对象获取事件源，关于事件处理的内容将在下一章介绍。节点操作的完整代码如清单6-3所示。完整的代码见Listing6-3.html。开始学习清单中的代码之前，可以先打开Listing6-3.html观察一下实际效果，为代码学习增加直观性，也可以观察这些效果是如何用代码实现的，在学习中不断积累才能做到学以致用。6.6.3控制元素样式6.5节介绍了JavaScript如何控制元素的样式，现在通过一个实际的例子来说明一下这些知识的用法。这个例子通过代码方式控制div的大小、边框、背景和字体的样式。运行效果如图6-4所示。图6-4控制元素样式的实例运行效果要操作的div的html代码如下：<divid="mybox">MyBox</div>获取div元素节点的代码如下所示：vardiv=document.getElementById("mybox");由于下面的操作都需要先获取这个要进行操作的div，所以就在这里列出，不在下面的说明中重复了。（1）设置div的大小设置div的大小通过对style的cssText进行赋值来实现，代码如下：div.style.cssText='width:450px;height:350px;';（2）设置边框设置边框通过调用style的setProperty()函数来实现，代码如下：div.style.setProperty('border','3pxsolidred');（3）设置背景

设置背景通过调用节点的setAttribute()函数，为div设置class属性来实现。代码如下：div.setAttribute("class","mybg");注意，此时是对div应用了mybg类别选择器，所以必须先定义这个CSS的类别选择器，在这个例子中，通过内部CSS样式表定义了mybg类别选择器，代码如下：.mybg{ background-color:yellow;}（4）设置字体

设置字体通过对div元素的className属性进行赋值来实现。它的实质与调用setAttribute()函数设置元素的class属性是一样的，所以首先也必须声明要使用的类别选择器。代码如下：div.className='myfont';同样，在这个例子中的内部样式表中定义了myfont类别选择器。代码如下：.myfont{ font:italicbold36px幼圆;}关于字体font的设置，从左到右必须依次是