jsBOM_DOM编程

最新推荐文章于 2022-06-06 11:01:25 发布

羊咩咩a284811

最新推荐文章于 2022-06-06 11:01:25 发布

阅读量152

点赞数

分类专栏：学习经验文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_43477676/article/details/111663478

版权

学习经验专栏收录该内容

35 篇文章 2 订阅

订阅专栏

BOM编程 BOM，Browser Object Model 浏览器对象模型。 BOM编程一句话概括：使用js代码控制浏览器。 BOM编程原理：浏览器被封装了不同对象，可以通过浏览器对象控制浏览器。 js提供了四个浏览器对象（window对象，history对象，location对象，screen对象），可以使用这些浏览器对象来控制浏览器。 window对象：控制；浏览器窗口方法： alert() confirm() prompt() close() open() setInterval() clearInterval() setTimeout()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        alert() 提示框
        confirm() 确认提示框，返回true，代表点击了确定，false，代表点击了取消
        prompt()  输入提示框，返回的内容是用户输入的内容
        close()   关闭当前窗口
        open(URL,name,features,replace) 打开页面 参数1：打开的页面URL地址 参数2:网页名称 参数3：窗口的特征 参数4：忽略
        setInterval(ar1,ar2) 定时任务(执行多次) 参数1：需要执行的函数 参数2：执行的周期，以毫秒计算。
        clearInterval(id_of_setInterval) 清除定时任务
        setTimeout() 定时任务（执行一次）
        moveTo(x,y) 将窗口左上角的屏幕位置移动到指定的x和y的位置
        moveBy(X,Y) 相对于目前的位置移动
        resizeTo(width,height) 调整当前浏览器的窗口
        注意：window调用属性和方法可以不写对象名称，直接调用。
        */
        //alert(window);
        //window.alert("提示框");
        /*
        var flag = window.confirm("是否继续删除记录");
        if(flag==true){
           window.alert("用户确认");
        }else{
           window.alert("用户取消");
        }
        */
        /*
        var p = window.prompt("请输入数字");
        alert("输入的数据为"+p);
        */
        /*
        function closeWindow(){
           window.close();
        }
        */
        var myOpen = window.open("页面.html","","width=100px,height=100px,titlebar=no");
        /*
        function fun1(){
            window.open("页面.html","","width=100px,height=100px,titlebar=no");
        }
        window.setInterval("fun1()",5000);
        */
        /*
        function fun1(){
            window.open("页面.html","","width=100px,height=100px,titlebar=no");
        }
        var id = window.setInterval("fun1()",5000);
        function testStop(){
            window.clearInterval(id);
        }
        */
        /*
        function fun1(){
            window.open("页面.html","","width=100px,height=100px,titlebar=no");
        }
        window.setTimeout("fun1()");
        */
        function testMove(){
            console.log("999");
            myOpen.moveTo(100,100);
        }
        function testResize(){
            myOpen.resizeTo(500,300);
        }
    </script>
</head>
<body>
<!--<input type="button" value="closewindow" οnclick="closeWindow()" >window.close案例-->
<!--<input type="button" value="stop" οnclick="testStop()" >window.clearInterval案例-->
<input type="button" value="move" onclick="testMove()" />
<input type="button" value="resize" onclick="testResize()" />
</body>
</html>

window对象包含 location history screen
location对象：
属性：href
方法：reload()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //location对象：location来自于window对象
    //属性：href 方法：reload
        function testLink(){
<!--           window.location.href = "NewUserRrgTable.html";-->
               window.location.href = "http://www.baidu.com";
        }
        function reloadLink(){
          window.location.reload();
        }
    </script>
</head>
<body>
    <input type="button" value="转换到表格网页" onclick="testLink()"/>
    <input type="button" value="刷新网页" onclick="reloadLink()"/>
</body>
</html>

history对象：
方法：forward() back() go(整数) 正整数：代表向前进 1向前1页，负整数：代表向前进 1
向前1页
网页之间的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    /*
    forward()
    back()
    go(整数) 正整数：代表向前进  1向前1页，负整数：代表向前进  1
    */
    function testLink(){
      //window.history.forward();
      window.history.go(2);
    }
    </script>
</head>
<body>
    第一页面
    <a href="js.html">link_to_page_two</a>
<input type="button" value="前进" onclick="testLink()"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
     function pageLink(){
        window.history.back();
     }
    </script>
