------- android培训、java培训、期待与您交流！ ----------
DOM（document Object model）文档对象模型。
其实就是讲一些标记型的文档以及文档中的内容当成对象。
为什么要将这些文档以及其中的标签封装成对象呢？
因为可以再对象中定义其属性和行为，可以方便操作这些对象。
DOM在封装标记型文档时，有三层模型。
DOM1:针对html文档。
DOM2:针对xml文档。
DOM3:针对xml文档。
html、xhtml、xml：这些都是标记型文档。
DHTML：是多个技术的综合体。叫做动态的html。
html：负责将数据进行标签的封装。
css：负责标签的样式。
dom：负责将标签以及标签中的数据封装成对象。
javascript：负责通过程序设计方式来操作这些对象。
标签之间存在着层次关系：
html
|--head
|--title
|--base
|--link
|--meta
|--style
|--script
|--body
|--div
|--form
|--input
|--select
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
通过这个标签层次，可以形象的看作一个树形结构。那么我也称标记型文档，加载进内存的是一棵DOM树。这些标签以及标签的数据都是这棵树上的节点。
当标记型文档加载进内存，那么内存中有了一个对应的DOM树。
DOM对于标记型文档的解析有一个弊端就是文档过大，相对消耗资源。
对于大型文档可以使用SAX这种方式解析。
节点类型：
标签型节点：类型：1
属性型节点：类型：2
文本型节点：类型：3
注释型节点：类型：8
Document：类型：9
注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。
节点的关系：
父节点。parentNode
子节点。chileNodes:直接子节点。返回的是一个节点对象数组。
兄弟节点
上一个兄弟节点。previousSibling
下一个兄弟节点。nextSibling
----------------------------------------------
获取可以通过节点的层次关系完成。
也可以通过document对象完成。
getElementById：通过id属性值获取对应的节点对象。如果有多个id值相同。获取到的是第一个id所属对象。
getElementsByName：通过标签的name属性值获取对象。返回的一堆对象。其实是一个对象数组
getElementsByTagName：既没有id也没有name时，可是通过标签名来获取节点对象。返回的是一堆对象。其实是一个对象数组。大多容器型标签都具有该方法。
event.returnValue = false;设置了不再向下运行
event.srcElement;获得当前事件的节点
---------------------------------------------
DOM编程：
1. 定义界面：
通过html的标签将数据进行封装
2. 定义一些静态的样式
通过css
3. 需要动态的完成的和用户的交互
1. 先明确事件源
2. 明确事件将事件注册到事件源上
3. 通过js的函数对象事件进行处理
4. 在处理过程需要明确被处理的区域
-----------------------------------------------
table标签的示例：
1. 在页面上通过按钮创建一个表格。
1. 创建一个table节点。document.crateElement(“table”);
2. 通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中。
3. 通过行对象的insertCell()方法创建单元格对象，并添加到cells集合中
4. 给单元格中添加数据。
i. 创建一个节点如文本节点，document.createTextNode(“文本内容”)，通过单元格对象appendChild方法将文本节点添加到单元格的尾部
ii. 可以通过单元格的innerHTML，添加单元格中的元素。
5. 建立好表格节点，添加到DOM树中。也就是页面的指定位置上。
2. 如何删除表格中的行或列
1. 删除行：获取表格对象，通过表格对象中的deleteRow方法，将指定的行索引传入deleteRow方法中
2. 删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作。获取所有的行对象，进行遍历，通过行对象的deleteCell方法将指定单元格删除。
3. 对表格中的数据进行排序
1. 获取表格中的所有行对象
2. 定义临时存储将需要进行排序的行对象存入到数组中
3. 对数组进行排序，通过比较每一个行对象中指定单元格中的数据，如果是整数需要通过parseInt转换
4. 将排序后的数组通过遍历，将每一个行对象重新添加回表格。通过tbody节点的appendChild方法。
5. 其实排序就是每一个行对象的引用取出
4. 表格的行颜色间隔显示，并在鼠标指定的行上高亮显示
1. 获取所有的行间隔，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器
2. 为了完成高亮，需要用到两个事件，onmouseover（鼠标进入），onmouseout（鼠标移出）
3. 为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成该事件的处理
4. 高亮的原理就是将鼠标进入时的指定颜色改变，改编曲先记录住原理行行对象的样式。这样在鼠标离开时，可以将原样式还原。
5. 该样式需要在页面加载完后直接显示，所以使用的window.onload事件完成
5. 完成一个与css手册中一样的示例。
通过下拉菜单选择先指定样式属性的使用效果
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<scripttype="text/javascript" src="doctool.js"></script>
<scripttype="text/javascript">
functionchange(){
var selNode = byId("selid");
var value =selNode.options[selNode.selectedIndex].value;
//alert(value);
var divNode1 = byId("cssid");
var divNode2 = byId("textid");
divNode1.style.textTransform = value;
divNode2.innerText ="text-transform:"+value+";";
}
</script>
<styletype="text/css">
#cssid{
height:100px;
width:300px;
background-color:#00FF99
}
#textid{
background-color:#CCCCCC;
width:300px;}
</style>
</head>
<body>
<divid="cssid">
Good good study,Day day up
</div>
<p>
</p>
<selectid="selid" οnchange="change()">
<optionvalue="none">--text-transform--</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">所有字母大写</option>
<option value="lowercase">所有字母小写</option>
</select>
<p></p>
<divid="textid">
text-transform:none;
</div>
</body>
</html>
6. 表单中的组件。
单选框，复选框。
这两个组件都一个属性来表示其选中与否的状态。checked
完成一个对多个复选框，进行全选的操作
思路：将全选那个复选框的checked状态付给所有的其他checkbox即可
<input type=”checkbox”name=”all” οnclick=”checkAll(0)”/>全选
<input type=”checkbox”name=”item” />
<input type=”checkbox”name=”item” />
<input type=”checkbox”name=”item” />
<input type=”checkbox”name=”all” οnclick=”checkAll(1)/>全选
<script type=”text/javascript”>
function checkAll(index){
var node =document.getElementsByName(“all”)[index];
var items =document.getElementsByName(“item”);
for(varx=0;x<items.length;x++){
items[x].checked =node.checked;
}
}
</script>
7. 获取鼠标的坐标，让指定区域随着鼠标移动
获取鼠标坐标：event.x，event.y
指定区域随鼠标移动其实就是改变了指定区域的left top属性的值
这里需要用到的事件：body对象的onmousemove事件。
还需要用到一个css样式。直接定义页面，所以区域都在同一层次
为了对某一个区域进行定位，将该区域分离到另一个层次。用到css中的position属性
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style type="text/css">
#bodyid{
border:#000000 1px solid;
height:600px;
width:800px;
}
</style>
<scripttype="text/javascript">
window.onload = function(){
document.body.οnmοusemοve= function(){
varadNode = document.getElementById("ad");
adNode.style.left= event.x-10;
adNode.style.top= event.y-10;
}
}
function closead(){
varadNode = document.getElementById("ad");
adNode.style.display= "none";
}
</script>
</head>
<body>
<div id="ad"style="position:absolute; left:0; top:0"οnclick="closead()">
<a href="http://www.ad.com.cn"target="_blank"><img src="1.jpg"height="80px" width="100px"/></a>
</div>
<div id="bodyid">
dody区域
</div>
</body>
</html>
----------------------------------------
正则表达式：
是一种专门用于操作字符串的规则。
通过一些符号来表示，简化对字符串的复杂操作。
弊端：阅读性较差。
常见的操作：
1. 匹配：String matches(regex)
2. 获取（查找）：Pattern , Matcher
Pattern p =Pattern.compile(regex);
Matcher m =p.matcher(String);
While(m.find()){
System.out.println(m.group());
}
3. 切割：String split(regex);
4. 替换：String replaceAll(regex,str);
实例：
Stingregex = “\\d{5,}”;
Pattern p =Pattern.compile(regex);
Matcher m =p.matcher(String);
While(m.find()){
Strings = m.group();
s.replaceAll(regex,”#”);
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
