今天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 子节点的互换"