</head>
<body>
    第二页面
    <a href="javascript.html">link_to_page_three</a>
<input type="button" value="后退" onclick="pageLink()"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
         function pLink(){
             window.history.back();
         }
     </script>
</head>
<body>
  第三页面
     <input type="button" value="后退" onclick="pLink()"/>
</body>
</html>

screen对象：
属性：availHeight availWidth width height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    /*
    属性：
      availHeight availWidth width height
    */
    var screen = window.screen;
    document.write(screen.availHeight+"<br/>");
    document.write(screen.availWidth+"<br/>");
    document.write(screen.width+"<br/>");
    document.write(screen.height+"<br/>");
    </script>
</head>
<body>
</body>
</html>

js事件编程 js函数入门

gui事件编程
事件源：事件发生的源头（窗体、按钮、菜单）
事件：窗口事件(windowEvent)，键盘事件(KeyEvent)，鼠标事件(MouseEvent)
监听器：可以监听某类事件的发送，并且触发业务逻辑。

import java.awt.*;
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;

/**
 * TO DO
 *需求：
 * 1.设计一个窗体(Frame)
 * 2.当想关闭窗口时，点击窗口的关闭按钮，会触发窗体的消失，并程序停止
 * 事件源：窗体（Frame）
 * 事件对象：窗口事件（WindowEvent）
 * 监听器：窗口监听器（WindowListener）
 * 事件编程步骤：
 * 1.编写事件源
 * 2.编写监听器程序（实现某个监听接口）
 * 3.注册监听器（把事件源和监听程序绑定在一起）
 * @author yll
 * @date 2020/12/25 13:18
 */
public class guijava {
    public static void main(String[] args){
        //创建窗体
        Frame f = new Frame();
        //设置窗体大小
        f.setSize(300,300);
        //设置窗体可见
        f.setVisible(true);
        //注册监听器
        f.addWindowListener(new MyWindowListener());
    }
}
//监听程序
class MyWindowListener implements WindowListener{

    @Override
    public void windowOpened(WindowEvent windowEvent) {

    }

    @Override
    public void windowClosing(WindowEvent windowEvent) {
        System.out.println("windowClosing");
        //窗体消失
        Frame f = (Frame) windowEvent.getSource();
        f.setVisible(true);
        //程序停止
        System.exit(-1);
    }
  //当窗口关闭后触发的方法
    @Override
    public void windowClosed(WindowEvent windowEvent) {
      System.out.println("windowClosed");
    }

    @Override
    public void windowIconified(WindowEvent windowEvent) {

    }

    @Override
    public void windowDeiconified(WindowEvent windowEvent) {

    }

    @Override
    public void windowActivated(WindowEvent windowEvent) {

    }

    @Override
    public void windowDeactivated(WindowEvent windowEvent) {

    }
}

js事件编程
事件源：事件发生的源头（网页的html标签）
事件：选项事件，键盘事件，鼠标事件，页面事件
监听器：使用js函数编写监听器程序
js编程步骤
1.编写事件源
2.编写监听器（js函数）
3.注册监听器（onclick ondblclick onchage…）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
<!--     需求：在页面上设计一个按钮，点击此按钮，弹出提示"点击"-->
    <!--  监听器 js函数-->
    function fun1(){
      alert("点击");
    }
    </script>
</head>
<body>
<!--事件源-->
<input type="button" value="按钮" onclick="fun1()"/>
<!--οnclick="fun1()"注册监听器-->
</body>
</html>

