今天学习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;
|