JavaScript DOM加强(佟刚)

1.JavaS   cript 相对支持好的IDE.Aptana.  
今天还真的头一次使用.原来一直用MyEclipse或Eclipse对 JavaScript 开发,支持的不是很好,有时候很费劲.有了这个大大的提高了效率.界面和原来用的Eclipse都是一样的,所有今天虽然第一次时候,但也不是很别手.很 快就用这个 IDE 写了一个 JavaScript 的 HelloWorld.很好的开始.

2.基础方法的使用:  
获 取元素节点:var bj = document.getElementById("bj");
获取属性节点:var nameNode = bj.getAttributeNode("name");
获取元素节点的 nodeName 属性值:bj.nodeName
获取属性 节点的值:var name = bj.getAttribute("name"); alert(name);
获取元素节点的 nodeValue 属性值, 返回 null:bj.nodeValue

3.练习例子:  
1)点击任何 li 节点, 弹出对应的文本值  
思路:
①获取所有的 li 节点
② 为每个 li 节点添加 onclick 事件
③ 在相应函数中弹出当前节点的文本值
在②和③步中,使用了for循环.
关 键代码:
<script type="text/javascript">  
            window.onload = function(){  
                var pNodes = document.getElementsByTagName("p");  
                // alert(pNodes.length);                
                for (var i = 0; i < pNodes.length; i++) {  
                    pNodes[i].onclick = function(){  
                        //alert("hello...");  
                        alert(this.firstChild.nodeValue);  
                    };  
                }                
                //点击任何 li 节点, 弹出对应的文本值                
                //1. 获取所有的 li 节点  
                var liNodes = document.getElementsByTagName("li");                
                //2. 为每个 li 节点添加 onclick 事件  
                for (var i = 0; i < liNodes.length; i++) {  
                    liNodes[i].onclick = function(){  
                        //3. 在相应函数中弹出当前节点的文本值  
                        alert(this.firstChild.nodeValue);  
                    };  
                }                
            };            
</script>  

2)点击任何 li 节点, 对节点内容进行修改.  
关键代码:  
<script type="text/javascript">  
            window.onload = function(){  
                var cityNode = document.getElementById("city");  
                var brNodes = document.getElementsByTagName("br");  
                var cities = cityNode.childNodes;                 
                for(var i = 0; i < cities.length; i++){  
                    if(cities[i].nodeType == 1){  
                        cities[i].onclick = function(){  
                            var reg = /^/^+|/^+$/gi;  
                            var flag = reg.test(this.firstChild.nodeValue); //代表是否有 "^^"                        
                            if(!flag){  
                                this.firstChild.nodeValue = "^^" + this.firstChild.nodeValue + "^^"; 
                            }else{  
                                this.firstChild.nodeValue = this.firstChild.nodeValue.replace(reg, "");  
                            }                                
                        };  
                    }  
                }  
            };            
</script>  
总 结:
--关于节点的属性: 只读 -- nodeName, nodeType, 可以进行读写 -- nodeValue;
--在判断 中,使用的了正则表达式.
--在利用 childNodes 属性获取所有子节点时, 应注意其中可能包含文本节点

3)创建一个新的节点,并把li节点添加到ul的末尾.  
思路:
① 创建一个新的元素节点: document.createElement()   --创建 li 节点: <li></li>
② 创建一个新的文本节点：document.createTextNode() --创建文本节点: 南京
③为指定的元素节点添加子节点: element.appendChild(childNode) --把 "南京" 节点作为 li 节点的子节点: <li>南京</li>
④把 <li>南京</li> 加入到 ul 节点的末尾
核心 代码:
<script type="text/javascript">            
            window.onload = function(){  
                //创建一个新的元素节点 <li>南京</li>, 将该节点加入到 ul 节点的末尾                
                //1. 创建一个新的元素节点: document.createElement()   --创建 li 节点: <li></li>  
                var newLiNode = document.createElement("li");                
                //2. 创建一个新的文本节点：document.createTextNode() --创建文本节点: 南京  
                var newTextNode = document.createTextNode("南京");                
                //3. 为指定的元素节点添加子节点: element.appendChild(childNode) --把 "南京" 节点作为 li 节点的子节点: <li>南京</li>  
                newLiNode.appendChild(newTextNode);                
                //4. 把 <li>南京</li> 加入到 ul 节点的末尾  
                document.getElementById("city").appendChild(newLiNode);                
            }  