注册事件的两种方式
1.直接在事件源(标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
<!--     需求：在页面上设计一个按钮，点击此按钮，弹出提示"点击"-->
    <!--  监听器 js函数-->
    function fun1(){
      alert("点击");
    }
    </script>
</head>
<body>
<!--事件源-->
<input type="button" value="按钮" onclick="fun1()"/>
<!--οnclick="fun1()"注册监听器-->
</body>
</html>

问题：代码和html标签依赖。好处：可以更加方便从标签内部传递参数 2.先获取事件源对象，在使用属性去注册事件给监听器（实际应用中建议使用这种方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--事件源-->
<input type="button" value="按钮" id="event"/>
<!--οnclick="fun1()"注册监听器-->
</body>
<script type="text/javascript">
<!--     需求：在页面上设计一个按钮，点击此按钮，弹出提示"点击"-->
    <!--  监听器 js函数-->
    function fun1(){
      alert("点击");
    }
    //得到事件源对象
    var event = document.getElementById("event");
    //注册事件给监听器
    event.onclick = function(){
       //alert("点击");
       fun1();
    }
    </script>
</html>

//得到事件源对象
var event = document.getElementById(“event”);
//注册事件给监听器
event.onclick = function(){
fun1();
}
好处：js事件代码和html代码进行分离，方便代码管理。
问题：不能从标签内部传递参数。
js时间分类
点击相关：
onclick 单击事件
ondblclick 双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      /*
      点击相关
      */
      function pageLink(){
            alert("onclick");
      }
     </script>
</head>
<body>
<!--    <input type="button" value="click" οnclick="pageLink()"/>-->
    <input type="button" value="click" ondblclick="pageLink()"/>
</body>
</html>

页面加载相关
onload 加载页面（当html页面加载完后才触发此方法）
onunload 退出页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      /*
      页面加载相关
      */
      function fun1(){
           // alert("onload");
            var loadid = document.getElementById("loadid");
            alert(loadid);
      }
      function fun2(){
            alert("离开了");
      }
     </script>
</head>
<body onload="fun1()" onunload="fun2()">
    <input type="button" id="loadid" value="click"/>
</body>
</html>

鼠标相关
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
onmouseover 鼠标移到某个元素上
onmouseout 鼠标从某个元素离开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      /*
      鼠标相关
      */
    #div{
       width:100px;
       height:100px;
       background-color:red;
    }
    </style>
    <script type="text/javascript">
      function downMethod(){
         alert("downMethod");
      }
      function upMethod(){
         alert("upMethod");
      }
      function moveMethod(){
         alert("moveMethod");
      }
      function overMethod(){
         alert("overMethod");
      }
      function outMethod(){
         alert("outMethod");
      }

     </script>
</head>
<body>
       <div id="div"  onmousedown="downMethod()" onmouseup="upMethod()" onmousemove="moveMethod()" onmouseover="overMethod()" onmouseout="outMethod()"> </div>
</body>
</html>

焦点相关
onfocus 获得焦点
onblur 失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    console.log("userName");
        function myfocus(){
            var userName = document.getElementsByName("username")[0];
            userName.value = "";
        }
        function myblur(){
         var username = document.getElementsByName("username")[0].value;
         var userTip = document.getElementById("userTip");
         if(username=="hellojava"){
           userTip.innerHTML = "该用户名已存在".fontcolor("red");
         }else{
           userTip.innerHTML = "该用户名可使用".fontcolor("green");
         }
        }
     </script>
</head>
<body>
请输入用户名：<input type="text" value="请输入6-16为英语字符" name="username" onfocus="myfocus()" onblur="myblur()"/><span id="userTip"></span>
</body>
</html>

选项相关
onchange 选项改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    function change(){
       var c = document.getElementById("prov");
       alert(c.value);//选项的值
       alert(c.selectedIndex);//当前选项的下标
    }
    </script>
</head>
<body>
    省份
   <select onchange="change()" id="prov">
       <option value="sc">四川</option>
       <option value="cq">重庆</option>
       <option value="yn">云南</option>
       <option value="gz">贵州</option>
   </select>
</body>
</html>

表单提交相关
onsubmit 表单提交时触发
return true/false
true: 提交表单 false:不提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册界面</title>
    <script type="text/javascript">


<!--        正则表达式-->
<!--        用户名： 6-16位字母或数字，下划线-->
<!--        密码：4-12位数字-->
<!--        邮箱：邮箱规则 xxxx@xxxx.com  xxxx@xxxx.com.cn-->
<!--        字母或数字或下划线（至少一个）@字母或数字（两个以上）.字母（2-3个）.（字母 2-3个 可有可无）-->
<!--        -->
        function checkName(){
           var name = document.getElementsByName("username")[0].value;
           //var reg = new regExp("^[a-z0-9_]{6-16}$");
           var reg = /^[a-z0-9_]{6,16}$/i;
           if(!reg.test(name)){
              alert("用户名输入不规范");
              return false;
           }
           return true;
        }
        function checkPassword(){
           var pw = document.getElementsByName("password")[0].value;
<!--           var reg = new RegExp("^[0-9]{4,12}$");-->
           var reg = /^[0-9]{4,12}$/;
           if(!reg.test(pw)){
              alert("密码输入不规范");
              return false;
           }
           return true;
        }
        function checkEmail(){
           var mail = document.getElementsByName("email")[0].value;
           var reg = new RegExp(/^\w+@[a-z0-9]{2,}\.[a-z]{2,3}(\.[a-z]{2,3})?$/i);
           var reg = /^\w+@[a-z0-9]{2,}\.[a-z]{2,3}(\.[a-z]{2,3})?$/i;
           if(!reg.test(mail)){
              alert("邮箱输入不规范");
              return false;
           }
           return true;
        }
        function checkInformation(){
          if(checkName()&&checkPassword()&&checkEmail()){
               return true;
          }else{
               return false;
          }
        }
    </script>
