DOM高级编程（Document object Modal）
DOM概述
- DOM－Document Object Modal ，它是W3C国际组织的一套Web标准
- DOM是一种与浏览器、平台、语言无关的接口
- Dom认为：html文档中每个成员都是一个节点，根据节点的不同，可分为：
- 文档节点（document）
- 元素节点 （element）
- 属性节点 （attribute）
- 文本节点 （text）
4种节点，文档节点只有一个
DOM是这样规定的：
- 整个文档是一个文档节点
- 每个HTML标签都是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每个HTML属性都是一个属性节点
- 注释属于注释节点
HTML DOM中，document对象代表整个HTML文档，可用来访问页面中的所有元素。document对象是window对象的一部分
document对象在window对象中的示意图
document对象
- document对象代表浏览器窗口中加载的整个HTML文档
- 常用的属性：
| 名称 | 描述 |
| bgColor | 页面的背景颜色 |
| documentElement | 获取对文档根结点（<body>）的引用 |
| title | 设置或获取页面的标题 |
例：
<script>
//获取系统当前时间
var now=new Date();
//获取时间的小时数
var hour=now.getHours();
if(hour<12){
document.bgColor="red";
}else{
document.bgColor="yellow";
}
</script>- 常用方法：
| 名称 | 描述 |
| write | 用于向HTML文档中动态写入内容 |
| createElement | 创建代表某个HTML元素的对象 |
| getElementById | 获取指定ID的HTML页面元素对象 |
| getElementsByName | 获取一组指定name的HTML页面元素对象 |
| getElementsByTagName | 返回所有指定标签名的HTML页面元素对象 |
document对象访问页面元素的常用方式有四种：
- document.all.页面元素名称;
- document.表单名.元素名称;
- document.getElementById("ID名称");
- document.getElementsByName("元素名称");
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="frm" action="">
<input type="text" name="username" id="username" value="aaa" />
<input type="text" name="username" id="name1" value="bbb" />
<input type="text" name="username" id="name2" value="ccc" />
<select name="">
<option value="">111</option>
<option value="">222</option>
</select>
</form>
<script>
document.write("<font color=red>222</font>");
//从所有元素中按照元素的名称获得
console.log(document.all.username.value);
//按照层级关系 document>form表单>表单元素 按照name
console.log(document.frm.username.value);
//获得名称为name的一组元素的值(数组)
console.log(document.getElementsByName("username")[2].value);
//getElementsByTagName和getElementsByName得到的都是数组
console.log(document.getElementsByTagName("input").length);
</script>
</body>
</html>节点信息 Node
- XML DOM 把 XML DOM 文档视为一棵节点树 (node-tree)
- 树中的所有节点彼此之间都有关系
- 例如：
- 常用节点属性
| 名称 | 描述 |
| childNodes | 当前节点的所有子节点 |
| firstChild | 当前节点的所有子节点中第一个节点 |
| lastChild | 当前节点的所有子节点中最后一个节点 |
| parentNode | 当前节点的父节点 |
| nodeValue | 节点值 |
| nodeName | 节点的名称 |
| nodeType | 节点的类型 |
| getAttributeNode | 得到属性节点 |
- 常用节点类型
| 类型 | 值 | 描述 |
| 元素节点 | 1 | HTML标签 |
| 属性节点 | 2 | HTML标签中的属性 |
| 文本节点 | 3 | 文本信息 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onl oad="test()">
<div id="first">第一个节点</div>
<br/>
<div id="last">最后一个节点</div>
</body>
<script type="text/javascript">
function test(){
alert(document.body.firstChild.nodeType);
alert(document.body.firstChild.nodeValue);
alert(document.body.lastChild.nodeType);
alert(document.body.lastChild.nodeValue);
}
</script>
</html>动态添加和删除节点
- document文档对象可以创建、添加、删除DOM支持的任何类型的节点
- 使用document.createElement创建节点
- document.createElement的功能是创建一个指定标签名的元素节点，标签名可以是任何名字，包括自定义的标签
<script language="javascript">
//创建一个新的元素节点
var node=document.createElement("div");
//修改元素节点的内容
node.innerHTML="这是一个新创建的节点";
</script>
- 使用appendChild(node)将节点追加到所有子节点的末尾
function insertNode (strText) {
var node = document.createElement("div");
node.innerHTML = strText;
//在body元素下添加一个子元素
document.body.appendChild(node);
}
- 使用insertBefore(newNode,node)将节点newNode插入到节点node之前
function insertNode (strText) {
//创建一个新的元素节点
var node = document.createElement("div");
//获取要插入的节点位置
var oldNode = document.getElementById("oldNode");
//设置新的元素节点的内容
node.innerHTML = strText;
//node节点插入在oldNode节点之前
document.body.insertBefore(node,oldNode);
}
- 使用removeChild删除节点
function removeCreateNode() {
var node = document.getElementById("textNode");
//这里的parentNode表示当前节点node的父节点
node.parentNode.removeChild(node);
}
innerHTML属性
- innerHTML是DOM节点的一个属性，它表示节点的开始标签与结标签之间的内容
innerHTML和innerText的区别：
innerHTML可以解析或得到html标签
innerText只能获得文本
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="imgContainer">
<img src="images/topHat.gif"/>
</div>
<input type="button" value="点我创建图片节点" onclick="createImg()"/>
</body>
<script>
function createImg(){
var container=document.getElementById("imgContainer");
// container.innerHTML="<img src='img/图片.jpg'/>";
container.innerHTML="<img src='图片地址'/>";
}
</script>
</html>DOM学习重点：
1.获得页面元素的方法
获得单个元素（最常用）
document.getElementById();
获得多个元素
document.getElementsByName();
document.getElementsByTagName();
注意:获得的是一个数组
2.创建/删除 节点
创建节点:
var testNode=document.createElement(“节点名称”);
testNode.value/innerHTML= “value值或者标签”;
document.body.appendChild(testNode);
删除节点:
var testNode = Document.getElementById(“元素id”);
//通过父节点删除自己
testNode.parent.removeChild(testNode);
动态添加行案例
需求分析：点击添加一行，上方表格添加一行我们填写的数据（没有添加样式）
HTML源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 动态添加行 -->
<body>
<table id="t1" border="1px" cellspacing="0">
<tr>
<th>商品名称</th>
<th>数量（件）</th>
<th>单价（元）</th>
<th>运费（元）</th>
<th>合计</th>
</tr>
<tr>
<td>鼠标</td>
<td>2</td>
<td>55</td>
<td>10</td>
<td>120</td>
</tr>
<tr>
<td>键盘</td>
<td>3</td>
<td>80</td>
<td>15</td>
<td>255</td>
</tr>
</table>
<br />
<form>
<input type="button" value="添加一行" onclick="add()" /><br />
商品名称：<input type="text" id="productName" value="" /><br />
商品数量：<input type="number" id ="productNum" value="" /><br />
商品单价：<input type="number" id="productPrice" value=""/><br />
商品运费：<input type="number" id="productRunMoney" value=""/><br />
</form>
</body>
<script>
//封装一个返回值为document.getElementById()的函数，方便使用
function $(obj){
return document.getElementById(obj);
}
//添加一行
function add(){
//创建tr标签元素对象
var trNode=document.createElement("tr");
//使用innerHTML进行内容拼接（可以拼接标签）
trNode.innerHTML=
"<td>"+$("productName").value+"</td>"+
"<td>"+$("productNum").value+"</td>"+
"<td>"+$("productPrice").value+"</td>"+
"<td>"+$("productRunMoney").value+"</td>"+
"<td>"
+(parseInt($("productNum").value)*parseInt($("productPrice").value)+parseInt($("productRunMoney").value))+
"</td>";
//将新创建的tr对象元素添加到table元素下方
$("t1").appendChild(trNode);
}
</script>
</html>