JavaWeb基础——DOM

最新推荐文章于 2023-03-09 14:42:19 发布

Jorocco

最新推荐文章于 2023-03-09 14:42:19 发布

阅读量1.8k

点赞数 2

分类专栏： java

本文链接：https://blog.csdn.net/Jorocco/article/details/79451129

版权

java 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

DOM:Document Object Model(文档对象模型)
用来将标记性文档封装成对象，并将标记性文档中的所有内容（标签、文本、属性等）都封装成对象、
封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容
因为对象的出现就可以有属性和行为被调用

文档对象模型
文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记性文档都具备一些共性特征的一个体现
    标记型文档（标签、属性、标签中封装的数据）
只要是标记型文档，DOM这种技术都可以对其进行操作
常见的标记型文档：html  xml

DOM这种技术是如何对标记型文档操作的呢？
要操作标记型文档操作必须对其进行解析。

DOM技术的解析方式：将标记型文档文档解析成一颗DOM树，并将树种的内容都封装成节点对象
注意：这个DOM解析方式的好处就是可以对树中的节点进行任意操作，比如：增删改查
弊端：这种解析需要将整个文档加载进内存，意味着如果标记型文档操作的体积很大，较为浪费内存空间
简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是
w3c的标准。
SAX解析方式：基于事件驱动的解析，获取数据的速度很快，但是不能对标记进行增删改查

DOM模型有三种：
DOM1：将html文档封装成对象
DOM2：在DOM1基础上加入了新功能，比如解析名称空间
DOM3:将xml文档封装成了对象

DHTML：动态的HTML,不是一门语言，是多项技术综合体的简称
其中包含了HTML、CSS、DOM、Javascript

这四个技术在动态html页面效果定义时，都处于什么样的角色呢？负责什么样的职责呢？
HTML:负责提供标签，对数据进行封装，目的是便于对改标签中的数据进行操作
        简单说：用标签封装数据

CSS:负责提供样式属性，对标签中的数据进行样式的定义
        简单说：对数据进行样式定义

DOM:负责将标签型文档及文档中的内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作
        简单说：将文档和标签以及其他内容变成对象

JS:负责提供程序设计语言，对页面中的对象进行逻辑操作
        简单说：负责页面的行为定义，就是页面的动态效果
所以javascript是动态效果的主力编程言

这里写图片描述

1、获取节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 
    document对象的演示
    该对象将标记型文档进行封装
    该对象的作用，是对可以标记型文档进行操作
    最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点
    要想获取节点，必须要先获取到节点所属的文档对象document
    所以document对象最常见的操作就是获取页面中的节点
    获取节点的方法体现：
    1、getElementById():通过标签的id属性值获取该标签节点，返回该不标签节点
    2、getElementsByName():通过标签的name属性获取节点，因为name有相同，所以返回的一个数组
    3、getElementsByTagName():通过标签名就获取节点，因为标签名会重复，所以返回的是一个数组
    凡是getElements的返回的都是数组
     -->
     <script type="text/javascript">
        function getNodeDemo(){
            /*
            需求：获取页面的节点
            思路：通过document对象完成，因为div节点有id属性，所以可以通过id属性来完成获取

            */
            var divNode=document.getElementById("divid");
            //节点都有三个必备的属性：节点名称、节点类型、节点值 
            alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
            /*
            常见节点有三种：
            1、标签型节点：类型1
            2、属性节点：类型2
            3、文本节点：类型3
            标签型节点是没有值的，属性和文本节点是可以有值的
            */
            //获取div节点中的文本
            var text=divNode.innerHTML;
            alert(text);
            //改变div中的文本
            divNode.innerHTML="哈哈，文本被窝改了" 
        }
            //获取文本框节点演示getElementByname
            function getNodeDemo2(){
                var node=document.getElementsByName("user");
                //alert(node.length);
                alert(node[0].value);
                /*上面的可以写成下面的样子
                var userNode=document.getElementsByName("user");
                alert(userNode.value);
                */
            }
            //获取超链接节点对象，演示getElementsByTagName方法
            function getNodeDemo3(){
                //直接用标签名获取
                var nodes=document.getElementsByTagName("a");
                alert(nodes[0].innerHTML);
            }
            /*
            对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开
            当然是要获取其中被操作的超链接对象
            可是通过document获取超链接，拿到的是页面中所有的超链接节点
            只想获取一部分该如何办呢？
            只要获取到被操作的超链接所属的节点即可
            再通过这个即诶点获取到它里面所有的超链接节点 
            */
            function getNodeDemo4(){
                //获取超链接所属的div节点
                var divNode=document.getElementById("newslink");
                //通过div对象方法的查找发现它也具备getElementsByTagName方法 
                //记住：所有容器型标签都具备这个方法，在改标签范围内获取指定名称的标签
                var aNodes=divNode.getElementsByTagName("a");
                for(var x=0;x<aNodes.length;x++){
                    alert(aNodes[x].innerHTML);
                    aNodes[x].target="_blank";
                }
            }
     </script>
     <input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()"/>
     <div id="divid">这是一个div区域</div>
     <input type="text" name="user"/>
     <a href="http://www.sina.com.cn">新浪网站1</a>
     <a href="http://www.sina.com.cn">新浪网站2</a>
     <div id="newslink">
     <a href="http://www.163.com.cn">新闻链接1</a>
     <a href="http://www.163.com.cn">新闻链接2</a>
     <a href="http://www.163.com.cn">新闻链接3</a>
     </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
