第4章 第3节 DOM
DOM概述
DOM的官方定义
W3C文档对象模型(DOM)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。W3C DOM提供了一套用于HTML和XML文档的标准对象，以及访问这些文档的标准接口。
文档对象模型(DOM)定义了一种按顺序、层次方式访问文档中各元素的结构化方式，是最流行的用于操作结构化文档HTML和XML的API。
DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现。
接口的概念
接口是一种描述，而不是具体的实现，在支持DOM的环境中对接口的描述进行实现。浏览器中，接口的实现对应于浏览器中的各种DOM对象，编写程序时，就是使用这些DOM对象。
标准DOM的级别
DOM分类
DOM按其内容可分为5个部分
- 核心DOM：是用于XML与HTML的共用接口；
- XMLDOM：XML专用接口；
- HTML DOM：HTML专用接口；
- DOM事件模型：定义DOM能够响应的事件；
- CSS DOM：CSS专用接口
HTML节点树
HTML文档是一种树状的结构化文档、各标记之间是一种树状的层次关系。
说明
- 结构树反映了各HTML元素之间的层次关系。<HTML>包含<head>和’<body>,<head>包含<title>；<body>又包含<h1>和<table>等
- DOM就通过这种树结构的层次关系，来定位、访问与控制文档中各元素及其内容。
节点术语
- 结构图中的每一项称为节点(Node)，树状结构叫节点树。
- 父节点：某节点上端的节点(parentNode)
- 子节点：包含在某个节点下的节点(childNode)
- 兄弟节点：位于同一层次的节点称为兄弟节点。
DOM HTML节点类型
概述
DOM中定义了12种节点类型，有些类型是XML专有的，与HTML相关的节点类型如下图所示。
说明
在一个DOM树中，只有一个Document类型的节点，该节点是整个文档的根，代表了当前文档。
Element节点，对应于HTML中的各种标记，Element节点是Document节点的子节点，它们对应的元素对象均为document对象的子对象。
通过对HTML节点树的描述，浏览器为各节点建立对应的对象，各对象与节点树中的节点具有层次关系，通过这些对象，访问与控制文档中各内容
核心DOM
结构图说明
- Node接口是所有其它接口的顶层接口，Node中定义的属性和方法被其他接口继承，也就是说，Node接口中定义了适用于所有节点的属性和方法。
- 在浏览器中，Node接口并不对应于具体的浏览器对象，该接口中定义的属性和方法直接通过具体的节点对象进行调用。例如通过Document类型节点的document对象节点调用。
- 提示：节点对象指节点所对应的浏览器对象。
核心DOM——访问节点
通过Node节点定义的属性和方法，可以访问HTML节点树中的各节点，包括HTML标记以及标记的属性。通过这些属性和方法，可以实现对HTML文档的操作。
在访问节点树中节点时，起点是document对象。
实例——访问节点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//输出<table>节点的名称
function show_node_name() {
var node_html = document.firstChild;
var node_body = node_html.lastChild;
var node_table = node_body.childNodes[1];
alert(node_table.nodeName);
}
//输出table下的子节点
function show_table_child() {
var node_body = document.body;
var node_table = node_body.childNodes[1];
var node_tbody = node_table.childNodes[1];
var child_nodes = node_tbody.childNodes;
var len = child_nodes.length;
var str = node_table.nodeName + "共" + len + "个子节点：";
str += child_nodes[0].nodeName + "和" + child_nodes[1].nodeName;
alert(str);
}
//修改<td>单元格内容
function change_td_content() {
var node_body = document.body;
var node_table = node_body.childNodes[1];
var node_tbody = node_table.childNodes[1];
var node_tr = node_tbody.firstChild;
var node_td = node_tr.childNodes[1];
var node_td_text = node_td.firstChild;
var old_value = node_td_text.nodeValue;
node_td_text.nodeValue = "学院";
alert("原内容：" + old_value);
}
</script>
</head>
<body>
<table border="1" width="400">
<tr>
<td>表格单元11</td>
<td>表格单元12</td>
</tr>
<tr>
<td>表格单元21</td>
<td>表格单元22</td>
</tr>
</table>
<form name="form1">
<input type="button" value="节点名称" onclick="show_node_name()" />
<input type="button" value="子节点" onclick="show_table_child()" />
<input type="button" value="修改单元格内容" onclick="change_td_content()" />
</form>
</body>
</html>
使用调试方式
使用调试方式，可以看出每个元素有哪些相关参数，和子节点
标题核心DOM——处理属性节点
实例：节点属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点属性操作</title>
<script type="text/javascript">
//取得div节点
function getDivNode()
{
var node_body = document.body;
var node_div = node_body.firstChild;
return node_div;
}
//改变层的外观
function change_div_style()
{
var node_div = getDivNode();
var str = "width:600px;margin:0px auto;border:1px solid #cccccc;padding:10px 20px;background-color:#f0f0f0;";
node_div.setAttribute("style",str);
}
//移除层的外观
function remove_div_style()
{
var node_div = getDivNode();
node_div.removeAttribute("style");
}
//改变标题外观
function change_h2_style()
{
var node_div = getDivNode();
var node_h2 = node_div.firstChild;
var str = "color:#ff0000;font-size:28px;";
node_h2.setAttribute("style",str);
}
//移除标题外观
function remove_h2_style()
{
var node_div = getDivNode();
var node_h2 = node_div.firstChild;
node_h2.removeAttribute("style");
}
//改变内容外观
function change_p_style()
{
var node_div = getDivNode();
var node_p = node_div.childNodes;
var str = "font-size:16px;line-height:24px;color:#0000ff;";
for(var i=1;i<node_p.length;i++)
{
node_p[i].setAttribute("style",str);
}
}
//移除内容外观
function remove_p_style()
{
var node_div = getDivNode();
var node_p = node_div.childNodes;
for(var i=1;i<node_p.length;i++)
{
node_p[i].removeAttribute("style");
}
}
</script>
<style type="text/css">
/*固定右层*/
.set{
width:220px;
border:1px solid #cccccc;
background-color:#f0f0f0;
padding:10px;
position:fixed;
right:100px;
top:50px;
}
</style>
</head>
<body><div><h2>中国以航天速度打造太空强国</h2><p>【参考消息网12月22日报道】 俄罗斯自由媒体网12月18日发表了题为《下一步是火星——中国在太空领域挑战美国》的文章，作者为俄罗斯《劳动报》观察家米哈伊尔·莫罗佐夫，文章认为，莫斯科时间12月16日，携带月壤的嫦娥五号返回器在内蒙古安全着陆。中国成为继苏联和美国之后第三个取回月球样本的国家。中国借此展现出不输于美俄的最高科技水平。俄罗斯人眼下只能仰头观望美中这两个主要经济和技术强国之间的这场竞争了。全文摘编如下：中国人并不讳言，这次探月之旅不仅旨在研究往返月球的所有飞行阶段，而且是为载人登月做准备。月壤对于未来建造可居住月球基地的项目很有帮助。这些都属于中国的探月计划。</p></div>
<div class="set">
<input type="button" value="改变层的外观" onclick="change_div_style()" />
<input type="button" value="移除层的外观" onclick="remove_div_style()" /><br />
<input type="button" value="改变标题外观" onclick="change_h2_style()" />
<input type="button" value="移除标题外观" onclick="remove_h2_style()" /><br />
<input type="button" value="改变内容外观" onclick="change_p_style()" />
<input type="button" value="移除内容外观" onclick="remove_p_style()" />
</div>
</body>
</body>
</html>
核心DOM——创建与操作节点
实例：添加和删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function get_tr_node()
{
var node_body = document.body;
var node_table = node_body.firstChild;
var node_tbody = node_table.firstChild;
var node_tr = node_tbody.firstChild;
return node_tr;
}
//添加单元格
function add_td_node(value)
{
var node_tr = get_tr_node();
//创建单元格节点
var node_td = document.createElement("td");
//创建文本节点
var node_td_text = document.createTextNode(value);
//将文本节点追加到单元格节点中
node_td.appendChild(node_td_text);
/*********************** 如果是“编号”单元格，则添加到前面********************/
if(value == "编号")
{
//设置新节点属性
node_td.setAttribute("style","color:#ff0000");
//找到tr下所有的td
var node_tds = node_tr.childNodes;
//将新td追加到第1个td前
node_tr.insertBefore(node_td,node_tds[0]);
}else //如果是其它单元格，则添加到后面
{
//设置单元格属性
node_td.setAttribute("style","color:#0000FF");
//将单元格追回到tr的最后
node_tr.appendChild(node_td);
}
}
//移除单元格
function remove_td(value)
{
var node_tr = get_tr_node();
var node_tds = node_tr.childNodes;
if(value == "first")
{
//移除第一个单元格
node_tr.removeChild(node_tds[0]);
}else
{
//移除最后一个单元格
node_tr.removeChild(node_tds[node_tds.length-1]);
}
}
//给表格增加一个标题
function add_h2_node()
{
//取得表格节点
var node_body = document.body;
var node_table = node_body.firstChild;
//创建h2节点
var node_h2 = document.createElement("h2");
//创建文本节点
var node_h2_text = document.createTextNode("2018年数字媒体技术专业学生成绩表");
//将文本节点追回到h2节点中
node_h2.appendChild(node_h2_text);
//将h2节点追加到table节点前
node_table.parentNode.insertBefore(node_h2,node_table);
}
</script>
<style type="text/css">
form{padding-top:10px;}
td{padding:3px;}
</style>
</head>
<body><table border="1"><tr><td>姓名</td><td>性别</td></tr></table>
<form name="form1">
<input type="button" value="添加年龄" onclick="add_td_node('年龄')" />
<input type="button" value="添加学历" onclick="add_td_node('学历')" />
<input type="button" value="添加毕业院校" onclick="add_td_node('毕业院校')" />
<input type="button" value="添加编号" onclick="add_td_node('编号')" /><br />
<input type="button" value="移除最后一个单元格" onclick="remove_td('last')" />
<input type="button" value="移除第一个单元格" onclick="remove_td('first')" />
<input type="button" value="添加表格标题" onclick="add_h2_node()" />
</form>
</body>
</html>
实例：随机显示小星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机显示小星星</title>
<script type="text/javascript">
var x_left = 0;
var x_right = 0;
var y_top = 0;
var y_bottom = 0;
var img_width_min = 10;
var img_width_max = 80;
function init()
{
//取得body对象，设置网页背景色
body_node = document.body;
body_node.bgColor="#000000";
//取得网页的宽度
x_right = window.innerWidth-img_width_max;
y_bottom = window.innerHeight-img_width_max;
//调用showStar()函数
setInterval("showStar()",1000);
}
//取得随机数
function getRandomNum(num1,num2)
{
return Math.floor(Math.random()*(num2-num1))+num1;
}
//点击星星消失
function removeStar(obj)
{
document.body.removeChild(obj);
}
//显示星星
function showStar()
{
var node_img = document.createElement("img");
var x = getRandomNum(x_left,x_right);
var y = getRandomNum(y_top,y_bottom);
var width = getRandomNum(img_width_min,img_width_max);
var str = "position:absolute;left:"+x+"px;top:"+y+"px;width:"+width+"px;";
node_img.setAttribute("src","images/xingxing.png");
node_img.setAttribute("style",str);
node_img.setAttribute("onclick","removeStar(this)");
body_node.appendChild(node_img);
}
</script>
</head>
<body onload="init()">
</body>
</html>
