黑马程序员-dom编程

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流！ ----------------------

                                    DOM编程
一，
DOM :document object model  文档对象模型 
其实就是将一些标记型的文档以及文档中的内容当成对象
为什么要将这些文档以及其中的标签封装成对象呢？
因为可以在对象中定义其属性和行为可以方便操作这些对象

二，dom的模型 
dom三层模型：
dom1:将html 文档封装成对象
dom2:将xml文档封装成对象
dom3:将xml文档封装成对象

DHTML:动态html 包括：html css dom javascript
html:将数据进行封装
dom:将标签封装成对象
css:标签中数据的样式
javascript:将三者进行融合，通过程序设计方式来完成动态效果的操作

html xhtml xml:这些都是标记型文档
dhtml：是多个技术的综合体，叫做动态的html
如果在加xmlHttpReques   就叫： AJAX     



dom树：
html
|---head
|---title
|---base
|---meta
|---link
     |--- style
|---body
|---table
    |---tbody
    |---tr
    |----tr
    |---td
   
|---div
|---form
|--input
|---select
|---a
 
通过这个标签层次，可以形象的看作是一个树型结构，那么我们称标记型文档，加载进内存的是一棵dom树，
这些标签以入标签的数据都是这棵树上的节点。


当标记型文档加载进行内存，那么内存中有了一个对应的dom树。


dom对于标记型文档的解析有一个弊端就是文档过大，相对消耗资源，对于大型文档可以使用SAX这种方式解析方式
三 ,document对象常见方法
方法： Object  getElementById("指定标签id值")：获取指定标签的对象
getElementsByTagName(指定节点的名字)：获取此节点在文档中所有对象
getElementsByName(name属性的值)：根据name属性的值来获取对象的集合
属性：value  
div 对象中
属性：parentNode:获取父节点 previousSibling:获取上一个兄弟节点如果有空行的话会获取文本节点，nextSibling:获取下一个兄弟节点，空行不会被解析的
方法：childNodes（）:获取子节点的集合中的子节点为文本节点

节点的属性：nodeName节点的名字 nodeType：节点的类型  nodeValue：节点的值  attributes:获取此节点中所有属性的集合

所有对象的方法：all():返回该对象包含的元素集合的引用 包括直接后代和间接后代不包括文本节点  也能指定索引的节点
hasChildNodes():判断此节点是否还有子节点 

