DOM

在DOM中如果想访问文档中位置很深的某个节点,或者一组节点。我们可以使用下面的多种方式进行获取。
•1.document.getElementById()
•2.document.getElementsByName()
•3.document.getElementsByTagName()
•在前面的ppt中我们学习了1、3方法,第2个方法用来获取所有那么特征等于指定值的元素。注意返回的是一个数组。
•例如:
•<input type="radio" name="radColor" value="red" />Red
•<input type="radio" name="radColor" value="green" />Green
•<input type="radio" name="radColor" value="blue" />Blue
•考虑上面的一段代码,页面会询问用户喜欢哪种颜色。所有单选按钮都使用同样的名字,因为只要这个字段返回一个值即可。

若要获得所有单选按钮元素的引用可以使用下面的代码:
•varoRadios= document.getElementsByName("radColor");
•然后可以进行循环处理
•for(vari=0;i<oRadio.length;i++){....}
•这里特别注意一下:IE6在这个方法的使用上还存在一些错误。首先他们会返回id等于给定名称的元素。第二,他们仅仅检查<input/>和<img/>元素。

除了可以通过直接指定一个节点的特征来引用这个节点,还可以通过节点间的关系来引用相对节点,下面将分别做一个介绍。

childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。
•childNodes属性将返回一个数组,这个数组包含给定元素节点的全体元素。
•用法:element.childNodes
•假如想引用文档的body元素的全体元素我们可以使用getElementsByTagName()方法来得到body元素。因为每份文档只有一个body元素。所以我们使用:
•varbody_element= document.getElementByTagName("body")[0];
•现在body_element已经指向了文档的body元素。接下来,可以用如下所示的语法标记把body元素的全体元素检索出来:
•body_element.childNodes
•ps:body元素还可以使用document.body来引用。

如果想引用文档的html节点-根节点可以使用:
•document.childNodes[0];
•而<head><body>节点是<html>的子节点,可以分别用一下两条语句引用:
•document.childNodes[0].childNodes[0];//引用<head>节点
•document.childNodes[1].childNodes[1];//引用<body>节点
•DOM 除了childNodes还提供我们直接引用子节点的属性,分别是:
•element.firstChild;
•element.lastChild;
•他们分别表示第一个子结点和最后一个子结点。

html节点层次是一个树型结构,除了根节点外,每个节点都仅有一个父节点,可以由parentNode属性来引用,语法是:element.parentNode
•比如:
•<tr>
•<td id="td1">...</td>
•</tr>
•我们可以用:
•vartdNode= document.getElementById("td1");
•这样得到td节点然后使用
•vartrNode= tdNode.parentNode;
•这样就可以得到tr节点。

和引用父节点类似的,DOM提供了引用兄弟节点的属性。在html文档中属于同一个文档层次的节点称为兄弟节点。
•<trid="tr1">
•<td id="td1">...</td>
•<td id="td2">...</td>
•</tr>
•<trid="tr2">
•<td id="td3">...</td>
•<td id="td4">...</td>
•</tr>
•我们可以使用element.nextSibling;引用上一个兄弟节点。
•使用element.previousSibling;引用下一个兄弟节点。
•这里面tr1和tr2是兄弟节点td1和td2也是兄弟节点。td2和td3不是兄弟节点
•如果该节点没有相应的兄弟节点的化则属性返回null

1.nodeName属性获取节点名
•语法如下:
•Node.nodeName
•在不同的节点类型中,nodeName的返回值将有所差异。
•如果是元素节点返回标记的名称,如果是属性节点则返回属性名称。如果是文本节点则返回文本的内容

语法是:Node.nodeType;
•nodeType属性共有12种可取值,其中仅有3种具有实用价值:元素节点、属性节点和文本节点。
•元素节点的nodeType的属性值是1
•属性节点的nodeType的属性值是2
•文本节点的nodeType的属性值是3

语法:Node.nodeValue;
•不同类型的节点有不同的返回值;
•如果是元素节点返回null,属性节点返回undefined,文本节点返回文本内容。
•看下例子04

使用hasChildNodes()判断给定节点是否有子节点。
•Node.hasChildNodes();
•如果有子节点返回true,没有返回false

使用tagName获取元素节点的标记名称
•该元素是元素节点的独有属性,和nodeName具有同样的返回值,即返回标记的名称。在此就不做介绍了。


下拉列表几个常用属性用法
下拉列表是常用的对象对应<select></select>每个下拉列表中都有许多个<option>组成。下面几个例子说明几个常用属性用法。
•1)value属性
•2)length属性获取选项的个数
•3)使用option属性获取选项集合
•varoptionItem= document.getElementById("proAnalyse");
•for(vari=0;i<optionItem.length;i++){
•if(optionItem.options[i].value==proAnalyseId)
•optionItem.options[i].selected=true;
•}
•4)使用option的value属性和text属性
•<option value="apple">苹果</option>
•这里value值为“apple”,text值为“苹果”
5)使用selected属性
•如:3)中演示
•每个option对象有2个状态选中与未选中,对应selected值为true与false。
•6)使用select对象的onchange事件
•这时select对象最重要的事件
•<select name="adam" onchange="alert()">
•<option value="1" selected>1</option>
•<option value="2">2</option>
•</select>
•7)为select添加一个选项
•为增加一个选项,必须新建一个option对象。
•someSelect.options[someSelect.length]=new Option(text,value);
•比如添加4则Option("4","4")
8)从select对象中删除一个选项
•删除一个选项很简单,就是将下拉列表框指定索引的选项置为null。
•someSelect.options[1]=null;
•将索引为1的选项删除。
•9)清空select选项
•select.length=0;
•10)替换一个选项。
•就是将对应选项处新建新选项


框架的使用技巧
1.  父框架调用子框架
–window.frames[“frameName”]
–应用子框架内的子框架就可以类推:
–window.frameName.frameName
2. 子框架调用父框架
–每个window对象都有一个parent属性,表示它的父框架,可以通过window.parent来表示父框架。
3. 兄弟框架引用
–parent.frames[“brotherFrameName”]
–注意window可以省略

4. 不同层次引用
–只要得到window 属性就可以实现。所以框架中的框架可以使用window.frameName.frameName这样的叠加来调用。
5. 顶层框架引用
–window的top属性表示。
–if(self==top)//表示判断当前页面是否为顶层框架

posted on 2008-01-03 12:04  站得更高,看得更远  阅读(244)  评论(0编辑  收藏  举报