DOM文档对象模型解析-优快云博客

第六章 DOM文档对象模型

第一节 DOM概念

DOM: 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM编程: 使用js访问DOM对象中的节点，进行节点的创建，删除，修改操作。

DOM树中的节点彼此拥有的层级关系类似树。

在DOM中，有如下的关系：

父节点(parent)，子节点(child)，兄弟节点(sibling)

html是整个树的根节点，没有父节点
除根节点外，每一个节点都有父节点
一个节点可以有多个子节点
同一个父节点的节点互为兄弟节点

第二节常用的DOM方法和属性

方法	说明
getElementById	根据id获取元素
getElementsByTagName	根据标签名获取元素数组
getElememtsByClassName	根据类样式名获取元素数组
getElementsByName	根据元素的name属性查找元素数组
createElement	创建元素节点
appendChild	在当前元素上添加子节点
removeChild	从当前元素中移除子节点
querySelectorAll	根据（类）id选择器选择元素数组

属性	说明
parentNode	当前元素的父节点
childNodes	当前元素的子节点数组
firstChild	当前子节点中的第一个节点
lastChild	当前子节点中的最后一个节点
nodeValue	节点值
nodeName	节点名称
nodeType	节点类型：1代表元素；2代表属性节点；3代表文本节点
children	返回当前元素的子元素节点
firstElementChild	返回当前元素的第一个子元素节点
lastElementChild	返回当前元素的最后一个元素节点
getAttributeNode("属性名")	获取元素属性节点例如getAttributeNode（"id"）获取元素的id

第三节 DOM实例

1.实现微博的广播效果

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  .con
  {
	height:200px;
	border:1px solid #E1E2E6;
	margin-top:5px;
  }
  </style>
  <script>
	function add(){
	var condiv=document.createElement("div");
	condiv.innerHTML=document.getElementById("content").innerHTML;
	condiv.className="con";
	document.getElementById("bd").appendChild(condiv);
	}
  </script>
 </head>
 <body>
  <textarea id="content"></textarea>
  <br/>
  <input type="button" value="广播" οnclick="add()"/>
  <hr/>
<div id="bd"></div>
 </body>
</html>

2.购物车

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/html" id="tem">
  <tr>
	<td><input type="checkbox" name="ckone" />
	</td>
	<td>temname</td>
	<td>temprice</td>
	<td>count</td>
	<td name="sum">zongjia</td>
  </tr>
  </script>
  <script>
  function sum()
  {
	var arrSum=document.getElementsByName("sum");
	var psum=0;
	for (var i=0;i<arrSum.length;i++)
	{
		psum+=parseFloat(arrSum[i].innerHTML);
	}
	document.getElementById("sum").innerHTML="合计："+psum+"￥";
  }
  function add()
  {
	document.getElementById("tbd").innerHTML+=document.getElementById("tem").innerHTML.replace("temname",document.getElementById("gdName").value).replace("temprice",document.getElementById("price").value).replace("count",document.getElementById("count").value).replace("zongjia",Number(document.getElementById("price").value)*Number(document.getElementById("count").value));
	sum();
  }
  function selAll()
  {
	for (var i=0;i<document.getElementsByName("ckone").length;i++)
	{
		document.getElementsByName("ckone")[i].checked=document.getElementById("selectAll").checked;
	}
  }
  function del()
  {
	  var a=document.getElementsByName("ckone");
	for (var i=a.length-1;i>=0;i--)
	{
		if (a[i].checked)
		{
			a[i].parentNode.parentNode.remove();
		}
	}
	sum();
  }
  function faselect()
  {
	var a=document.getElementsByName("ckone");
	for (var i=a.length-1;i>=0;i--)
	{
		a[i].checked=!a[i].checked;
	}
  }
  </script>
 </head>
 <body>
 <fieldset>
 <legend>添加商品</legend>
 商品名称：<input type="text" name="" id="gdName"/>
 商品价格：<input type="text" name="" id="price"/>
 商品数量：<input type="number" name="" id="count" min="1" max="99"/>
 <input type="button" value="添加" οnclick="add()"/>
 </fieldset>
 <hr/>
 <h3>商品表</h3>
 <div>
  <table border='1' width="600">
  <thead>
	<tr>
		<th><input type="checkbox" name="" id="selectAll" οnclick="selAll()">全选</th>
		<th>商品名称</th>
		<th>单价</th>
		<th>商品数量</th>
		<th>总价格</th>
	</tr>
  </thead>
  <tbody id="tbd">
	
  </tbody>
  </table>
  <div style="width:600px;height:40px;color:red;">
  <b id="sum" style="float:right;margin-top:5px;">合计：</b>
  </div>
</div>
  <hr/>
  <input type="button" value="反选" οnclick="faselect()">
	<input type="button" value="删除" οnclick="del()">

 </body>
</html>