------- 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,”#”);
}