|
.DOM:Document Object Model文档对象模型是用于HTML和XML文档的应用程序API.DOM提供了结构化的文档表现形式，
允许程序修改文档的内容和视觉表现。从本质上说，其把网页和脚本或编程语言连接了起来。
2.对于窗口中的脚本，默认引用的是当前窗口的“window”对象。如果需要访问其他框架或窗口的DOM内容，应当显式
的调用窗口对象。
eg:对于如下页面：
| 代码如下 |
复制代码 |
//调用如下：
window.parent.frames[1].document.write("hutia");
parent.frame2.document.getElementById("hutia").value;
|
窗口对象的子对象有"clientInfomation"(客户端信息),"clipboardData"(剪贴板),"document","event","location",
"navigator(浏览器)"等等，各个对象又均有各自的属性,方法，事件和子对象集合。例如:文档(document)对象就有
主体(body)作为子对象，body对象又有页面中的各个元素作为子对象，此类对象类似于HTML标记的层层包含，
构成了HTML页面的文档对象模型树。
3.document对象是HTML页面所有HTML内容的根节点。HTML页面中的所有元素在DOM中均被对象化。
DOM模型的内容中的对象按类别来说分为：
a.HTML元素对象。例如
..b.属性对象。例如
中的href="www.111cn.net"形成的对象。c.注释对象，即 4.代表HTML元素的对象又被称为节点(node),DOM模型中，节点有两种类型：元素节点和文本节点。网易其中a元素形成了一个元素节点。网易为一个文本节点。
5.获取浏览器信息--"navigator"对象。
熟悉"navigator"对象的各种属性就行：navigator.appName....
6.操作剪切板------"clipboardData"对象。
此对象没有属性，只有3个方法：
clearData用于清空剪贴板中的数据：clipboardData.clearData([sDataFormat]);
其中sDataFormat为需要清空的剪贴板数据类型.
getData用于从剪贴板中获取数据：sRetrieveData=object.getData(sDataFormat);
setData用于将数据放置到剪贴板中：sRetrieveData=object.setData(sDataFormat);
7.操作浏览器的历史记录---history对象
history对象只有一个属性：length，是指返回当前历史记录的长度。history对象的方法有：back,forword,go.
前两个无需参数，go的语法为:history.go(vLocation);vLocation可为字符串或者整数。
eg:你输入的信息有误，请
返回上一页重新填写。
8.获取当前页面的URL---location对象。
location对象有方法有:
assign方法将页面跳转到一个新的URL地址：location.assign(strURL);
reload方法用户刷新页面：location.reload();
replace方法用户将页面跳转到一个新的URL地址：location.replace(strURL);
9.读取用户的屏幕分辨率----screen对象。
eg：
| 代码如下 |
复制代码 |
//将窗口最大化。
function maximizeWindow(){
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
}
//使窗口相对屏幕居中。
function centerWindow(width,height){
window.moveTo((screen.availWidth-width)/2,(screen.availHeight-height)/2);
window.resizeTo(width,height);
}
|
10.使用DOM的documnt对象
a.document对象特有的属性。
最重要的是cookie前面已讲过。
documentElement属性返回html代表的对象，所以window.document.documentElement.outerHTML来获得整个HTML文档的所有内容。
domain属性返回文档所在的域名
readyState属性返回文档的当前载入状态。
referrer属性可以获得当前页面的引用页面。
b.document对象的方法
1.open方法
open([uURL][,sName][,sFeatures][,bReplace]);
uURL默认为"text/html".sName为需要打开的文档所在的窗口。其他参数与window中的open方法类似。
2.close方法用来关闭文档流对象。
3.writeln和write类似，都是向当前的文档流中写入相应的HTML内容，区别是writeln会附加一个回车。
4.execCommand方法---执行打印，全选等----提供了一个控制浏览器行为的接口。
bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])
sCommand为需要执行的命令名称。bUserInterface默认为false标示此命令执行时是否显示用户界面接口。
| 代码如下 |
复制代码 |
|
eg:
//全选页面内容
function selectAll(){
document.execCommand("SelectAll",false);
}
//弹出另存为对话框
function saveAs(){
document.execCommand("SavaAs",true,"C:\sample/htm");
}
|
11.插入和删除元素。
a.在容器元素的末尾插入元素---appendChild方法。
container.appendChild(objSub);//objSub必选为需要插入的子元素。此方法会将objSub元素插入到调用该方法的容器元素的最后。
注意：在元素生成后，可以修改其属性。在插入文档后，一些属性变为只读，对其进行赋值会导致错误。
应用：添加新链接
| 代码如下 |
复制代码 |
|
function insertLink(){
var newLink = document.createElement("a");
newLink.innerHTML = $("txtDesc").value;
newLink.href = $("txtAddr").value;
$("div1").appendChild(newLink);
}
|
b.在指定的元素前插入元素---insertBefor方法
container.insertBefore(objSub [, oChildNode]);//objSub为需要插入的子元素。oChildNode为需要将子元素插入的位置后的元素。
效果:将元素objSub插入container元素的子元素oChildNode前。
c.删除节点---removeChild方法
| 代码如下 |
复制代码 |
| container.removeChild(objSub); |
再取一个例子，注意，BODY下的结点深度为2。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("nodeTest");
var myNode = node.getElementsByTagName("DIV");
myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
<div id="nodeTest">
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</div>
</body>
</html>
2、动态创建与插入结点
1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，
它返回的是这个结点的引用。
2)、在body的尾部插入结点用document.body.appendChild(object)，为了容易理解，下面这个示例，我用了IE专有的属性
object.outerHTML，得到一个该元素的HTML标签内容（包括自身），这样会更容易看到效果。
| 代码如下 |
复制代码 |
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
node.innerHTML = strText;
document.body.appendChild(node);
alert("插入元素后的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html> |
3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode])，oNewNode为一个我们创建的结点，oChildNode是可选的，为 object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例
| 代码如下 |
复制代码 |
|
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
|
3、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。
| 代码如下 |
复制代码 |
|
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML： " +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML： " +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>
|
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 |