table对象中
方法：getElementsByTagName(节点名）：返回此节点中指定节点名的集合

四，节点
节点的类型：
标签型节点：类型：1
属性节点： 类型：2
文本节点：  类型：3
注释节点：  类型：8
document:  类型：9
节点的关系：
父节点：parentNode()
子节点：childNodes();直接子节点返回的是一个节点对象的集合
兄弟节点：上一个兄弟节点：previousSibling 下一个兄弟节点nextSibling

注意：标签之间存在空行时，会出现一个空白的文本节点，要获取节点时一定要注意、

获取节点的方式：
1，根据节点间的层次关系来获取节点
2，通过document对象中的方法来获取节点
getElementById():通过id属性值获取对应的节点对象，如果有多个id值相同时，获取到的是第一个id所属对象，尽量保证id唯一性，返回的是一个对象

getElementsByName(name属性值):通过标签的name属性值获取对象，返回一堆对象，其实是一个对象数组
getElementsByTagName(标签名)：即没有id也没有name时，可以通完标签名来获取节点对象 ，其实也是一个对象数组
大多容器型标签（嵌套的标签的标签）都具备的方法

注意：注释也是文档中的一个节点

注意：当自己在写方法来获取某一篇文档中所有的节点时一定要注意循环中不要调用document.write方法，这样会改变这篇的对象的指向如：
<pre>
function getNodes(){

var str =" ";
for(i = 0; i < document.all.length; i++){
str +=(document.all(i).nodeName+"--"+document.all.length);
//document.write("dd");
}
document.write(str);
}这个函数可以正确的将当前所在的html文档中的所有节点全部写出去
function myGetNodes(){
var len = document.all.length;
for( i=0; i<len ;i++){
//document.write("d");
document.write(document.all(i).nodeName+"==="+document.all.length);
}
}这个函数因为调用了document.write()方法，，改变了原来指向的对象，，它写出的是写出后的文档内的所有节点（如果将此函数与添加在
按钮的onclick事件上，当点击此按钮后会转到另一个页面中，此时它写出的就是这个页面中所有标签）
</pre>

五，window对象
1，window对象中的对象（直接用点调用就可以如：window.history）：

document:hmtl文档对象  history:历史记录对象  location:地址栏对象（url） navigator:浏览器信息对象  screen:屏幕 对象

navigator的属性：appName:浏览器的名称  appVersion:浏览器的版本 platform：获取用户的操作系统。
history的属性：length:获取历史列表中的元素数目（只有这一个）方法：back:从历史列表中装入前一个url forward:从历史列表中装入下一个url go:从历史列表中装入url
location:属性：hostname:设置或获取主机名 host:设置或获取主机（hostname+port） port:获取或设置url关联的端口号 protocol:获取或设置url的协议
href:设置或获取整个url为字符串
screen:属性：avialHeight:获取系统屏幕的工作区域高度，排除 Microsoft? Windows? 任务栏。
availWidth获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
2，方法（可以不用写，因为窗体一开，对象就存在了）：
alert(字符串)：显示包含由应用程序自定义消息的对话框 
close:
confirm(信息):显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。 会返回一个boolean值当按确定时返回true否则相反
moveBy(x,y):移动到距左边x，距上边y的距离 将窗口的位置移动指定 x 和 y 偏移值。
moveTo(x,y):将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。移到到指定的位置
resizeBy(x,y);更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo(x,y);将窗口的大小更改为指定的宽度和高度值。
scrollBy(x,y);将窗口滚动 x 和 y 偏移量。
scrollTo(x,y);将窗口滚动到指定的 x 和 y 偏移量。
prompt(message1,message2):可以输入的对话框 ，message1为提示信息，message2为用户输入的信息，此方法会返回message2(用户输入的信息)当用户输入了信息但是没有点确定，此时也会返回null
open(url,打开的方式（如_blank），要打开的功能)参数都为字符串 返回一个打开usrl窗体的窗体，可以设置窗体的功能和打开方式
setTimeout(code:一个表达式，time:时间)： 在设置的时间内执行此code（广告窗体） 如：window.setTimeout("window.close()",5000)5秒后窗体自动关闭,会返回一个id值
close（）:关闭窗体
setInterval(表达式code，时间time):每隔指定的时间执行指定的表达式，会返回一个id值
clearInterval（id值，setInterval返回的结果）：使用 setInterval 方法取消先前开始的间隔事件。
clearTimeout（id值，setTimeout返回的结果）取消先前用 setTimeout 方法设置的超时事件。
focus():实终让窗体前置。。
3，事件：
onunload:在对象卸载前产即触发 窗体关闭后
onload:浏览器对对象装载后立刻触发的事件 窗体打开时启动
onbeforeunload:在页面被卸载前触发  窗体关闭前

六，window对象中的event对象
1，介绍：代表事件状态，如果事件发生的元素，键盘的状态，鼠标位置和鼠标按钮状态
2，属性：
altKey:设置或获取Alt键的状态
altLeft:设置或获取左键alt键的状态
keyCode:设置或获取与导致事件的按键关联的 Unicode 按键代码。 可以屏蔽键
<b>returnValue=可以设置真假值：当值为false是会取消原来的事件，可以屏蔽键禁止在文本框中输入不符合要求的字母</b>
srcElement:设置或获触发事件的对象 会返回事件源对象

七，
1，制作图形化动态页面的基本思路：
1，定义数据封装的标签，（定义界面）
2，确定事件源
3，注册事件
4，事件处理


2，取消超链接效果的方式（字体默认为16px）：
1，href ="#"
2,href = "javascript:void(0)":启动javascript引擎并加载void(0)这个函数

3，css中overflow样式的使用
overflow:常用的值的visible hidden这两个值，，当高度设置成小于实际事物的高度时，，且overflow值还为hidden,此时浏览器会自动隐藏多余的
那部分。可以利用overflow样式，dl标签，来完成下拉的效果，代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉效果</title>
<style type="text/css" >
.close{
text-align:center;
overflow:hidden;
height:100px;

}
.open{
text-align:center;
overflow:visible;

}
</style>
<script type="text/javascript">
//方式一：通过this来获取当前事件源的对象
function methodOne(node){

//获取当前节点的父节点div
var divnode = node.parentNode;
//alert(divnode.nodeName);
//改变div标签classname的值
if(divnode.className == "close"){

divnode.className = "open";
}
else
divnode.className = "close";

}
//方式二：使用srcElement来获取当前事件源的对象
function methodTwo(){
//获取当前事件源
var imgnode = window.event.srcElement;
// alert(imgnode.nodeName);
//获取它的父节点
var divnode = imgnode.parentNode;
//改变标签的className的值
if(divnode.className == "close")
divnode.className = "open";
else
divnode.className = "close";


}
</script>
</head>


<body>
<div class="close">
<img src="1-130610115A5V0.jpg" align="我的图片。" onclick="changeHeight(this)" />
</div>

</body>
</html>


4,拿触发事件对象的方法：
1，可以使用window.event.srcElement  此属性会返回触发当前事件的对象
2，在注册事件时，可以将this（触发事件的对象引用）做为参数传入到处理事件的函数时，此时函数必须有一个参数进行接收
如：
<script type="text/javascript">
getNode = function(node){

var parentNode = node.parentNode;当点击按钮时，node指向的就是button对象
}
</script>
<html>
<body>
<input type="button" value="按钮" onclick="getNode(this")/>
</boyd>
</html>
5，下拉菜单效果的方式：
1，使用voerflow属性的两个值：visible  hidden
2,使用diplay属性的两个值：none,black


