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

原创 2007年09月14日 13:40:00

使用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>

 

javascript基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分...
  • u012967849
  • u012967849
  • 2016年07月20日 14:08
  • 1958

JAVA零基础学习第一天笔记

Ⅰ.java程序的组织形式:                                 java是一个纯粹的面向对象语言,java程序必须以类(class)的形式存在,在java里面所有的可执...
  • plane_more
  • plane_more
  • 2016年03月18日 10:09
  • 534

《语义网基础教程》学习笔记(二)

RDF概述
  • zpcandzhj
  • zpcandzhj
  • 2014年08月04日 18:43
  • 1601

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

 创建XMLHttpRequest对象的一个实例(p24)var xmlHttp;function createXMLHttpRequest(){       if (window.ActiveXOb...
  • chenl_421
  • chenl_421
  • 2007年09月13日 14:13
  • 352

Ajax基础教程整理,学习笔记

在线阅读:(使用的Google的在线文档编辑)http://docs.google.com/Doc?id=ddsmhm24_0g6hvrx 
  • yuanfen127
  • yuanfen127
  • 2007年05月17日 10:11
  • 669

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

 DOM(p35)DOM(文档对象模型)是一个W3C规约,可以以一种独立于平台的语言的方式访问和修改一个文档的内容和结构。换句话说,就是表示和处理一个HTML或XML文档的常用方法。DOM的设计是以对...
  • chenl_421
  • chenl_421
  • 2007年09月14日 13:38
  • 215

集合1--毕向东java基础教程视频学习笔记

Day14 集合框架01 体系概述02 共性方法03 迭代器04 List集合共性方法05 ListIterator06 List集合具体对象特点07 Vector中的枚举   01 体系概述 ...
  • lighten_7
  • lighten_7
  • 2017年04月06日 15:50
  • 747

libSVM学习笔记

目录 一、         LibSVM文件结构说明... 2 二、         LibSVM安装及测试... 2 1.下载libsvm... 2 2.解压至指定目录... 2 ...
  • yansmile1
  • yansmile1
  • 2015年12月07日 17:18
  • 548

TensorFlow官方教程学习笔记之3-用于机器学习专家学习的MNIST数据集(MNIST For ML Beginners)

```python from __future__ import absolute_importfrom __future__ import divisionfrom __future__ impor...
  • u010837794
  • u010837794
  • 2017年07月17日 22:21
  • 510

Ionic3入门

新手入门ionic教程 神奇链接
  • qq_38082661
  • qq_38082661
  • 2017年10月11日 11:57
  • 82
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX基础教程——学习笔记(三)
举报原因:
原因补充:

(最多只允许输入30个字)