通过节点的层次关系获取节点对象
关系：
1、 父节点：parentNode:对应一个节点对象
2、子节点：childNode:对应一个节点集合
3、兄弟节点：
    上一个兄弟节点:previousSibling
    下一个兄弟节点：nextSibling
 -->
    <script type="text/javascript">
        function getNodeByLevel(){
            //获取页面中的表格节点
            var tabNode=document.getElementById("tabid");
            //获取父节点 parentNode
        //  var node=tabNode.parentNode;
        //  alert(node.nodeName);//body
            //获取子节点 childNodes
            var node=tabNode.childNodes;
            alert(node.nodeName);//tbody
        /*获取tr标签
            var node=tabNode.childNodes;
            alert(node[0].childNodes[0].nodeName);//tr
        */

        }
    </script>
    <input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()"/>
    <div>div 区域</div>
    <table id="tabid">
        <tr>
            <td>单元格一</td>
            <td>单元格二</td>
        </tr>
    </table>
    <dl>
        <dt>上层项目</dt>
        <dt>下层项目</dt>
    </dl>
    <a href=''>一个超链接</a>
</body>

</html>

2、操作节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        div{
            border:#00ccff 1px solid;
            width:200px;
            paddding:30px;
            margin:10px
        }
        #div_1{
            background-color:#00ccff;
        }
        #div_2{
            background-color:#ffccff;
        }
        #div_3{
            background-color:#cc00ff;
        }
        #div_4{
            background-color:#00ff00;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        //创建并添加节点
        //需求：在div_1节点中添加一个文本节点
        function crtAndAdd(){
            /*
            1、创建一个文本节点
            2、获取div_1节点
            3、将文本节点添加到div_1节点中
            */
            //1、创建节点，使用document中的createTextNode方法
            var oTextNode=document.createTextNode("这是一个新的文本");
            //2、获取div_1节点
            var oDivNode=document.getElementById("div_1");
            //3、将文本节点添加到div_1节点中
            oDivNode.appendChild(oTextNode);    
        }
        //需求：在div_1中创建并添加一个按钮节点
        function crtAndAdd2(){
            //1、创建一个按钮节点
            var oButNode=document.createElement("input");
            oButNode.type="button";
            oButNode.value="一个新按钮";
            //2、获取div_1节点
            var oDivNode=document.getElementById("div_1");
            //3、将按钮节点添加到div_1节点中
            oDivNode.appendChild(oButNode);
        }
        //通过另一种方式完成添加节点
        function crtAndAdd3(){
            /*
            其实是使用了容器型标签中的一个属性，innerHTML
            这个属性可以设置html文本
            */
            //1、获取div_1节点
            var oDivNode=document.getElementById("div_1");
            //oDivNode.innerHTML="hahaha";
            oDivNode.innerHTML="<input type='button' value='有个按钮'/>";
        }
