关于DOM元素

DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样。可以使用任何脚本语言来访问DOM,这要归功于其一致的API。

DOM元素的属性:

childNodes:返回当前元素所有的子元素的数组

firstChild:返回当前元素的第一个下级子元素

lastChild:返回当前元素的最后一个子元素

nextSibling:返回紧跟在当前元素后面的元素

nodeValue:指定表示元素值的读/写属性

parentNode:返回元素的父节点

previousibling:返回紧邻当前元素之前的元素

DOM元素的方法:

getElementById(id):获取指定惟一ID属性值文档中的元素

getElementsByTagName(name):返回妆前元素中有指定标记名的子元素的数组

hasChildNodes():返回一个布尔值,指示元素是否有子元素

getAttribute(name):返回元素的属性值,属性由name指定

下面是一个例子:jsp代码如下:

<head>
 <script language="javascript" type="text/javascript">
 var XMLrequest = false;
 var requsettype;
 try {
  request = new XMLHttpRequest();
 } catch (trymicrosoft) {
  try {
   XMLrequest = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
   try {
    XMLrequest = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (failed) {
    XMLrequest = false;
   }
  }
 }
 if (!XMLrequest){
  alert("Error initializing XMLHttpRequest!");
 }
 function startrequest(requestedList) {
  requsettype = requestedList;
    var url = "response.xml";
    // Open a connection to the server
    XMLrequest.open("GET", url, true);
    // Setup a function for the server to run when it's done
    XMLrequest.onreadystatechange = updatePage;
    // Send the request
    XMLrequest.send(null);
  }
 function updatePage() {
    if (XMLrequest.readyState == 4) {
     if(requsettype=="north"){
      listNorthStates();
      }
     else if(requsettype=="all"){
     listAllStates();
      }
      }
  }
 function listNorthStates(){
   var xmlDoc = XMLrequest.responseXML;
   var northNode = xmlDoc.getElementsByTagName("north")[0];
   var out = "Northern States";
   var northStates = northNode.getElementsByTagName("state");
   outputList("Northern States",northStates);
  }
 function listAllStates(){
  var xmlDoc = XMLrequest.responseXML;
  var allStates = xmlDoc.getElementsByTagName("state");
  outputList("All States in Document",allStates);
 }
 function outputList(title,states){
   var out = title;
   var currentState = null;
   for(var i=0;i<states.length;i++){
     currentState = states[i];
     out = out+"\n-"+currentState.childNodes[0].nodeValue;
    }
   alert(out);
  }
</script>
 </head>
 <body>
  <button onClick="startrequest('all');">click me show all xml</button>
  <button onClick="startrequest('north');">click me show north xml</button>
 </body>

xml文件代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<states>
 <north>
  <state>a</state>
  <state>b</state>
  <state>c</state>
 </north>
 <south>
  <state>d</state>
  <state>e</state>
  <state>f</state>
 </south>
 <east>
  <state>g</state>
  <state>h</state>
  <state>i</state>
 </east>
 <west>
  <state>j</state>
  <state>k</state>
  <state>l</state>
 </west>
</states>

这是我对DOM的学习,望大家给出意见

posted @ 2011-05-31 21:19  zalexing  阅读(907)  评论(2编辑  收藏  举报