</head>
<body>
<fieldset>
    <!--<legend>注册用户</legend>-->
    <form action="a.html" method="post" onsubmit="return checkInformation()">
<table algin="left" border="1" width="400px">
      <caption align="center">
          <font color="blue">新用户注册</font>
      </caption>
      <tr>
          <td>用户名：</td>
          <td align="center"><input type="text" name="username" onblur="checkName()"/></td>
      </tr>
      <tr>
          <td>密码：</td>
          <td align="center"><input type="text" name="password" onblur="checkPassword()"/></td>
      </tr>
      <tr>
          <td>性别：</td>
          <td><input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女</td>
      </tr>
      <tr>
          <td>邮箱：</td>
          <td><input type="text" name="email" onblur="checkEmail()"/></td>
      </tr>
      <tr>
          <td>爱好：</td>
          <td><input type="checkbox" name="hobby" value="吃饭"/>吃饭 <input type="checkbox" name="hobby" value="睡觉"/>睡觉 <input type="checkbox" name="hobby" value="玩游戏"/>玩游戏</td>
      </tr>
      <tr>
          <td>城市：</td>
          <td>
              <select name="city">
                  <option>
                      请选择城市
                  </option>
                  <option name="上海">
                      上海
                  </option>
                  <option name="北京">
                      北京
                  </option>
                  <option name="深圳">
                      深圳
                  </option>
                  <option name="广州">
                      广州
                  </option>
              </select>
          </td>
      </tr>
      <tr>
          <td>
              头像
          </td>
          <td>
              <input type="file" name="head"/>
          </td>
      </tr>
      <tr>
          <td colspan="2" align="center">
              <input type="submit" value="确认"/> <input type="reset" value="取消"/>
          </td>
      </tr>
</table>
    </form>
</fieldset>
</body>
</html>

DOM编程

DOM：Document Object Model 文档对象模型
使用js代码控制HTML或CSS内容。
DOM编程原理：html页面内容会被封装成不同的对象，通过这些对象控制html页面（包括CSS）。
父类：node对象(节点)
document对象（文档） element对象（元素） attr对象（属性） text对象（文本） comment对象（注释）
自身属性：
nodeName节点名称 nodeValue节点值 nodeType节点类型
关系属性
parentNodes父节点childNodes 子节点 firstchild第一个子节点lastChild 最后一个子节点 nextSibling下一个兄弟节点 previousSibling上一个兄弟节点

在这里插入图片描述
空格和换行是text对象

5类DOM对象的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <a href="a.html" id="a">超链接</a>
</body>
    <script>
        //得到document对象
        var doc = window.document;
        document.write(doc.nodeName);
        document.write(doc.nodeValue);
        document.write(doc.nodeType);
        document.write("<hr/>");
        //得到element对象
        var ele = document.getElementById("a");
        document.write(ele.nodeName);
        document.write(ele.nodeValue);
        document.write(ele.nodeType);
        document.write("<hr/>");
        //得到atrr对象
        var atr = ele.getAttributeNode("href");
        document.write(atr.nodeName);
        document.write(atr.nodeValue);
        document.write(atr.nodeType);
        document.write("<hr/>");
        //得到text对象
        var text = ele.firstChild;
        document.write(text.nodeName);
        document.write(text.nodeValue);
        document.write(text.nodeType);
    </script>
</html>

在这里插入图片描述
获取节点对象1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    请输入姓名：<input type="text" id="a" name="username" onblur="myblur()"/>
</body>
    <script>
        //document获取节点的方法：