//      ==========================
            //需求：将div_2节点删除
            function delNode(){
                //1、获取div_2节点
                var oDivNode=document.getElementById("div_2");
                //2、使用div节点的removeNode方法删除
        //      oDivNode.removeNode(true);//较少用
        //一般使用removeChild方法，删除子节点
        //获取div_2的父节点，然后再用父节点的removeChild将div_2删除
                oDivNode.parentNode.removeChild(oDivNode);
        }
        //需求：用div_3节点替换div_1节点
            function updateNode(){
            /*
            获取div_3和div_1
            使用replaceNode进行替换
            */
            var oDivNode_1=document.getElementById("div_1");
            var oDivNode_3=document.getElementById("div_3");
            //oDivNode_1.replaceNode(oDivNode_3);
            //建议使用replaceChild方法 
            oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
        }
        //需求：希望用div_3替换div_1,并保留div_3节点，其实就是对div_3进行克隆
        function cloneDemo(){
            var oDivNode_1=document.getElementById("div_1");
            var oDivNode_3=document.getElementById("div_3");
            var oCopyDiv_3=oDivNode_3.cloneNode(true);
            oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);

        }

    </script>
    <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
    <input type="button" value="删除节点" onclick="delNode()"/>
    <input type="button" value="修改节点" onclick="updateNode()"/>
    <input type="button" value="克隆节点" onclick="cloneDemo()"/>
    <div id="div_1">

    </div>

    <div id="div_2">
        好好学习，day day up!
    </div>

    <div id="div_3">
        div区域演示文字
    </div>

    <div id="div_4">
        节点的增删改查
    </div>
</body>
</html>

3、事件处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript" src="out.js"></script>
    <!--
    为演示方便，定义一个事件源，通过对事件源的触发，获取想要的结果
    比如让用户通过点击按钮就可以知道浏览器的一些信息
     -->
     <!-- 
     定义按钮onclick事件的处理方式
      -->
      <script type="text/javascript">
      //定义一个函数
      function windowObjectDemo(){
          //想要知道这个浏览器的信息，就需要使用window对象中navigator
          var name=window.navigator.appName;
          var version=window.navigator.appVersion;
          println(name+":"+version)
      }
      //演示location
      function windowObjectDemo2(){
    //    var pro=location.protocol;

    //    var text=location.href;
    //    alert(text);
    //  给location的href属性设置一个值，改变了地址栏的值，并对其值进行了解析，如果是http还进行连接访问
            location.href="http://www.sina.com.cn"
      }
      </script>
     <!-- 定义事件源 ，注册事件关联的动作-->
     <input type="button" value="演示window中的对象" onclick="windowObjectDemo2()">


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
    /*
        onunload=function(){
            alert("onunload run");
        }
        onload=function(){
            alert("onload run");
        }
        onbeforeunload=function(){
            alert("onbeforeunload run");
        }
        */
        onload=function(){
            window.status="啊！加载完毕了";
        }//状态信息
    </script>
</body>
</html>

ad.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>特价大优惠！</h1>
    <h2>什么东西便宜呢!</h2>
    <h1>你猜！</h1>
    <script type="text/javascript">
        setTimeout("close()",3000);
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--
    演示window中的常见方法
    -->
    <script type="text/javascript" src="out.js"></script>
    <script type="text/javascript">
        var timeid;
        function widowMethodDemo(){
//          var b=confirm("你真的确定要点击吗？");
//          alert("b="+b);
            setTimeout("alert('time out run')",4000);
            timeid=setInterval("alert('interval run')",3000);
        }
        function stopTime(){
            clearInterval(timeid);
        }
        /* function windowMove(){
            for(var x=0;x<700;x++)
                moveBy(20,0);
                moveBy(0,20);
                moveBy(-20,0);
                moveBy(0,-20);
        } */
        //广告 
        function windowOpen(){
                open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");
            }
    </script>
    <input type="button" value="演示window对象的方法" onclick="windowOpen()"/>
    <input type="button" value="停止" onclick="stopTime()"/>
</body>
</html>

4、新闻字体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻字体</title>
    <style type="text/css">
        /*超链接访问前，访问后样式一致*/
        a:link,a:visited{
            color:#0044ff;
        }
        a:hover{
            color:#ffff00;
        }
        #newstext{
            width:500px;
            border:#00ff00 1px solid;
            padding:10px;
        }
        /*预定义一些样式封装到选择器，一般使用类选择器 */
        .norm{
            color:#000000;
            font-size:16px;
            background-color:#cdd8d0;
        }
        .max{
            color:#808080;
            font-size:28px;
            background-color:#9ce9b4;
        }
        .min{
            color:#ff0000;
            font-size:12px;
            background-color:#f1b96d;
        }
    </style>
