今天AJAX必须用JS，做前端必须用JS，由于课程紧，只安排了一天时间，只讲了Dom。
DOM 可在J2SEAPI搜Document，便可以查看方法
DOM树:节点（node）的层次。
节点分为三种类型：
节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合
1.节点分为三种类型：
element node attribute
node text node
2.使用 Aptana 编辑器 :
3.查找节点：
1）在哪儿写代码：
不能直接写在<body> 元素的前面 ：因为此时 DOM没有被完全解析
可以把 js 写在
</html> 的后面
按惯例应该把 js 代码写在 <head>中，<title>节点后，此时需要使用 js 函数window.onload = function(){
//alert("window.onload...");
var
cityElement =
document.getElementById("city");
alert(cityElement.nodeName);
};
2）Dom属性：nodeName nodeType
nodeValue
① nodeName:一个字符串，其内容是给定节点的名字。
var name = node.nodeName;
如果给定节点是一个元素节点或属性节点，nodeName 属性将返回这个元素的名字。
如果给定节点是一个文本节点，nodeName
属性将返回内容为 #text
的字符串。
nodeName 是一个只读属性。
② nodeType：返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型：
Node.ELEMENT_NODE (1) -- 元素节点
Node.ATTRIBUTE_NODE (2) -- 属性节点
Node.TEXT_NODE (3) -- 文本节点
…
nodeType 是个只读属性
③nodeValue：返回给定节点的当前值（字符串）
•
如果给定节点是一个属性节点，返回值是这个属性的值。
•
如果给定节点是一个文本节点，返回值是这个文本节点的
内容。
•
如果给定节点是一个元素节点，返回值是
null
•
nodeValue 是一个
读/写 属性，但不能对元素节点的
nodeValue 属性设置值，但可以为文本节点的 nodeValue
属性设置一个值。
4. 关于子节点:
1). 获取方法:
元素节点的 childNodes 属性可以获取指定元素节点的所有子节点.
2). 火狐
和 ie 的实现方式不一样: 火狐包含空格的文本节点
3). 提前判断当前节点是否有子节点:
通过元素节点的 hasChildNodes() 方法. 文本节点和属性节点都没有子节点, 所以他们的
hasChildNodes() 方法总返回 false
4). 可以通过元素节点的 firstChild(lastChild) 来获取元素节点的第一个子节点(最后一个子节点)
可以通过元素节点的 firstChild/lastChild 来获取元素节点的第一个子节点（最后一个节点）
5. 正则表达式
用途：
1.
数据有效性验证
2.
查找和替换
文本格式： /pattern/flags
参数说明：
pattern ：一个正则表达式文本
flags ： 如果存在，将是以下值：
g ： global
match(全局匹配)
i ：ignore case(忽略大小写)
gi ： both global
match and ignore case(匹配所有可能的值，也忽略大小写)
在java中相当重要，可谓必备知识，可惜我这方面没看过，就列
一些常用的正则表达式示例：
1、匹配所有的正数：^[0-9]+$
2、匹配所有的小数：^\-?[0-9]*\.?[0-9]*$
3、匹配所有的整数：^\-?[0-9]+$
4、提取信息中的中文字符串： [\u4e00-\u9fa5]* ;
5、提取信息中的邮件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
6、提取信息中的中国手机号码：(86)*0*13\d{9}
7、提取信息中的中国固定电话号码：(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}
8、提取信息中的中国邮政编码：[1-9]{1}(\d+){5}
9、提取信息中的中国身份证号码：\d{18}|\d{15}
10、提取信息中的任何数字：(-?\d*)(\.\d+)?
11、匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*)
\/>/
6. 创建节点:
1).
创建元素节点:
document.createElement
2).
创建文本节点:
document.createTextNode
3).创建属性节点: 可以直接为其添加属性节点:
liNode.onclick
= function(){
alert(this.firstChild.nodeValue);
};
4).
插入节点:
appendChild
insertBefore
可以自定义 insertAfter
7. 其它:
1).
替换节点:
replaceChild. **注意: 该方法除了可以替换还可以移动, 一般的, 直接单独使用该方法时并不多.
2).
删除节点:
removeChild
3).
innerHTML属性:
8. 关于 value 和 nodeValue:
1).
value: html 表单元素的某个节点的
value 属性值. <input
type="text" value=""> -- value 值可通过 .value 获取; 但 <p value=""></p> 中的 value 属性值无法通过 .value 干获取
2).
nodeValue: 文档(html 或 xml) 中节点的一个属性, 该属性和 nodeType, nodeName 并列. 该属性通常用来获取文本节点的文本值
9. 关于 if() 中可以放置的表达式: 当 if 中的表达式为 false, undefined, null,
"", 0 时表示不满足条件, 此外都满足条件.
10. 作业: dom-8.html 中的: "为所有的 li 添加 click 事件, 实现 game 和 city 对应位置的 li 子节点的互换"
posted on 2010-01-18 22:20
d66380022 阅读(177)
评论(0) 编辑 收藏