传智播客--JavaScript DOM加强(佟刚)
2009-12-24 23:53
411 查看
上了一天的课,很累,不过真的很充实.比自己学的效率要高很多,对技术的理解也提高了不少.对自己又充满了信心,感觉自己两个半月后一定能找到一个五千块
以上的工作.哈哈!今天是佟刚老师讲的 JavaScript
的应用.这是在项目和工作中的基本技能.老师精彩讲解了经常使用到的功能实现,对 JavaScript
的总结和运用很全面和实用.先简单介绍几句教我 JavaScript
的老师,佟刚老师,上课的时候很有激情.一讲高兴了,就感觉拦都拦不住的架势.对课堂气氛的掌握和节奏的把握都很老道,相当有经验.虽然课程内容很多,但
老师的讲解方法到位,让我们吸收起来也容易轻松了不少.大大提高了效率.一下课佟刚老师就在教室里走走,走到同学边上问问能不能跟上,有没有没理解的.不
管问什么问题,老师都很细心的讲解.说实话真的很认真.老师的话题今天就先聊到这儿,以后再详细说说.先来总结一下今天学习到的知识.
今
天的主要内容是JavaScript DOM 加强.上午讲解了一下基础知识和一些 API
方法的使用,加强基础.主要对这些内容进行了讲解,节点及其类型;查找元素节点;查看是否存在子节
点;nodeName;nodeType;nodeValue;替换节点;查找属性节点;设置属性节点;创建新元素节点;创建新文本节点;插入节点;删除
节点;遍历节点树;获取第一个子节点;获取最后一个子节点;innerHTML属性;
老师提前就把PPT给我们预习了,内容看起来真的很
多.不过在课堂上学习的时候,并没有感觉到有太吃力.老师总能用简短有效的例子和代码,把问题讲解清楚.
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课
程更加精彩.
以上的工作.哈哈!今天是佟刚老师讲的 JavaScript
的应用.这是在项目和工作中的基本技能.老师精彩讲解了经常使用到的功能实现,对 JavaScript
的总结和运用很全面和实用.先简单介绍几句教我 JavaScript
的老师,佟刚老师,上课的时候很有激情.一讲高兴了,就感觉拦都拦不住的架势.对课堂气氛的掌握和节奏的把握都很老道,相当有经验.虽然课程内容很多,但
老师的讲解方法到位,让我们吸收起来也容易轻松了不少.大大提高了效率.一下课佟刚老师就在教室里走走,走到同学边上问问能不能跟上,有没有没理解的.不
管问什么问题,老师都很细心的讲解.说实话真的很认真.老师的话题今天就先聊到这儿,以后再详细说说.先来总结一下今天学习到的知识.
今
天的主要内容是JavaScript DOM 加强.上午讲解了一下基础知识和一些 API
方法的使用,加强基础.主要对这些内容进行了讲解,节点及其类型;查找元素节点;查看是否存在子节
点;nodeName;nodeType;nodeValue;替换节点;查找属性节点;设置属性节点;创建新元素节点;创建新文本节点;插入节点;删除
节点;遍历节点树;获取第一个子节点;获取最后一个子节点;innerHTML属性;
老师提前就把PPT给我们预习了,内容看起来真的很
多.不过在课堂上学习的时候,并没有感觉到有太吃力.老师总能用简短有效的例子和代码,把问题讲解清楚.
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课
程更加精彩.
相关文章推荐
- JavaScript加强:Dom
- 在javascript中对于DOM的加强
- 韩顺平 javascript教学视频_学习笔记29_dom编程加强_dom对象(document2) 加强重要
- 在javascript中对于DOM的加强
- javascript对于DOM加强
- javascript对于DOM加强
- javascript dom 操作详解 js加强
- javascriptDOM加强
- (5)JavaScript加强(三部分:DOM编程,正则表达式,简单验证码)
- JavaScript基础----22Javascript-DOM EventListener
- JAVA AJAX教程第五章―DOM和JAVASCRIPT深入(上)
- 轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点
- dom与javascript
- 第一百一十五节,JavaScript,DOM操作表格
- javascript和jquery的dom对比
- JavaScript学习笔记——DOM_document对象
- javascript DOM操作基础
- JavaScript基本概念—DOM(2)
- JavaScript DOM 方法 属性