</head>
<body>
    <!--
    需求：新闻字体的大中小样式改变
    思路：
    1、现有新闻数据，并用标签封装
    2、定义一些页面样式 
    3、确定事件源和时间，以及处理方式中被处理的节点
        事件源：a标签，事件：onclick
        被处理的节点 div-newstext

        既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果
        可以使用给href设置：javascript:void(0)来完成

     -->
     <script type="text/javascript">
        function changeFont(size){
            /*
            既然要对div newstext中的文本字体进行操作
            必须要先获取div节点对象
            */
            var oNewsText=document.getElementById("newstext");
            //获取oNewsText节点的style样式属性对象
            oNewsText.style.fontSize=size+"px";
            oNewsText.style.color=clr;
        }
        /*
        如果根据用户点击所需要的效果不唯一 
        仅通过传递多个参数虽然可以实现效果，但是
        1、传参过多，阅读性差
        2、js代码和css代码耦合性高
        3、不利于扩展
        解决：
        将多个所需的样式进行封装
        封装到选择器中，只要给指定的标签加载不同的选择器就可以了
        */
        function changeFont(selectorName){
            var oNewsText=document.getElementById("newstext");
            oNewsText.className=selectorName;
        }

     </script>
     <h1>这是一个新闻标题</h1>
     <hr/>
     <a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>
     <a href="javascript:void(0)" onclick="changeFont('norm')">中字体</a>
     <a href="javascript:void(0)" onclick="changeFont('min')">小字体</a>
     <div id="newstext" class="norm">
     这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
     这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
     这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
     </div>

</body>
</html>

5、展开闭合列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表</title>
    <style type="text/css">
        dl dd{
            margin:0px;
        }
        dl{
            height:18px;
            overflow:hidden;
        }
        /*
        预定义一些样式，类选择器，便于给标签进行样式的动态加载
        */
        .open{
            overflow:visible;
        }
        .close{
            overflow:hidden;
        }
    </style>
</head>
<body>
    <!-- 
        思路：
            1、标签封装数据：html
            2、定义样式:css
            3、明确事件源，事件，以及要处理节点:dom
            4、明确具体的操作方式，其实就是事件的处理内容:js
     -->
     <script type="text/javascript">
        var flag=true;
        //列表展开闭合效果
        function list2(){
            /*
            思路：
                1、无非就是将dl属性的overflow的值改成visible即可
                2、要先获取dl节点
                3、改变该节点的style.overflow属性
            */
            //1、获取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 list(node){
            /*
            //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";
            }
            */
            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>展开列表内容</dd>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
    </dl>
    <dl class="close">
        <dt onclick="list(this)">显示条目一</dt>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
    </dl>
    <dl class="close">
        <dt onclick="list(this)">显示条目一</dt>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
        <dd>展开列表内容</dd>
    </dl>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好友菜单</title>
<style type="text/css">
    /*对表格中的ul进行样式定义
    1、去除无序列表的样式
    2、将列表的外边距取消

    */
    table ul{
        list-style:none;
        margin:0px;
    }
    /*
    对表格框线进行定义以及单元格的框线进行定义
    */
    table{
        border:#8080ff 1px solid;
        width:125px;
    }
    table td{
        border:#8080ff 1px solid;
    } 
</style>
</head>
<body>
    <!--
    完成一个好友菜单
    展开闭合效果
    -->
    <table>
        <tr>
            <td>
                <a href="">好友菜单</a>
                <ul>
                    <li>一个好友</li>
                    <li>一个好友</li>
                    <li>一个好友</li>
                    <li>一个好友</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <a href="">好友菜单</a>
                <ul>
                    <li>一个好友</li>
                    <li>一个好友</li>
                    <li>一个好友</li>
                    <li>一个好友</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <a href="">好友菜单</a>
                <ul>
                    <li>一个好友</li>
                    <li>一个好友</li>
                    <li>一个好友</li>
                    <li>一个好友</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

6、radio

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    #contenid{
        display:none;/*隐藏*/
    }
    #no1ul{
        list-style:none;
        margin:0px;
    }
    .close{
        display:none;
    }
    .open{
        display:block;
    }
