JavaScript学习总结（七）
这一讲我们来学习DOM编程（十分重要），有了DOM编程，我们就可以操作任意的HTML元素了。
DOM，文档对象模型
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。 浏览器在解析HTML页面的时候，每遇到一个html标签就会创建一个此标签的对象（任何标签都会有一个对应的对象），当解析完成的时候就会创建一个完整的文档树。使用JavaScript寻找标签结点的时候，我们应当在文档树中获取。而文档树的每一个标签对象都称为Node。 我们可以通过如下的方式获取HTML的所有标签对象：
var allNodes = document.all;
for(var i=0;i<allNodes.length;i++){
alert(allNodes[i].nodeName);
}请记住一个基本原则：我们想要操作哪个标签对象，就要找到对应的属性，看如何来操作这些属性即可。（JavaScript的标签文档可以去百度下载，如果没有也可以加我的QQ1247525776跟我要，广交朋友嘛）。
找结点的方法
想要找HTML标签共有两种方法。 1. 通过标签属性找标签 这种方法的几种寻找方式如下：
document.getElementById("html元素的id")
/*这个方法要注意一点，当我们找到这个标签后，并且想向这个标签中插入内容，使用的方法有两个。
一是innerHtml，使用情况为存在标签体；另外一个是value，使用情况为无标签体，直接设置的是标签的value值。*/
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")练习：实现选择部分商品或者全选商品，并且对选择的商品进行总金额的计算。 下面的代码实际上就是对复选框进行一些列的操作，实现我们平时所看见的全选或者不选的功能，以及最后实现计算总价的功能，仅此而已，没有我们想象的那么复杂。下面直接贴代码。
<script type="text/javascript">
function checkAll(allNode){
var nodes = document.getElementsByName("item");
//实现全选的功能，只需要点击全选，然后循环将所有item的checked（true为选中，false为不选中）属性置为选择状态即可。
for(var i=0;i<nodes.length;i++){
nodes[i].checked = allNode.checked;
}
}
function getSum(){
var nodes = document.getElementsByName("item");
//总金额
var sum = 0;
for(var i=0;i<nodes.length;i++){
if(nodes[i].checked){
sum += parseInt(nodes[i].value);
}
}
alert(sum);
var sumNode = document.getElementById("sumid");
//¥人民币的标识
sumNode.innerHTML = (" ¥"+sum).fontcolor("green");
}
</script>2. 通过关系找标签 学过数据结构与算法的同学会感到非常的亲切。。。。 这里我就默认大家都学过了数据结构与算法，如果你没学过最好马上就学了，因为这部分的用途十分广大。我们这里讲的虽然不是数据结构与算法，但是能够帮助你理解节点之间的关系还是非常有用处的。 父子关系：一个标签可以有多个子标签，一个子标签只能有一个父标签，下面这些只是值，后面没有括号。 还有一点内容，虽然一般情况下，我们会将< script >标签写在外面，但是执行的时候，浏览器会自动将标签挪入< body >标签中， 并且在处理文档的过程中，会将HTML代码中的空文本和注释也当成节点。 那么，我们现在只想要标签对象，如何处理呢？ 实际上，节点还有一个nodeType的属性，标签对象的nodeType均为1，在得到所有的节点之后判断一下这个属性就可以了；还有另外一种处理方式，不常用，就不介绍了。
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素，返回的是一个数组
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点nextSibling 获取当前节点的下一个节点（兄节点）
previousSibling 获取当前节点的上一个节点（弟节点）上面的这些内容相当于一个节点的属性，直接用“.”调用即可
创建与插入节点、设置节点的属性
用到的方法如下：
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置应用如下： 应用这种方法，就可以添加一个按钮了。
function add(){
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按钮"+num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode);
}插入目标元素的位置
elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。
注意： elt必须是oldNode的直接父节点。
elt.removeChild(child) 删除指定的子节点
注意： elt必须是child的直接父节点。应用如下：添加或者删除附件的功能。
<head>
<meta charset="utf-8">
<title>应用：增加附件</title>
</head>
<script type="text/javascript">
//添加附件
function addFile(){
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
//这里直接使用html语言作为插入的内容即可，浏览器依然可以解析出来
tdNode1.innerHTML = "<input type='file'/>";
tdNode2.innerHTML = "<a href='#' onclick='delFile(this)'>删除附件</a> ";
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
//table标签并非tr标签的直接父节点，tr的直接父节点应该是tbody，不信可以自己动手试一下
var tbodyNode = document.getElementsByTagName("tbody")[0];
var lastRow = document.getElementById("lastRow");
//tableNode.appendChild(trNode);
tbodyNode.insertBefore(trNode,lastRow);
}
//删除附件，传入的this表示的是a标签
function delFile(aNode){
var trNode = aNode.parentNode.parentNode;
var tbodyNode = document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
}
</script>
<body>
<table>
<tr id="file">
<td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>
</tr>
<tr id="lastRow">
<td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>
</tr>
</table>
</body>腾讯云开发者
