Javascript学习总结-DOM编程-(七)
1.1. DOM简介
全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。
1.2. 节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树。
访问属性
all
forms
images
links
body
访问方法(最常用的DOM方法)
1.3. 获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
Var dom = window.document;
function testByTagName() {
var iptArr = dom.getElementsByTagName("input");
for (var i = 0; i < iptArr.length; i++) {
alert(iptArr[i].value);
}
}
// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2，得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() {
var user = dom.getElementById("username");
alert(user.value);
user.value = "rose";
}
//testById();
//3. 获取所有标签name 为like的元素.获取value值.
function testByName() {
var likeArr = dom.getElementsByName("like");
for (var i = 0; i < likeArr.length; i++) {
alert(likeArr[i].value);
}
}
testByName();1.3.1. 案例
显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue
1.3.2. 属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全不选的效果。
无标题文档
商品列表
全选
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
全选
1.4. 通过节点关系查找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
1.4.1. 获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素，例
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
javascript
哈哈
1.5. 节点操作
1.5.1. 创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。
// 参数1：要插入的节点 参数
2：插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
无标题文档
无标题文档
删除附件
1.5.2. 案例
- 生成二级城市联动菜单
无标题文档
2.动态生成年、月、日字段
javascript
生日:
- 生产一个验证码
javascript
看不清楚
2. 正则表达式
位置：
^ 开头
$ 结尾
次数：
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个，最多m个
通配符：
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符（除'\n'外）
组合：
[a-z]
[0-9]
等
组：
(正则) 匹配括号中正则表达式对应的结果，并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果，但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具（RegExp类与相关方法）
创建：
// 方式一
var regex = new RegExp("正则表达式", "标志");
// 方式二
var regex = /正则表达式/标志
参数说明：
正则表达式：
参见上面的规则
标志：
g （全文查找出现的所有 pattern）
i （忽略大小写）
m （多行查找）
方法：
Regexp.test( str )
String.replace( regex, str )
练习：校验表单
正则表达式