2013/1/21 dom操作
1，定义数据封装的标签（定义界面）2,确定事件源3，注册时间4，事件处理
需求：（html+css+javascript） 页面中有一个新闻区域通过超链接 大中小可以让用户改变区域中的字体大小javascript:void(0)
<script type="text/javascript" src="tuxingjs.js"></script><script type="text/javascript">function changeMax(){//var divNode=document.getElementById("newsid");divNode.style.fontSize="30px";}function changeSize(size){//var divNode=document.getElementById("newsid");var divNode=byId("newsid");divNode.style.fontSize=size;}function changeSize2(className){var divNode=byId("newsid");divNode.className=className;}</script><style>.max{font-size:24px;background-color:#CCFF00;}.min{font-size:9px;background-color:#66FF33;}.norm{font-size:16px;background-color:#FF0000;}</style></head>
<body>
<h2>新闻标题</h2><a href="javascript:void(0)" onclick="changeSize2('max')">大</a><a href="javascript:void(0)"onclick="changeSize2('norm')">中</a><a href="javascript:void(0)"onclick="changeSize2('min')">小</a><br />
<div id="newsid" >负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br /></div></body></html>
结果：单击大 字体变大背景变成黄色单击中 字体16PX背景变成红色单击小 字体9PX背景变成绿色
2,需求点击实现一个展开闭合效果(overflow属性)(event.srcElement)获取事件源对象的两种方式1，通过event.srcElement属性2,将事件源对象通过this传入
<style type="text/css">table{border:#00FFCC 1px solid;
}table td{border:#FF0000 1px solid;background-color:#CCFF33;}table td div{background-color:#CCCC66;display:none;}table td a:link,table td a:visited{text-decoration:none;}.open{display:block;}.close{display:none;}</style><script type="text/javascript">function list2(){var aNode=event.srcElement;var tdNode=aNode.parentNode;var divNode=tdNode.getElementsByTagName("div")[0];//alert(aNode.nodeName);//alert(divNode.nodeName);if(divNode.className=="open"){divNode.className="close";}else{divNode.className="open";}}</script></head>
<body><table><tr><td><a href="javascript:void(0)" onclick="list2()">还有菜单列表</a><div>将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br /></div></td></tr></table><table><tr><td><a href="javascript:void(0)" onclick="list2()">还有菜单列表</a><div>将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br /></div></td></tr></table><table><tr><td><a href="javascript:void(0)" onclick="list2()">还有菜单列表</a><div>将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br />将少得可怜佛挡杀佛<br /></div></td></tr></table></body></html>结果：单击一个超链接开关效果
