DOM编程示例

最新推荐文章于 2021-07-17 23:23:49 发布

promiseend

最新推荐文章于 2021-07-17 23:23:49 发布

阅读量295

点赞数

分类专栏： java 文章标签： dom javascript

本文链接：https://blog.csdn.net/promiseend/article/details/78891205

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

新闻字体

需求：新闻字体的大中小样式的改变
思路：

    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.标签封装数据 html
2.定义样式 css
3.明确事件源，事件以及要处理的节点  dom
4.明确具体的操作方式，其实就是事件的处理内容 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>

promiseend

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程示例

新闻字体需求：新闻字体的大中小样式的改变思路： 1.先有新闻数据，并用标签封装 2.定义一些页面样式 3.确定事件源和事件，以及处理方式中被处理的节点。事件源:a标签事件：onclick 被处理的节点 div newstext既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果，可以使用href设置：javascript:void(0)来
复制链接

扫一扫