<!--         document.getElementsByName();//根据name属性获取元素-->
<!--         document.getElementById();//根据id属性获取元素（元素必须有id值）-->
<!--         document.getElementsByTagName();//根据标签名获取元素-->
        function myblur(){
        //获取元素1
        /*
             var userElement = document.getElementById("a");//返回一个element对象
             //alert(userElement);
             //获取属性值
             //alert(userElement.getAttribute("value");//只能获取到声明的属性
             alert(userElement.value);//可以获取到所有属性（包括没有声明的）
             */
        //获取元素2
        /*
             var username = document.getElementsByName("username")[0];//返回多个element对象的数组
             //alert(userElement);
             //获取属性值
             //alert(userElement.getAttribute("value");//只能获取到声明的属性
             alert(username.value);//可以获取到所有属性（包括没有声明的）
             */
        //获取元素3
             var userTagName = document.getElementsByTagName("input")[0];//返回多个element对象的数组
             //alert(userElement);
             //获取属性值
             //alert(userElement.getAttribute("value");//只能获取到声明的属性
             alert(userTagName.value);//可以获取到所有属性（包括没有声明的）
        }
    </script>
</html>

获取节点对象2
document.all
document.forms
document.images
document.links

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
     <form>
         用户名：<input type="text" name="username"/>
         <form></form>
         <img/>
         <a href="1.html">link1</a>
         <a href="1.html">link1</a>
         <a href="1.html">link1</a>
         <a href="1.html">link1</a>
     </form>
</body>
     <script type="text/javascript">
       /*
         document对象的属性:
                all:获取html页面的所有元素
                forms:获取所有<form/>元素
                images:获取所有<img/>元素
                links:获取所有<a/>元素
       */
       //先取到document对象
       var doc = window.document;
       //属性
       var ele = doc.all;
<!--       var ele = doc.forms;-->
<!--       var ele = doc.images;-->
<!--       var ele = doc.links;-->
       for(var i = 0 ;i<ele.length;i++){
          alert(ele[i].nodeName);
       }
    </script>
</html>

获取节点对象3
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <form id="f1">
    用户名：<input type="text" name="username"/>
    </form>
    <form>

    </form>
    <img/>
    <a href="1.html">link1</a>
    <a href="1.html">link1</a>
    <a href="1.html">link1</a>
    <a href="1.html">link1</a>
</body>
    <script type="text/javascript">
       var f1 = document.getElementById("f1");
       console.log(f1);
       //f1的父节点
      // alert(f1.parentNode.nodeName);
       //子节点包括空格和换行
       var listNode = f1.childNodes;//返回数组
       //遍历
       for(var i in listNode){
       if(listNode[i].nodeType==1){
          alert(listNode[i].nodeName);
          }
       }
    </script>
</html>

案例演示：
随机滚动广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <img id="imageid" src="image/1.jpg" width="300px" height="300px" />
</body>
    <script>
       //定时器更新 3秒换图
       window.setInterval("fun1()",3000);
     function fun1(){
        //随机获取图片的名称
        var num = Math.ceil(Math.random()*4);
        var name = "image/"+num+".jpg";
        //获取img属性
        var image1 = document.getElementById("imageid");
        //改变img属性值
        image1.setAttribute("src",name);
     }
    </script>
</html>

全选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <input type="checkbox" name="checked1" onclick="checkAll(this)"  />全选/反选<br/>
     <input type="checkbox" name="item" value="1"/>one<br/>
     <input type="checkbox" name="item" value="2"/>two<br/>
     <input type="checkbox" name="item" value="3"/>three<br/>
     <input type="checkbox" name="item" value="4"/>four<br/>
     <input type="checkbox" name="item" value="5"/>five<br/>
     <input type="checkbox" name="item" value="6"/>six<br/>
     <input type="checkbox" name="checked1" onclick="checkAll(this)" />全选/反选<br/>
     <input type="button"  value="总金额" onclick="getSum()"/><span id="sumid"></span>
</body>
    <script>