</style>
<script type="text/javascript">
    function showResult(){
        //1、判断是否有答案被选中
        //获取所有no1的radio,并遍历判断checked状态
        var oNo1Nodes=document.getElementsByName("no1");
        var flag=false;
        var val;
        for(var x=0;x<oNo1Nodes.length;x++){
            if(oNo1Nodes[x].checked){
                flag=true;
                val=oNo1Nodes[x].value;
                break;
            }
        }
        if(!flag){
            document.getElementById("errinfo").innerHTML="没有任何答案被选中".fontcolor("red");
            return;
        }
        if(val>=1&&val<=3){
            document.getElementById("res_1").className="open";
            document.getElementById("res_2").className="close";
        }
        else{
            document.getElementById("res_1").className="close";
            document.getElementById("res_2").className="open";
            }
    }
</script>
</head>
<body>
    <!--
    单选按钮演示
    1、是否参与调查问卷？
    2、性格测试 
     -->
     <!-- 2、性格测试 -->
    <h2>欢迎您参与性格测试：</h2>
    <div>
    <h3>第一题：</h3>
    <span>您喜欢的水果是什么？</span>
    <ul id="no1ul">
    <li><input type="radio" name="no1" value="1"/>葡萄</li>
    <li><input type="radio" name="no1" value="2"/>西瓜</li>
    <li><input type="radio" name="no1" value="3"/>苹果</li>
    <li><input type="radio" name="no1" value="4"/>芒果</li>
    <li><input type="radio" name="no1" value="5"/>樱桃</li>
    </ul>
    </div>

    <div>
    <input type="button" value="查看测试结果：" onclick="showResult()"/>
    <span id="errinfo"></span>
    <div id="res_1" class="close">1-3分:你的性格内向并扭曲，建议...</div>
    <div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
    </div> 




  <hr/>
     <script type="text/javascript">
        function showContent(node){
            var oDivNode=document.getElementById("contentid");
            with(oDivNode.style){
            if(node.value=="yes"){
                display="block";
            }else{
                display="none";
            }
          }
        }
     </script>
     <!-- 问卷调查 -->
     <div>
     您要参与问卷调查吗：
     <input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/>是
     <input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)"/>否
     </div>
     <div id=contentid>
     问卷调查内容：<br>
     您的姓名:<input type="text"/><br>
     您的邮箱:<input type="text"/>
     </div>
</body>
</html>

7、Select

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style tyle="text/css">
    .clrclass{
        height:50px;
        width:50px;
        float:left;
        margin-right:30px;
    }
    #text{
        clear:left;
        margin-top:20px;
    }
</style>
</head>

<body>
    <!-- 
     -->
     <script type="text/javascript">
        function changeColor(node){
            var colorVal=node.style.backgroundColor;
            document.getElementById("text").style.color=colorVal
        }
     </script>
     <div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
     <div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
     <div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
     <div id="text">
        需要显示效果的文字<br/>
        需要显示效果的文字<br/>
        需要显示效果的文字<br/>
        需要显示效果的文字<br/>
     </div>
     <hr/>

     <script type="text/javascript">
        function changeColor2(){
            var oSelectNode=document.getElementsByName("selectColor")[0];
            //获取所有的option
            /* with(oSelectNode){
                var collOptionNodes=options;
                alert(options[selectedIndex].innerHTML);
            } */
            var colorVal=oSelectNode.options[oSelectNode.selectedIndex].value;
            document.getElementById("text").style.color=colorVal;
            /* var collOptionNodes=oSelectNode.options;
            for(var x=0;x<collOptionNodes.length;x++){ }*/


        }
     </script>
     <select name="selectColor" onchange="changeColor2()">
        <option value="black">---选择颜色---</option>
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="blue">蓝色</option>
     </select>

     <select name="selectColor2" onchange="changeColor3()">
        <option style="background-color:black" value="black">---选择颜色---</option>
        <option style="background-color:red" value="red">红色</option>
        <option style="background-color:green" value="green">绿色</option>
        <option style="background-color:blue" value="blue">蓝色</option>
     </select>
</body>
</html>

关联选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    select{
        width:100px;
    }
