DOM编程示例
来源：互联网 发布：vb6.0软件发展 编辑：程序博客网 时间：2024/06/03 04:49
新闻字体
需求：新闻字体的大中小样式的改变
思路：
1.先有新闻数据，并用标签封装 2.定义一些页面样式 3.确定事件源和事件，以及处理方式中被处理的节点。 事件源:a标签 事件：onclick 被处理的节点 div newstext既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果，可以使用href设置：javascript:void(0)来完成。
<!DOCTYPE html><html> <head> <title>newsfont.html</title> <meta name="content-type" content="text/html; charset=GBK"> <style type="text/css" media="screen"> /* 超链接访问前后的样式一致 * */ a:link,a:visited{ color:#0066ff; text-decoration:none; } a:hover{ color:#ff5500; } #newstext{ width:400px; border:#88ff22 1px solid; padding:10px; } /*预定义一些样式封装在选择器中，一般使用类选择器* */ .norm{ color:#000000; font-size:16px; background-color: #cdd8d0; } .max{ color:#808080; font-size: 28px; background-color: #9ce9b4; } .min{ color:#0088ff; font-size: 12px; background-color: #f1b96d; } </style> </head> <body> <script type="text/javascript" charset="utf-8"> //定义改变字体的方法 function changeFont(size,clr){ /* 既然要先对div newstext中的文本字体进行操作 必须要先获取div节点对象 * */ var oNewsText=document.getElementById("newstext"); //获取oNewsText节点的style样式属性对象 oNewsText.style.fontSize=size; oNewsText.style.color=clr; } /* 如果根据用户点击所需要的效果 不唯一 仅通过传递多个参数虽然可以实现效果，但是 1.传参过多阅读性差 2.js代码和css代码耦合性高， 3.不利于扩展 解决 ：将多个所需的样式进行封装 封装到选择器中，只要给指定的标签加载不同的选择器就可以了 * */ function changeFont2(selectname){ var oNewsText=document.getElementById("newstext"); oNewsText.className=selectname; } </script> <h1>我国提出到2020年人工智能重点领域形成国际竞争优势</h1> <hr/> <!-- <a href="javascript:void(0)" onclick="changeFont('28px','#bbbbbb')">大字体</a> <a href="javascript:void(0)" onclick="changeFont('16px','#000000')">中字体</a> <a href="javascript:void(0)" onclick="changeFont('12px','#0000ff')">小字体</a> --> <a href="javascript:void(0)" onclick="changeFont2('max')">大字体</a> <a href="javascript:void(0)" onclick="changeFont2('norm')">中字体</a> <a href="javascript:void(0)" onclick="changeFont2('min')">小字体</a> <div id="newstext" class="norm"><!--可以在标签内设置静态属性style="font-size:28px"--> 新华社北京12月14日电（记者张辛欣）记者14日从工信部获悉，工信部印发《促进 新一代人工智能产业发展三年行动计划（2018-2020年）》，以产业化和集成应用为 重点，推进人工智能和制造业深度融合。工信部提出力争到2020年人工智能重点产品 规模化发展，整体核心基础能力显著增强，重点领域形成国际竞争优势。 智能产品应用是重点。工信部提出，重点培育和发展智能网联汽车、智能服务机器人、 智能无人机等智能化产品，推动其在经济社会的集成应用。 以智能翻译系统为例，到2020年，多语种智能互译取得明显突破，中译英、英译中场 景下产品的翻译准确率超过85%。 此外，工信部将探索建设人工智能产业集聚区，设立重点实验室，鼓励行业合理开放数 据，促进人工智能产业突破发展。 </div> </body></html>列表展开闭合效果
思路：
1.标签封装数据 html2.定义样式 css3.明确事件源，事件以及要处理的节点 dom4.明确具体的操作方式，其实就是事件的处理内容 JavaScript<!DOCTYPE html><html> <head> <title>list.html</title> <meta name="content-type" content="text/html; charset=GBK"> <style type="text/css"> dl dd{ margin:0px; } dl{ height:16px; /*overflow: hidden;*/ } /*预定义一些样式，类选择器，便于给标签进行样式的动态加载*/ .open{ overflow:visible; height:auto; } .close{ overflow:hidden; } dl dt{ color: #ffaa00; } </style> </head> <body> <script type="text/javascript" charset="utf-8"> //列表展开闭合效果 var flag=true; function list1(){ /* 思路： 将dl属性的overflow的值改成visible即可 要先获取dl节点 改变该节点的style.overflow属性 * */ //获取dl节点 var oDlNode=document.getElementsByTagName("dl")[0]; // oDlNode.style.overflow="visible"; if(flag){ oDlNode.style.overflow="visible"; flag=false; }else{ oDlNode.style.overflow="hidden"; flag=true; } } //重新定义list。降低js和css的耦合性 function list2(){ //1.获取dl节点 var oDlNode=document.getElementsByTagName("dl")[0]; //2.设置dl的className属性值 // oDlNode.className="open"; if(oDlNode.className=="close"){ oDlNode.className="open"; }else{ oDlNode.className="close"; } } function list3(node){ var oDlNode=node.parentNode; if(oDlNode.className=="close"){ oDlNode.className="open"; }else{ oDlNode.className= "close"; } } /* 在多个列表下，一次只需要展开一个列表其他列表都关闭 怎么保证开一个而关其他 思路： 1.获取所有的dl节点 2.遍历这些节点，只对当前的dl进行展开或者闭合 * */ function list(node){ //获取当前的dl节点 var oDlNode=node.parentNode; //获取所有的dl节点 var collDlNodes=document.getElementsByTagName("dl"); //遍历所有dl for(var x=0;x<collDlNodes.length;x++){ if(collDlNodes[x]==oDlNode){ if(oDlNode.className=="close"){ oDlNode.className="open"; }else{ oDlNode.className= "close"; } }else{ collDlNodes[x].className="close"; } } } </script> <dl class="close"> <dt onclick="list(this)">显示条目一</dt> <dd>展开列表内容1</dd> <dd>展开列表内容1</dd> <dd>展开列表内容1</dd> <dd>展开列表内容1</dd> </dl> <dl class="close"> <dt onclick="list(this)">显示条目二</dt> <dd>展开列表内容2</dd> <dd>展开列表内容2</dd> <dd>展开列表内容2</dd> <dd>展开列表内容2</dd> </dl> <dl class="close"> <dt onclick="list(this)">显示条目三</dt> <dd>展开列表内容3</dd> <dd>展开列表内容3</dd> <dd>展开列表内容3</dd> <dd>展开列表内容3</dd> </dl> </body></html>好友菜单
需求： 完成一个好友菜单，具有展开闭合效果。而且要求一次开一个而关其他。
<!DOCTYPE html><html> <head> <title>list2.html</title> <meta name="content-type" content="text/html; charset=UTF-8"> <style type="text/css" media="screen"> /*对表格中的ul进行定义 1.去除无序列表的样式 2.将列表的外边距取消 * */ table ul{ list-style: none; margin:0px; background-color:#9CE9B4; display: none; border: #88FF22 1px solid; padding:0px; } /*对表格框线进行定义 以及单元格的框线定义 */ table{ border: #8080ff 1px solid; width: 85px; } table td{ border: #8080ff 1px solid; background-color: #F1B96D; } /*单元格中的超链接样式*/ table td a:link,table td a:visited{ color: #1f6df1; text-decoration: none; } table td a:hover{ color: #FF5500; } /*预定义一些样式*/ .open{ display: block; } .close{ display: none; } </style> </head> <body><!-- 完成一个好友菜单 展开闭合效果 而且要求一次开一个而关其他 --> <script type="text/javascript" charset="utf-8"> function list(node){ //获取被操作的节点ul //先通过事件源超链接标签获取其父节点td，再通过父节点获取ul节点 var oTdNode=node.parentNode; var oUlNode=oTdNode.getElementsByTagName("ul")[0]; // alert(oUlNode.nodeName); //获取表格中所有的ul //先获取表格节点对象 var oTableNode=document.getElementById("goodlist"); var collUlNodes=oTableNode.getElementsByTagName("ul"); for(var x=0;x<collUlNodes.length;x++){ if(collUlNodes[x]==oUlNode){ if(oUlNode.className=="open"){ oUlNode.className="close"; }else{ oUlNode.className="open"; } }else{ collUlNodes[x].className="close"; } } } </script> <table id="goodlist"> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单1</a> <ul> <li>梅</li> <li>兰</li> <li>竹</li> <li>菊</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单2</a> <ul> <li>风</li> <li>花</li> <li>风</li> <li>雪</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单3</a> <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单4</a> <ul> <li>日</li> <li>月</li> <li>星</li> <li>辰</li> </ul> </td> </tr> </table> </body></html>创建表格
<!DOCTYPE html><html> <head> <title>createtable.html</title> <meta name="content-type" content="text/html; charset=gbk"> <!-- <link rel="stylesheet" href="table.css" type="text/css" media="screen" title="no title" charset="utf-8"/> --> <style type="text/css" media="screen"> @import url(table.css); </style> </head> <body> <!-- 在页面中创建一个5行6列的表格 1.事件源，比如按钮 2.必须要有一个生成的表格节点存储位置 --> <script type="text/javascript" charset="utf-8"> function creTable1(){ /* 可以通过之前学过的createElement创建元素的形式来完成 * */ //1.创建表格节点 var oTabNode=document.createElement("table"); //2.创建tBody节点 var oTbodyNode=document.createElement("tbody"); //3.创建行节点tr var oTrNode=document.createElement("tr"); //4.创建单元格节点 var oTdNode=document.createElement("td"); oTdNode.innerHTML="这是单元格"; //让这些节点有关系。进行指定层次的节点添加 oTrNode.appendChild(oTdNode); oTbodyNode.appendChild(oTrNode); oTabNode.appendChild(oTbodyNode); document.getElementsByTagName("div")[0].appendChild(oTabNode); } /* 上面的方法很麻烦 既然操作的是表格，那么最方便的方式是使用表格节点对象的方法来完成 表格是由行组成，表格节点对象中的insertRow方法就完成了创建行并添加的动作 行是由单元格组成：通过tr节点对象的insertCell来完成 * */ function creTable(){ //1.创建表格节点 var oTabNode=document.createElement("table"); // oTabNode.id="tabid"; oTabNode.setAttribute("id","tabid"); var rowVal=parseInt(document.getElementsByName("rownum")[0].value); var colVal=parseInt(document.getElementsByName("colnum")[0].value); for(var x=1;x<=rowVal;x++){ var oTrNode=oTabNode.insertRow(); for(var y=1;y<=colVal;y++){ var oTdNode=oTrNode.insertCell(); oTdNode.innerHTML=x+":"+y; } } //将表格节点添加到div中 document.getElementsByTagName("div")[0].appendChild(oTabNode); document.getElementsByName("crtBut")[0].disabled=true; } //删除行 function delRow(){ //获取表格对象 var oTabNode=document.getElementById("tabid"); if(!oTabNode==null){ alert("表格不存在"); return; } //获取要删除的表格常数 var rowVal=document.getElementsByName("delrow")[0].value; if(rowVal>=1&&rowVal<=oTabNode.rows.length){ oTabNode.deleteRow(rowVal-1); } else alert("删除的行不存在"); } //删除列，其实就是删除每一行中同一位置的单元格 function delCol(){ //获取表格对象 var oTabNode=document.getElementById("tabid"); if(!oTabNode==null){ alert("表格不存在"); return; } var colVal=document.getElementsByName("delcol")[0].value; if(colVal>=1 && colVal<=oTabNode.rows[0].cells.length){ for(var x=0;x<oTabNode.rows.length;x++){ oTabNode.rows[x].deleteCell(colVal-1); } }else{ alert("删除的列存在"); } } </script> 行：<input type="text" name="rownum"/>列：<input type="text" name="colnum"/> <input type="button" value="创建表格" name="crtBut" onclick="creTable()"/> <hr/> <input type="text" name="delrow"/><input type="button" value="删除行" onclick="delRow()"/><br/> <input type="text" name="delcol"/><input type="button" value="删除列" onclick="delCol()"/> <div id="name"> </div> </body></html>table.css代码如下：
@CHARSET "UTF-8";table{ border: #0066FF 1px solid; width: 500px; border-collapse: collapse;}table td{ border: #249bdb 1px solid; padding:10px;}table th{ border: #249bdb 1px solid; padding:10px; background-color: rgb(200,200,200);}行颜色间隔显示并高亮
思路：
1. 因为要操作行的样式，所以要先获取表格对象 2. 获取所有被操作的行对象 3. 遍历并给每一行指定样式<!DOCTYPE html><html> <head> <title>trcolor.html</title> <meta name="content-type" content="text/html; charset=gbk"> <style type="text/css" media="screen"> @import url(table.css); .one{ background-color: #9CE9B4; } .two{ background-color: #cc88ee; } .over{ background-color:#F1B96D; } </style> <script type="text/javascript" charset="utf-8"> var name; function trColor(){ var oTabNode=document.getElementById("info"); //表格中所有行 var collTrNodes=oTabNode.rows; //遍历的时候从第二行遍历 for(var x=1;x<collTrNodes.length;x++){ if(x%2==1){ collTrNodes[x].className="one"; }else{ collTrNodes[x].className="two"; } //给每一个行对象都添加两个事件 collTrNodes[x].onmouseover=function(){ name=this.className; this.className="over"; }; collTrNodes[x].onmouseout=function(){ this.className=name; }; } } onload=function(){ trColor(); }; /* function over(node){ name=node.className; node.className="over"; } function out(node){ node.className=name; } */ </script> </head> <body> <table id="info"> <tr> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> <tr> <td>若曦</td> <td>23</td> <td>上海</td> </tr> <tr> <td>玉儿</td> <td>16</td> <td>拓跋</td> </tr> <tr> <td>允贤</td> <td>20</td> <td>苏州</td> </tr> <tr> <td>尹双双</td> <td>17</td> <td>杭州</td> </tr> <tr> <td>妙彤</td> <td>21</td> <td>西塘</td> </tr> <tr> <td>诗诗</td> <td>29</td> <td>北京</td> </tr> </table> </body></html>表格排序
思路：
1.排序就需要数组。获取需要参与排序的行对象数组 2.对行数组中的每一行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换 3.将排好序的数组重新添加回表格<!DOCTYPE html><html> <head> <title>trcolor.html</title> <meta name="content-type" content="text/html; charset=gbk"> <style type="text/css" media="screen"> @import url(table.css); th a:link,th a:visited{ color: #279bda; text-decoration: none; } </style> <script type="text/javascript" charset="utf-8"> var flag=true; function sortTable(){ /* 思路： 1.排序就需要数组。获取需要参与排序的行对象数组 2.对行数组中的每一行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换 3.将排好序的数组重新添加回表格 * * */ var oTabNode=document.getElementById("info"); var collTrNodes=oTabNode.rows; //定义一个临时容器，存储需要排序的行对象 var trArr=[]; //遍历原行集合，并将需要排序的行对象存储到临时容器中 for(var x=1;x<collTrNodes.length;x++){ trArr[x-1]=collTrNodes[x]; } //对临时容器排序 mySort(trArr); //将排完序的行对象添加回表格 if(flag){ for(var x=0;x<trArr.length;x++){ // oTabNode.childNodes[0].appendChild(trArr[x]); trArr[x].parentNode.appendChild(trArr[x]); } flag=false; }else{ for(var x=trArr.length-1;x>=0;x--){ trArr[x].parentNode.appendChild(trArr[x]); } flag=true; } } function mySort (arr) { for(var x=0;x<arr.length-1;x++){ for(var y=x+1;y<arr.length;y++){ //按照年龄数值排序，并转成整数 if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){ // arr[x].swapNode(arr[y]); var temp=arr[x]; arr[x]=arr[y]; arr[y]=temp; } } } } </script> </head> <body> <table id="info"> <tr> <th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th> <th>地址</th> </tr> <tr> <td>若曦</td> <td>23</td> <td>上海</td> </tr> <tr> <td>玉儿</td> <td>16</td> <td>拓跋</td> </tr> <tr> <td>允贤</td> <td>20</td> <td>苏州</td> </tr> <tr> <td>尹双双</td> <td>17</td> <td>杭州</td> </tr> <tr> <td>妙彤</td> <td>21</td> <td>西塘</td> </tr> <tr> <td>诗诗</td> <td>29</td> <td>北京</td> </tr> </table> </body></html>全选商品列表
需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。
思路：
1，先获取所有的checkbox对象。2，对这些对象进行遍历。判断哪个对象被选中。3，对被选中对象的金额进行累加。4，显示在按钮右边。<!DOCTYPE html><html> <head> <title>checkbox.html</title> <meta name="content-type" content="text/html; charset=gbk"> </head> <body> <script type="text/javascript"> function getSum(){ /* 获取所有的名称为item的复选框 判断checked状态，为true的表示被选中，获取该节点的value进行累加 * */ var sum=0; var collItemNodes=document.getElementsByName("item"); for(var x=0;x<collItemNodes.length;x++){ if(collItemNodes[x].checked){ sum+=parseInt(collItemNodes[x].value); } } var sSum=sum+"元"; document.getElementById("sumid").innerHTML=sSum.fontcolor('red'); } //全选 function checkAll(node){ /* 将全选的box的checked状态赋值给所有的itembox的checked * */ var collItemNodes=document.getElementsByName("item"); for(var x=0;x<collItemNodes.length;x++){ collItemNodes[x].checked=node.checked; } } </script> <input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/> <input type="checkbox" name="item" value="4000"/>华硕笔记本：4000元<br/> <input type="checkbox" name="item" value="5000"/>联想笔记本：5000元<br/> <input type="checkbox" name="item" value="6000"/>戴尔笔记本：6000元<br/> <input type="checkbox" name="item" value="7000"/>惠普笔记本：7000元<br/> <input type="checkbox" name="item" value="8000"/>苹果笔记本：8000元<br/> <input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/> <input type="button" value="总金额：" onclick="getSum()"/><span id="sumid"> </span> </body></html>阅读全文
