关闭

AJAX基础教程——学习笔记(三)

232人阅读 评论(0) 收藏 举报

使用W3C DOM动态编辑页面的属性和方法(p46)

document.createElement(tagName):  文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会生成一个div元素

 

document.createTextNode(text):  文档对象的createTextNode方法会创建一个包含静态文本的节点

 

<element>.appendChild(childNode):  将指定的节点增加到当前元素的子节点列表(作为一个新的子节点)。例如,可以增加一个option元素,作为select元素的子节点

 

<element>.getAttribute(name): 

<element>.setAttribute(name, value):  获得和设置元素中name属性的值

 

<element>.insertBefore(newNode, targetNode):  将节点newNode作为当前元素的子节点插到targetNode元素前面

 

<element>.removeAttribute(name):  从元素中删除属性name

 

<element>.removeChild(childNode):  从元素中删除子元素childNode

 

<element>.replaceChild(newNode, oldNode):  将节点oldNode替换为节点newNode

 

<element>.hasChildnodes():  返回一个布尔值,指示元素是否有子元素

 

 

 

使用W3C DOM动态编辑页面

dynamicContent.xml

<?xml version="1.0" encoding="UTF-8"?>

<propertys>

  <property>

    <address>812 Gwyn Ave</address>

    <price>100000</price>

    <comments>Quiet,serene neighbordood</comments>

  </property>

  <property>

    <address>3308 James Ave s</address>

    <price>110000</price>

    <comments>Close to schools,shopping,entertainment</comments>

  </property>

  <property>

    <address>98320 County Rd 113</address>

    <price>115000</price>

    <comments>Small acreage outside of town</comments>

  </property>

</propertys>

 

dynamicContent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>dynamicContent.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

   

    <script type="text/javascript">

    <!--

      var xmlHttp;

     

      function createXMLHttpRequest() {

        if (window.ActiveXObject) {

          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        } else if (window.XMLHttpRequest) {

          xmlHttp = new XMLHttpRequest();

        }

      }

     

      function doSearch() {

        createXMLHttpRequest();

        xmlHttp.onreadystatechange = handleStateChange;

        xmlHttp.open("GET","dynamicContent.xml",true);

        xmlHttp.send(null);

      }

     

      function handleStateChange() {

        if (xmlHttp.readyState == 4) {

          if (xmlHttp.status == 200) {

            clearPreviousResults();

            parseResults();

          }

        }

      }

     

      //删除标题文本和结果表中的内容

      function clearPreviousResults() {

        var header = document.getElementById("header");    //得到IDheader的元素

        if (header.hasChildNodes()) {              //删除span元素的第一个(也是唯一的)子节点

          header.removeChild(header.childNodes[0]);

        }

       

        var tableBody = document.getElementById("resultsBody");

        while (tableBody.childNodes.length > 0) {      //tbody节点还有子节点(tr元素)

          tableBody.removeChild(tableBody.childNodes[0]);    //则删除第一个字子节点,直到再没有子节点为止

        }

      }

     

      function parseResults() {

        var results = xmlHttp.responseXML;

       

        var property = null;

        var address = "";

        var price = "";

        var comments = "";

       

        var minPrice = document.all.minPrice.value;

        var maxPrice = document.all.maxPrice.value;

       

        var properties = results.getElementsByTagName("property");  //获得XML文档中所有property元素的数组

        for (var i=0; i<properties.length; i++) {     //获得propertyaddresspricecomments里的文本内容

          property = properties[i];

          address = property.getElementsByTagName("address")[0].firstChild.nodeValue;

          price = property.getElementsByTagName("price")[0].firstChild.nodeValue;

          comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;

         

          if (price!=minPrice && price<=maxPrice) {

            addTableRow(address, price, comments);

          }

        }

       

        var header = document.createElement("h2");     //创建一个<h2>元素

        var headerText = document.createTextNode("Results:");   //创建内容是Results:的文本节点

        header.appendChild(headerText);     //将文本节点增加到<h2>元素中

        document.getElementById("header").appendChild(header);   //<h2>节点增加<span id="header">

       

        document.getElementById("resultsTable").setAttribute("border","1");    //设置<table id="resultsTable">border属性为1

      }

     

      //创建一个表行

      function addTableRow (address, price, comments) {

        var row = document.createElement("tr");     //创建<tr>元素

        var cell = createCellWithText(address);     //tr元素追加一个新创建的td元素

        row.appendChild(cell);

       

        cell = createCellWithText(price);

        row.appendChild(cell);

       

        cell = createCellWithText(comments);

        row.appendChild(cell);

       

        document.getElementById("resultsBody").appendChild(row);     //将创建好的行增加到表的tbody元素中

      }

     

      //创建表列

      function createCellWithText(text) {

        var cell = document.createElement("td");

        var textNode = document.createTextNode(text);

       

        cell.appendChild(textNode);

       

        return cell;

      }

    //-->

    </script>

  </head>

 

  <body>

    <h1>Search Real Estate Listings</h1>

   

    <form action="#">

      Show listings from

        <select name="minPrice">

          <option value="50000">$50,000</option>

          <option value="100000">$100,000</option>

          <option value="150000">$150,000</option>

        </select>

      to

         <select name="maxPrice">

          <option value="100000">$100,000</option>

          <option value="150000">$150,000</option>

          <option value="200000">$200,000</option>

        </select>

      <input type="button" value="Search" onclick="doSearch();" />

     

      <span id="header"></span>

     

      <table id="resultsTable" width="75%" border="0">

        <tbody id="resultsBody">

        </tbody>

      </table>

    </form>

  </body>

</html>

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2261次
    • 积分:50
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档