</style>
</head>
<body>
    <script type="text/javascript">
        function selectCity(){
             var collCities=[['选择城市'],['海淀区','朝阳区','东城区','西城区']
                              ,['济南','青岛','烟台','威海']
                              ,['沈阳','大连','鞍山','抚顺']
                              ,['石家庄','保定','邯郸','廊坊']]; 
    //      var arr={"beijing":['海淀区','朝阳区','东城区','西城区']};
    //获取两个下拉菜单对象
        var oSelNode=document.getElementById("selid");
        var oSubSelNode=document.getElementById("subselid");
    //获取到底选择哪个省
        var index=oSelNode.selectedIndex;
    //通过角标到容器去获取对应的城市数组
        var arrCities=collCities[index];
    //将子菜单中的内容清空一下
        /* for(var x=0;x<oSubSelNode.options.length;){
            oSubSelNode.removeChild(oSubSelNode.options[x]);
        } */
    //清除动作
        oSubSelNode.length=0;
    //遍历这个数组，并将这个数组的元素封装成option对象，添加到子菜单中
    for(var x=0;x<arrCities.length;x++){
        var oOptNode=document.createElement("option");
        oOptNode.innerHTML=arrCities[x];

        oSubSelNode.appendChild(oOptNode);
    }
        }
    </script>
    <select id="selid" onchange="selectCity()">
        <option>选择省市</option>
        <option value="beijing">北京</option>
        <option>山东</option>
        <option>辽宁</option>
        <option>河北</option>
    </select>
    <select id="subselid">
        <option>选择城市</option>
    </select>
</body>
</html>

8、表单校验

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
</head>
<body>
    <!-- 
    表单校验
     -->
     <script type="text/javascript">
     /*
        //校验用户名
        function checkUser(){
            var flag;
            var oUserNode=document.getElementsByName("user")[0];
            var name=oUserNode.value;
            //定义正则表达式
            var reg=new RegExp("^[a-z]{4}$","i");//限制头和尾是连续的四个字母，i是忽略大小写的标记
            //reg=/^[0-9]{4}$/;//必须是连续的四个数字

            var oSpanNode=document.getElementById("userspan");
            //if(name=="abc"){
                if(reg.test(name)){
                oSpanNode.innerHTML="用户名正确".fontcolor("green");
                flag=true;
            }else{
                oSpanNode.innerHTML="用户名错误".fontcolor("red");
                flag=false;
            }
            return flag;
        }
        */

        /*
        发现很多框的校验除了几个内容不同外，校验的过程是一样的
        所以进行代码的提取
        */
        function check(name,reg,spanId,okinfo,errinfo){
            var flag;
            var val=document.getElementsByName(name)[0].value;


            var oSpanNode=document.getElementById(spanId);
            if(reg.test(val)){
                oSpanNode.innerHTML=okinfo.fontcolor("green");
                flag=true;
            }else{
                oSpanNode.innerHTML=errinfo.fontcolor("red");
                flag=false;
            }
            return flag;
        }
        //校验用户名
        function checkUser(){
            var reg=/^[a-z]{4}$/i;
            return check("user",reg,"userspan","用户名正确","用户名错误");
        }
        //校验密码
        function checkPsw(){
            var reg=/^\d{4}$/;
            return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
        }
        //校验确定密码,只要和密码一致即可
        function checkRepsw(){
            var flag;
            //获取密码框内容
            var pass=document.getElementsByName("psw")[0].value;
            //获取确认密码框内容
            var repass=document.getElementsByName("repsw")[0].value;

            //获取确认密码的span区域
            var oSpanNode=document.getElementById("repswspan");

            if(pass==repass){
                oSpanNode.innerHTML="两次密码一致".fontcolor("green");
                flag=true;
            }else{
                oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
                flag=false;
            }
            return flag;
        }

        //校验邮件
        function checkMail(){
            var reg=/^\w+@\w+(\.\w+)+$/i;
            return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
        }


        //提交事件处理
        function checkForm(){
            alert(checkUser()+"--"+checkPsw()+"--"+checkRepsw()+"--"+checkMail())
            if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail())
                return true
            else
                return false;
        }

        function mysubmit(){
            var oFormNode=document.getElementById("userinfo");
            oFormNode.submit();
        }
     </script>
     <form onsubmit="return checkForm()" id="userinfo">
        <!-- onblur失去标点事件，意思就是光标移开该输入框就会触发某个事件 -->

        用户名称：<input type="text" name="user" onblur="checkUser()"/>
        <span id="userspan"></span>
        <br/>

        输入密码：<input type="text" name="psw" onblur="checkPsw()"/>
        <span id="pswspan"></span>
        <br/>

        确认密码：<input type="text" name="repsw" onblur="checkRepsw()"/>
        <span id="repswspan"></span>
        <br/>

        邮件地址：<input type="text" name="mail" onblur="checkMail()"/>
        <span id="mailspan"></span>
        <br/>

        <input type="submit" value="提交数据"/>
        <!-- 第二种方式：自定义提交按钮 -->
        <br/>

        <input type="button" value="我的提交" onclick="mysubmit()"/>
     </form>
