本文介绍了DOM（文档对象模型）的概念及其在操作HTML和XML文档中的应用。详细解释了DOM如何将文档转换为对象树，使开发者能够通过JavaScript来更改文档的内容、结构和样式。此外，还介绍了DOM的不同级别及常用方法。
*01-DOM(概述)
DOM:Document Object Model(文档对象模型)
用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。
封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。
因为对象的出现就可以有属性和行为被调用。
文档对象模型
文档：标记型文档。
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。
标记型文档(标签，属性，标签中封装的数据).
只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档：html xml
DOM这种技术是如何对标记型文档机型操作的呢？
要操作标记型文档必须对其进行解析。
DOM技术的解析方式：将标记型文档解析一棵DOM树，并将树中的内容都封装成节点对象。
页面的动态变化也是依靠DOM技术的。
*02-DOM(DOM解析的特点)
*03-DOM(DOM三级模型)
*04-DOM(DHTML概述)
*05-DOM(BOM&Navigator对象&History对象)
浏览器本身也可以具备动态效果。
BOM：browser object model
浏览器对应的对象就是windows对象。
js如果处理的事件多就放在head里面，少的话，可以定义在body里面。
*06-DOM(Location对象)
地址栏：http:\\
和java中的url相似
location属性既可以获取也可以设置。
*07-DOM(window常见方法_1)
*08-DOM(window常见方法_2)
close&open、
过几秒自动关闭广告。
新开的窗口可以自动关闭。
关闭原始窗口会弹出提示对话框。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
演示window中的常见方法。
-->
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
var timeid;
function windowMethodDemo(){
// var b = confirm("你真的确定要点击吗？");
// alert("b="+b);
// setTimeout("alert('time out run')",4000);
timeid = setInterval("alert('interval run')",3000);
}
function stopTime(){
clearInterval(timeid);
}
function windowMove(){
// moveBy(10,10);
// moveTo(40,40);
for (var x = 0; x < 700; x++){
moveBy(20, 0);
moveBy(0, 20);
moveBy(-20,0);
moveBy(0,-20);
}
}
function windowOpen(){
// open("ad.html","_blank","height=400,width=400,status=no,toolbar=no,menubar=no,location=no");
// c8lose();
}
</script>
<input type="button" value="演示window对象的方法" onclick="windowOpen()"/>
<input type="button" value="停止" onclick="stopTime()"/>
</body>
</html>
*09-DOM(window常见事件)
常见事件：
onload = function(){windows.status = "ssss"};
*10-DOM(练习-广告弹窗)
*11-DOM(document获取节点byId)
<!--
document对象的演示。
该对象将标记型文档进行封装。
该对象的作用，是对可以标记型文档进行操作。
最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。
要想获取节点，必须要先获取到节点所属的文档对象document。
所以document对象最常见的操作就是获取页面中的节点。
获取节点的方法体现：
1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。
2，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
3，getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。
凡是带s返回的都是数组。
-->
1:表示标签型节点
null:表示这个节点是封装数据的，本身没有值。
文本节点有值。
*12-DOM(document获取节点byName)
--，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
文本标签里面的name和value属性。其中value可以不写。
*13-DOM(document获取节点byTagName)
---getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。
新窗口打开的属性：TAGET属性。
*14-DOM(document获取节点byTagName_2)
/*
* 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。
* 当然是要获取其中被操作的超链接对象啊。
* 可是通过document获取超链接，拿到的是页面中所有的超链接节点。
* 只想获取一部分该如何办呢？
* 只要获取到被操作的超链接所属的节点即可。
*
* 在通过这个节点获取到它里面所有的超链接节点。
*
*/
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode = document.getElementById("newslink");
//通过对div对象方法的查找发现它也具备getElementsByTagName方法。
//记住：所有的容器型标签都具备这个方法。在该标签范围内获取指定名称的标签。
var aNodes = divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length; x++){
// alert(aNodes[x].innerHTML);
aNodes[x].target = "_blank";
}
}
</script>
<input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()" />
<div id="divid">这是一个div区域</div>
<input type="text" name="user" />
<a href="http://www.sina.com.cn">新浪网站11</a>
<a href="http://www.SOHU.com.cn">新浪网站22</a>
<div id="newslink">
<a href="http://www.163.com.cn">新闻链接1</a>
<a href="http://www.164.com.cn">新闻链接2</a>
<a href="http://www.itcast.com.cn">新闻链接3</a>
</div>
</body>
*15-DOM(通过节点层次关系获取节点)
获取节点的另一种方式，
表格体 默认是tboy，不写也有的。
火狐和IE内核不一样。DOM解析也不一样。
火狐会认为在Table后面如果加了一个回车，就会认为是一个文本，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
通过节点的层次关系获取节点对象。
关系：
1，父节点: parentNode:对应一个节点对象。
2，子节点：childNodes:对应一个节点集合。
3，兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
-->
<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点。
var tabNode = document.getElementById("tabid");
//获取父节点。parentNode
// var node = tabNode.parentNode;
// alert(node.nodeName);//body
//获取子节点。childNodes
// var nodes = tabNode.childNodes;
// alert(nodes[0].childNodes[0].nodeName);
//获取兄弟节点。
//上一个。
// var node = tabNode.previousSibling;
// alert(node.nodeName);
// var node = tabNode.nextSibling.nextSibling;
// alert(node.nodeName);
// 尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
// 会解析出标签间的空白文本节点
}
</script>
<input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()" />
<div>div区域</div>
<span>span区域</span>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<span>span区域11</span>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<a href=''>一个超链接</a>
</body>
</html>
*16-DOM(节点操作-创建并添加_1)
*17-DOM(节点操作-创建并添加_2)
想要创建添加一个按钮（标签）、
==========
//通过另一种方式完成添加节点。
*18-DOM(节点操作-删除节点)
removeNode(true)；
*19-DOM(节点操作-替换&克隆节点)
3节点替换1节点
需求，3不动
方法：cloneNode
--------------小结-----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
div{
border:#00ccff 1px solid;
width:200px;
padding:30px;
margin:10px;
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
</style>
</head>
<body>
<script type="text/javascript">
//创建并添加节点。
//需求：在div_1节点中添加一个文本节点。
function crtAndAdd(){
/*
* 1，创建一个文本节点。
* 2，获取div_1节点。
* 3，将文本节点添加到div_1节点中。
*/
//1, 创建节点。使用document中的createTextNode方法。
var oTextNode = document.createTextNode("这是一个新的文本 ");
//2，获取div_1节点。
var oDivNode = document.getElementById("div_1");
//3，将文本节点添加到div_1节点中。
oDivNode.appendChild(oTextNode);
}
//需求：在div_1中创建并添加一个按钮节点。
function crtAndAdd2(){
//1,创建一个按钮节点。
var oButNode = document.createElement("input");
oButNode.type = "button";
oButNode.value = "一个新按钮";
//2，获取div_1节点。
var oDivNode = document.getElementById("div_1");
//3，将按钮节点添加到div_1节点中。
oDivNode.appendChild(oButNode);
}
//通过另一种方式完成添加节点。
function crtAndAdd3(){
/*
* 其实是使用了容器型标签中的一个属性。innerHTML.
* 这个属性可以设置html文本。
*/
//1，获取div_1节点。
var oDivNode = document.getElementById("div_1");
// oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";
oDivNode.innerHTML = "<a href='http://www.163.com'>有个超链接</a>";
}
// =======================
//需求将div_2节点删除。
function delNode(){
//1,获取div_2节点。
var oDivNode = document.getElementById("div_2");
//2,使用div节点的remvoeNode方法删除。
// oDivNode.removeNode(true);较少用。
//一般使用removeChild方法。 删除子节点。
//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
oDivNode.parentNode.removeChild(oDivNode);
}
//需求：用div_3节点替换div_1节点。
function updateNode(){
/*
* 获取div-3和div-1.
* 使用replaceNode进行替换。
*/
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
// oDivNode_1.replaceNode(oDivNode_3);
// 建议使用replaceChild方法。
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
//需求：希望用div_3替换div-1，并保留div-3节点。
//其实就是对div_3进行克隆
function cloneDemo(){
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
var oCopyDiv_3 = oDivNode_3.cloneNode(true);
// oDivNode_1.replaceNode(oDivNode_3);
// 建议使用replaceChild方法。
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
}
// firstNode = childNodes[0];
// lastNode = childNodes[childeNodes.length-1];
</script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<input type="button" value="克隆节点" onclick="cloneDemo()"/>
<hr/>
<div id="div_1">
</div>
<div id="div_2">
好好学习，day day up！
</div>
<div id="div_3">
div区域演示文字
</div>
<div id="div_4">
节点的增删改查
</div>
</body>
</html>
DOM文档模型2010版
扫一扫
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
