Javascript DOM 编程实例讲解--仿LightBox效果提示框(3)
作者:海啸 来源:无忧脚本 时间:2008-05-01 13:25:00
DOM的基本操作--查找节点
好了,我们上面介绍了NodeType,那么我们要怎么才能知道某个节点(Node)的类型呢?我们可以Element.NoteType来获得节点的类型。不过你看到了,在这里我们首先要做的是获得这个Element先。
下面我们就来介绍一下几种获取节点的方法--document.getElementById(elementId)\document.getElementsByTagName(tagName)\document.getElementsByName.
docment.getElementById(elementId)方法:它返回的是以ID为表示的节点,而大家都知道id在页面中是唯一的,所以getElementById是在页面中搜索DOM节点最直接的方法,很常用。
现在就来看看我们这个提示框的代码吧(终于回到我们的实例了,差点还以为要去写一本书了,^-^):
我们看到:
var btnShow = document.getElementById("btnshow");
if(!btnShow) return false;
btnShow.disabled=true;
我们就通过document.getElementById("btnshow")获得了“显示信息层”这个节点,呵呵,再让我们回到上面的nodetype,我们用NodeType方法来看看这个节点是什么类型吧,我们要这么写:
/*****
IE浏览器要7.0 才支持nodeType属性,所以我上面才给出了那段枚举所
有节点类型的代码,以方便在低版本的IE浏览器中判断节点类型。
*****/
alert(btnShow.nodeType);
看看我们得到了什么?
图三
1,对照上面给的nodetype的代码:1代表Element Node。当然按钮是个元素节点。再来验证下上面提到的在文档中的关系吧:parent(父)、child(子)、sibling(兄弟)
怎么查询节点的父节点,我们使用element.parentNode来获得父节点,看看这个代码
alert(btnShow.parentNode.tagName);
看看我们又得到了什么?
图四
BODY!呵呵,对啊这个按钮的父亲节点就是body,看看我们的代码就知道了:
<body>
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
</body>
那么我们来看看这个按钮有没有子节点呢,我们使用element.hasChildNodes()方法来判断它是否有子节点。代码我们这么写:
alert(btnShow.hasChildNodes());
图五
false,当然是false,因为按纽是没有子节点的。
接着我们再来查找下他的兄弟节点吧,我们使用element.nextSibling()方法来获得兄弟(邻居)节点,而我们这里的代码这么写:
alert(btnShow.nextSibling.nodeType);
图六
3?什么意思?呵呵,说明下我的这个图是在firefox中获取的,在firefox中会把换行的空格作为一个textNode处理,所以btnShow.nextSibling.nodeType我们获得节点类型就是3了。所以要做兼容Firefox的DOM编程开发时,要调用nextSibling方法时,在写XHTML代码时,有时候是需要在同一样写两个兄弟节点的,代码如下:
// ul作为btnShow的兄弟节点,需要紧接在<input />标签后写
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" /><ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
讲到现在,我们所接触的这些方法都是获取单个的节点,那么怎样获取一组节点呢?现在就要隆重介推出document.getElementsByTagName()。
getElementsByTagName:(核心[XML]DOM)用来返回一个包含所有tagName(标签名)特性等于某个指定值的元素的NodeList。还是用一段代码来看看,它是怎么工作的吧:
我们首先用getElementById找到id为newslist的节点(UL),然后用getElementsByTagName("li")就获得了UL下的全部LI元素Lines了。我们看到了,Lines是一个数组,我们就可以通过一个循环来获得每一个li的内容。这个也是我们使用getElementsByTagName的一个很常用的方法。
怎么样?现在知道怎么查找一个节点了、怎么获取一组元素、如何判断一个节点的类型、怎么查找一个节点的parentNode(父节点)、判断节点是否有子节点和怎么来获得节点的下一个兄弟节点。那现在我们就运用刚才学习的东西,对节点的操作做个扩展,看看下面的代码:
// 获取el节点内tag标签样式为name样式索引为size的DOM节点
function getElByClassName(tag,name,size,el){
if(!document.getElementsByTagName) return false;
var el=(el)?el:document;
var itm=el.getElementsByTagName(tag);
var num=1;
for(i=0;i<itm.length;i++){
if(itm[i].className===name&&size===num){
return itm[i];
}
else if(itm[i].className===name){
num++;
}
}
return false;
}