位置：首页>> 网络编程>> JavaScript>> Javascript DOM 编程实例讲解--仿LightBox效果提示框（3）

Javascript DOM 编程实例讲解--仿LightBox效果提示框（3）

作者：海啸　来源：无忧脚本　发布时间：2008-05-01 13:25:00　

标签：lightbox,dom,编程,javascript

DOM的基本操作--查找节点

好了，我们上面介绍了NodeType，那么我们要怎么才能知道某个节点（Node）的类型呢？我们可以Element.NoteType来获得节点的类型。不过你看到了，在这里我们首先要做的是获得这个Element先。

下面我们就来介绍一下几种获取节点的方法--document.getElementById(elementId)\document.getElementsByTagName(tagName)\document.getElementsByName.

docment.getElementById(elementId)方法：它返回的是以ID为表示的节点，而大家都知道id在页面中是唯一的，所以getElementById是在页面中搜索DOM节点最直接的方法，很常用。

现在就来看看我们这个提示框的代码吧（终于回到我们的实例了，差点还以为要去写一本书了，^-^）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DEMO</title> <style type="text/css">  </style> <script language="javascript" type="text/javascript">  </script> </head> <body> <input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" /> </body> </html>

我们看到：

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。还是用一段代码来看看，它是怎么工作的吧：

<ul id="newslist"> <li>First Line</li> <li>Second Line</li> <li>Third Line</li> <li>Fourth Line</li> <li>Fifth Line</li> </ul> <script language="javascript" type="text/javascript">  </script>

我们首先用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;
}

第一页上一页 1 2

4 5 下一页

投稿

Javascript DOM 编程实例讲解--仿LightBox效果提示框（3）

猜你喜欢