</script>  

4)新建一个 <li>杭州</li> 节点, 将该节点插入到 <li>东京</li> 的前边  
思路:
新建一个 <li>杭州</li> 节点, 将该节点插入到 <li>东京</li> 的后边 
若 <li>东京</li> 节点有下一个兄弟节点, 则 <li>杭州</li> 节点放到 <li>东京</li> 节点有下一个兄弟节点的前边
若 <li>东京</li> 节点没有下一个兄弟节点, 直接放在 <li>东京</li> 节点的父节点的最后
核心代码:
<script type="text/javascript">            
            function insertAfter(newChild, refChild){  
                var parentNode = refChild.parentNode;                
                if(parentNode){  
                    if(refChild.nextSibling){  
                        parentNode.insertBefore(newChild, refChild.nextSibling);  
                    }else{  
                        parentNode.appendChild(newChild);  
                    }  
                }                
            }            
            window.onload = function(){  
                //新建一个 <li>杭州</li> 节点, 将该节点插入到 <li>东京</li> 的前边            
                var liNode = document.createElement("li");  
                var liText = document.createTextNode("杭州");  
                liNode.appendChild(liText);                
                var djElement = document.getElementById("sr");                
                //**insertBefore()  
                //document.getElementById("city").insertBefore(liNode, djElement);                
                //新建一个 <li>杭州</li> 节点, 将该节点插入到 <li>东京</li> 的后边        
                //思路: 若 <li>东京</li> 节点有下一个兄弟节点, 则 <li>杭州</li> 节点放到    <li>东京</li> 节点有下一个兄弟节点的前边  
                //     若 <li>东京</li> 节点没有下一个兄弟节点, 直接放在 <li>东京</li> 节点的父节点的最后  
                insertAfter(liNode, djElement);  
            }  
</script>  

5)替 换节点: 互换 bj 节点和 rl 节点.  
替换中,两个关键方法的使用:
var rl1 = rl.cloneNode(true);//打开节点克隆
document.getElementById("city").replaceChild(rl1, bj);//进行替换.注意顺序,是后面的替换前面的.
替换节点: replaceChild(), 副作用: 可以移动节点.
获取文 本节点, 文本节点一定是一个给定的元素节点的子节点. 而不是给定元素节点的 nodeValue 值

6)选择类型,书写文本,并添加到指定 类型中.  
思路:
①获取 submit 按钮.
②为其添加 onclick 事件
③判断 name="type" 的 radio 是否被选中, 若没有被选中, 给出相应的提示
④若 name="type" 的 radio 是已被选中, 判断 name="name" 的 text 是否输入值, 若没有输入或输入的为空串, 给出相应的提示
⑤创建相应的 li 节点
⑥将新创建的 li 节点添加到指定的 ul 的结尾处

7)用JavaS   cript,实现下拉联动.  
思路:
①为 province 节点添加 onchange 事件.清除上次的 option 节点: 因为 js 的数组时动态变化的, 所以不能从前向后清除子节点
②获取 province 节点的值 proviceValue
③解析 cities.xml 文档, 根据 proviceValue 获取相应的 province 节点
④ 获取 3 中 province 节点的所有 city 子节点,  遍历, 创建对应的

8)用JavaS   cript, 对checkbox进行使用操作.  
包括全选,全不选,反选,提交.
这个练习很全面和实用,对今天学习到知识点都用到了.巩 固和提高了JavaScript的编写能力.
一天很快就过去了,晚上做完明天的预习和今天的总结也要早点睡觉了.明天的JQuery课 程更加精彩