<!--      function checkAll(){-->
<!--      //this:代表当前元素对象-->
<!--      //1.得到当前名为item的元素-->
<!--      var name  = document.getElementsByName("item");-->
<!--      //该表名为item对象的"checked"属性:true:选中 false:没选择(默认)-->
<!--      for(var i = 0;i<name.length;i++){-->
<!--      //如果当前item被选中，checked为false-->

<!--         if(name[i].checked==true){-->
<!--            //name[i].setAttribute("checked","false");//存在浏览器兼容问题-->
<!--            name[i].checked=false;//改变属性-->
<!--         }else{-->
<!--            //name[i].setAttribute("checked","true");-->
<!--            name[i].checked=true;-->
<!--         }-->

<!--      }-->
<!--      }-->
      function checkAll(elem){
      //this:代表当前元素对象
      //1.得到当前名为item的元素
      var name  = document.getElementsByName("item");
      //获取全选反选的状态
      var status = elem.checked;
      //该表名为item对象的"checked"属性:true:选中 false:没选择(默认)
      for(var i = 0;i<name.length;i++){
      //如果当前item被选中，checked为false
         /*方法2*/
         //直接将全选/反选的状态赋值给其他
         name[i].checked = status;
      }
      }
      //计算总金额
      function getSum(){
         //1.获取所有item对象 2.筛选checked=true的item 3.取出item的value值 4.进行加总
         var name = document.getElementsByName("item");
         var sum =0;
         for(var i = 0;i<name.length;i++){
           if(name[i].checked==true){
             sum+=parseInt(name[i].value);
           }
         }
         //5.获取span元素 6.设置span的文本内容:innerHTML 用于设置文本内容
         var sum1 = document.getElementById("sumid");
         sum1.innerHTML = sum+"元";
      }
    </script>
</html>

动态表格


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Title</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>
<table border="1" width="400px">
    <thead>
    <tr>
        <td>用户名</td>
        <td>密码</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="text" name="userName"/></td>
        <td><input type="password" name="userPwd"/></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>
            <input type="button" value="添加" onclick="addItem()"/>
            <input type="button" value="删除" onclick="delItem()"/>
            <input type="button" value="保存"/>
        </td>
    </tr>
    </tfoot>
</table>
</body>

<script type="text/javascript">
  		var count = 1;
  		//添加一行
 		function addItem(){
 			/*
 			<tr>
  			<td><input type="text" name="userName"/></td>
  			<td><input type="password" name="userPwd"/></td>
  			</tr>

 			*/
 			//1）创建tr元素： document.creatElement("元素名称");  返回新元素对象
 			var trElem = document.createElement("tr");
 			
 			var tdElem1  = document.createElement("td");
 			var nameElem  = document.createElement("input");
 			nameElem.setAttribute("type","text");
 			nameElem.setAttribute("name","userName");
 			tdElem1.appendChild(nameElem);
 			
 			var tdElem2  = document.createElement("td");
 			var pwdElem  = document.createElement("input");
 			pwdElem.setAttribute("type","password");
 			pwdElem.setAttribute("name","userPwd");
 			tdElem2.appendChild(pwdElem);
 			 
 			 //2)插入元素:
 			//   element.appendChild(新元素对象)； 在当前元素的最后一个子元素插入新元素
 			 trElem.appendChild(tdElem1);
 			 trElem.appendChild(tdElem2);
 			
 			var tbodyElem = document.getElementsByTagName("tbody")[0];
 			tbodyElem.appendChild(trElem);
 			
 			count++;
 		}	
 		
 		
 		//删除一行
 		function delItem(obj){	
 			if(count>1){
	 			//1）获取所有tbody中的tr元素(子元素)
	 			var tbody = document.getElementsByTagName("tbody")[0];
	 		
	 			//2)删除最后一个子元素 : removeChild(需要删除的元素)
				tbody.removeChild(tbody.lastChild);
				count--;
			} 			
 		}
 		</script>





</html>

二级下拉菜单


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Title</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>
省份：
<select id="province" onchange="getCity()">
    <option >广东</option>
    <option>广西</option>
    <option>湖南</option>
</select>
城市:
<select id="city"></select>
</body>

<script type="text/javascript">
  			function getCity(){
  				//1)有所有城市的数据
  				var cityData = [["广州","深圳","东莞"],["桂林","南宁","玉林"],["长沙","邵阳","湘潭"]];
  				//2)获取选择的省份
  				var province = document.getElementById("province");
  				//获取选项的下标
  				var index = province.selectedIndex;
  				//3)筛选所在省份的城市数据
  				var targetCity = cityData[index]; //["广州","深圳","东莞"]

  				//4)把城市数据放入select元素中
  				var city = document.getElementById("city");

  				//清除city城市数据
  				/*
  				var childs = city.childNodes;
  				for(var i=0;i<childs.length;){
  					city.removeChild(childs[i]);
  				}
  				*/
  				city.options.length = 0;

  				// <option>广州</option>
  				for(var i=0;i<targetCity.length;i++){
  					var opt = document.createElement("option");
  					opt.innerHTML = targetCity[i];
  					city.appendChild(opt);
  				}
  			}
 		</script>
</html>