2009-12-24传智播客——JavaScriptDOM加强（一）转载）

tigers20010

浏览: 48617 次
性别:
来自: 深圳

最近访客更多访客>>

ydalbj007

胡睿杨

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript 正则表达式 XML Ajax CSS

今天学习JavaScriptDOM加强，javascript灵活性大家都知道。但我们学习的只是使用JavaScript

对页面的操作，为学习AJAX打下基础。

JavaScriptDOM对页面的直接操作，使用户的体验更加舒畅。再加上CSS的装饰，那简直太完美了！JavaScriptDOM的使用并不复杂，相比那些专业搞JavaScript开发简单的多。下面我整理一下今日的学习内容。

一、DOM(DocumentObjectModel)

D：html、xml文档

O：document对象的属性和方法，它是核心对象，代表整个页面。

M：模型

DOM树这个东西，很多培训机构都有讲，看来他是一个经典！（用老佟的）

把上面的图片旋转180度，你就会看到一棵树。

二、节点及其类型

这个是重点，一定要牢记，首先知道了DOM，DOM下面就是这些。把框架记住了，使用JavaScriptDOM那就容易了。

1.节点分为三种类型：

1).元素节点

2).属性节点

3).文本节点

例如“<a href=”http://www.itcast.com.cn”>传智播客</a>”，“<a></a>”是元素节点，“href”是属性节点，“传智播客”是文本节点。Html和xml就不是这些节点相互套用吗！

三、属性和方法

1.查找节点：

document.getElementById(Id);：根据指定的ID属性值返回元素节点，Id是全局唯一的。如果不存在返回null。

document.getElementsByName(name);：根据指定的name属性值，返回所有的元素节点。返回一个数组集合，可以调用它的length查看它的数量。

node.hasChildNodes();查看元素节点是否有子节点，有返回true，无返回false。对属性节点和文本节点无效。

2.节点属性：

node.nodeName;返回节点的名称，只读属性。

node.nodeType;返回节点的类型，只读属性。返回1是元素节点，返回2是属性节点，返回3是文本节点。

node.nodeValue;返回或设置节点的值，读/写属性。对元素节点无效。

node.parentNode;返回节点的父节点，只读属性。

node.childNodes;返回节点的所有子节点，是一个数组集合，只读属性。

node.firstChild;返回节点的第一个子节点，只读属性。

node.lastChile;返回节点的最后一个子节点，只读属性。

node.nextSibling;返回节点的下一个兄弟节点，只读属性。

node.previousSibling;返回节点的前一个兄弟节点，只读属性。

node.innerHTML; 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。用来读\写某给定元素里的 HTML内容。

3.节点方法：

paraentNode.replaceChild(newChildNode, oldChildNode);替换节点，返回被替换节点的指针。如果新节点有子节点，也将被插入。

node.getAttribute(attributeName);返回节点属性值，如果不存在名称为attributeName的属性，返回空字符串。

node.setAttribute(attributeName, attributeValue);设置节点属性值。

document.createElement(nodeName);创建元素节点。

document.createTextNode(nodeName) ;创建一个文本节点。

node.appendChild(newNode);追加一个子节点。

node.insertBefore(newNode, targetNode);向targetNode节点前插入一个新节点。

整体上内容就这么多，不过今天还有三个练习。上边的内容看起来简单，但实际应用中并没那么容易。这也许就是JavaScript吧！——看着简单，用起来十分难！

4.练习：

1).在一个下拉列表框中选择省份，在另一个下拉列表框中显示对应的城市。

省份与城市的数据保存在xml文件中，在此只列出关键JavaScript代码。

Javascript:

window.onload = function(){

var province = document.getElementById("province");

// 设置<select id="province">的被改变事件

province.onchange = function(){

//----- 每次选择省份时，要清空<select id="province">下的原有城市 -----

var selectCity = document.getElementById("city");

var oldcities = selectCity.childNodes;

// 要保留“请选择...”，所以从1开始

var len = oldcities.length-1;

for(var i=1; i<len;i++){

selectCity.removeChild(selectCity.lastChild);

}

//----- 获取城市并显示 ------

// 获取当前省份

var province = this.value;

if(province != ""){

// 加载XML文件

var cityDoc = parseXml("cities.xml");

// 查找指定省份节点

var provinces = cityDoc.getElementsByTagName("province");

var provinceNode = null;

for(var i=0; i < provinces.length; i++){

if(provinces[i].getAttribute("name") == province){

provinceNode = provinces[i];

break;

}

// 获取对应省份的所有城市

var cities = provinceNode.childNodes;

// 包装城市，插入到<select id="city">中

for(var i=0; i<cities.length;i++){

if (cities[i].hasChildNodes()) {

// 创建option元素节点

var optionNode = document.createElement("option");

// 创建文本节点

var textNode = document.createTextNode(cities[i].firstChild.nodeValue);

// 将文本节点添加到option元素节点

optionNode.appendChild(textNode);

// 将option元素节点添加到select元素节点中

selectCity.appendChild(optionNode);

}

2).添加和删除联系人，并在当前页面动态显示联系人信息。

window.onload = function(){

//------------ 添加联系人 ---------------

//获取提交按钮

var sbumitform = document.getElementById("submit");

//设置提交事件

sbumitform.onclick = function(){

// 获取提交的联系人信息

var name = document.getElementById("name").value;

var phone = document.getElementById("phone").value;

var address = document.getElementById("address").value;

// 人名不能为空，如果空则返回并提示。使用正则表达式替换。

var reg = /^\s*|\s*$/gi;

name = name.replace(reg, "");

if(name == ""){

alert("请输入姓名！");

return false;

}

//创建表格中的<tr>节点

var trNode = document.createElement("tr");

//创建表格中的<td>节点，并将信息添加进去

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

tdNameNode.appendChild(document.createTextNode(name));

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

tdPhoneNode.appendChild(document.createTextNode(phone));

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

tdAddressNode.appendChild(document.createTextNode(address));

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

var aNode = document.createElement("a");

aNode.setAttribute("href","/delete?id=");

aNode.appendChild(document.createTextNode("delete"));

tdDeleteNode.appendChild(aNode);

//将td添加到tr中

trNode.appendChild(tdNameNode);

trNode.appendChild(tdPhoneNode);

trNode.appendChild(tdAddressNode);

//将tr添加到table中

document.getElementById("contacters").appendChild(trNode);

return false;

}

//------------ 删除系人 ---------------

// 获取所有font-size: 10pt; background: white; color: green;

分享到：

2009-12-24传智播客——JavaScriptDOM加强 ... | 2010-01-26 传智播客—spring （转载）

2010-04-10 11:26
浏览 792
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论