八，创建表格（注：appendChild()方法是向表格尾部添加 ）
注： 当在创建table节点时要指定给其进行一个标识，，以便操作，可以设置id值，，也可以使用tablenode.setAttribute("id","tabid")来进行标识
方式一（依据表格间的层次关系）：
1，使用document.createElement(标签名)就可以创建此标签的对象并返回此对象
2，document.createTextNode(文本信息)：创建一个文本节点并返回此节点的对象
3，使用标签对象的appenChild（标签对象）进行添加，依据表格间的关系进行添加
4，获取要添加在文档中的对象（也就是你要在哪 个标签是进行添加）然后调用appenChild方法将表格table添加进去
代码如下() ：
//创建表格的方式一
function createTableOne(){

//使用with语句，，不会写document
with(document){
//在文本中先创建一个tablea节点
var tablenode = createElement("table");
//tablenode.id = "tableid";设置table的属性值，，方便后期的删除使用如果只是创建并不删除可以不设置
var trnode = document.createElement("tr");
var tdnode = document.createElement("td");
var textnode = createTextNode("单元格一");
//添加元素
tablenode.appendChild(trnode);
trnode.appendChild(tdnode);
tdnode.appendChild(textnode);
var pnode =document.getElementsByTagName("p")[0];
pnode.appendChild(tablenode);
}

}


方式二：
1，创建一个table节点
2，使用table对象中的insertRow()方法来创建一个行对象，返回行对象。此方法是创建tr并添加到table中
3.使用tr对象中的insertCell()方法来列对象，，并返回此对象，，此方法是将创建的td添加到tr 中
4，使用td中的属性innerHTML来进行文本的添加和样式的设置经常使用，属性innerText也可以设置或获取位于对象起始和结束标签内的文本但不能对文本进行样式的设置。
5，添加到指定的对象中
代码：
//创建表格的方式二
function createTableTwo(){

//使用table对象 的中方法
//创建table节点
var tablenode = document.createElement("table");
//给创建的table节点设置一个标识方便操作
tablenode.setAttribute("id","tableid");
//创建tr对象并添加到table对象中,并返回创建的tr对象
       var trnode = tablenode.insertRow();
//创建td对象并添加到tr中，返回td对象
var tdnode = trnode.insertCell();
//在td对象添加文本，，，使用超级方法，可以加入html标签的
tdnode.innerHTML = "<b> 我是现代战争</b>";
//将此表格添加到指定的位置
document.getElementsByTagName("p")[0].appendChild(tablenode);

}

九，，，input对象中type属性值为button时的一个属性disabled = true  当值为true时，只能点击一次，，默认是false

1,拿文本框中的内容：使用 input对象中的value属性来获取值

十，删除表格中的行和列(获取用户输入的信息后可以使用正则进行判断)
1，删除行使用table对象中的deleteRow(index)方法。
步骤：
1，当在创建table节点时要指定给其进行一个标识，，以便操作，可以设置id值，，也可以使用tablenode.setAttribute("id","tabid")来进行标识
2,根据设置的标识来获取table节点对象，，然后进行健壮性的判断并给出相应的提示
3，获取用户要删除的行数，并进行判断表格是否存在此行，使用tablenode.rows.length
4，使用table对象中的deleteRow(index)方法进行行的删除（注意此函数按指定的角标，所以要在用户指定的行数上加1进行传入）
2,删除列，使用tr对象中的deleteCell(index)方法。要注意的是在判断是与表格中的列的长度进行比较（tablenode.rows[0].cells.length)



十一，取出列中的文本可以使用td对象中的innerTest属性来完成，，其实返回值是字符串
鼠标事件：onmouseover:鼠标进入时，onmouseout：鼠标离开后


十二。dom编程思想：
1，定义界面：
通过html的标签将数据进行封装，
2，定义一些静态的样式。
通过css
3,需要动态的完成的和用户的交互。
a,先明确事件源
b,明确事件将事件注册到事件源上
c,通过javascript的函数对象，进行事件的处理
d,在处理过程需要明确被处理区域



注：全局变量会先加载，这样浏览器找不到指定的对象，其值会为空

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流！ ----------------------