</body>
</html>

9、单选、全选
table.css

@charset "UTF-8";
table{
    border:#249bdb 1px solid;
    width:500px;
    border-collapse:collapse;
}
table td{
    border:#249bdb 1px solid;
    padding:5px;
}
table th{
    border:#249bdb 1px solid;
    padding:5px;
    background-color:rgb(200,200,200);
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
    .one{
        background-color:#9bf7d5;
    }
    .two{
        background-color:#f3e99a;
    }
    .over{
        background-color:#f3e89a;
    }
</style>
<script type="text/javascript">
    //行颜色间隔显示功能
    function trColor(){
        var name;
        //1、获取表格对象
        var oTabNode=document.getElementById("mailtable");
        //2、获取行对象
        var collTrNodes=oTabNode.rows;
        //3、对所有需要设置背景的行对象进行遍历
        for(var x=1;x<collTrNodes.length-1;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 checkAll(node){
        //获取所有的 mail复选框
        var collMailNodes=document.getElementsByName("mail");
        for(var x=0;x<collMailNodes.length;x++){
            collMailNodes[x].checked=node.checked;
        }
    }
    /* //删除所选邮件
    function deleteMail(){
        if(!confirm("你真的要删除所选的邮件吗？")){
            return;
        }
        //获取所有的mail节点
        var collMailNodes=document.getElementsByName("mail");
        for(var x=0;x<collMailNodes.length;x++){
            if(collMailNodes[x].checked){
                var oTrNode=collMailNodes[x].parentNode.parentNode;
                oTrNode.parentNode.removeChild(oTrNode);
                x--;
            } */
        }
    }
</script>
</head>
<body>
<table id="mailtable">
    <tr>
        <th>
            <input type="checkbox" name="all" onclick="checkAll(this)" />全选
        </th>
        <th>
            发件人
        </th>
        <th>
            邮件名称
        </th>
        <th>
            邮件附属信息
        </th>
    </tr>

    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三
        </td>
        <td>
            我是邮件1
        </td>
        <td>
            我是附属信息1
        </td>
    </tr>
</table>

</body>
</html>

10、添加删除附件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除附件</title>
<style type="text/css">
    table a:link,table a:visited{
        color:#179ed9;
        text-decoration:none;
    }
    table a:hover{
        color:#f36021;
    }
</style>
<script type="text/javascript">
    function addFile(){
        /*
        因为文件选取框定义在行对象中
        所以只要给表格创建新的行和单元格即可
        */
        var oTabNode=document.getElementById("fileid");

        var oTrNode=oTabNode.insertRow();

        var oTdNode_file=oTrNode.insertCell();
        var oTdNode_del=oTrNode.insertCell();

        oTdNode_file.innerHTML="<input type='file'/>"
        oTdNode_del.innerHTML="<a href='javascript:void(o)' onclick='deleteFile(this)'>删除附件</a>"        
    }
    function deleteFile(node){
        var oTrNode=node.parentNode.parentNode;
        oTrNode.parentNode.removeChild(oTrNode);
    }
</script>
</head>
<body>
    <table id="fileid">
    <!-- tr是行 td是单元格都是属于table中的样式 -->
        <tr>
            <td><a href="javascript:void(0)" onclick="addFile()">添加附件</a><td>
        </tr>
        <!--  tr>
            <td><input type="file"/></td>
            <td><a href="javascript:void(o)">删除附件</a></td>
        </tr-->
    </table>

</body>
</html>

Jorocco

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础——DOM

DOM:Document Object Model(文档对象模型) 用来将标记性文档封装成对象，并将标记性文档中的所有内容（标签、文本、属性等）都封装成对象、封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容因为对象的出现就可以有属性和行为被调用文档对象模型文档：标记型文档对象：封装了属性和行为的实例，可以直接被调用模型：所有标记性文档都具备...
复制链接

扫一扫

专栏目录