JavaScript:DOM访问

getElementById:通过id属性,获得元素节点对象

  案例:当帐号为空时,阻止表单提交

<body>
    <form action="xxx" onsubmit="return login()">
        <p>帐号:<input id="username"/></p>
        <p>电话:<input id="phone"/></p>
        <p><button>登录</button></p>
    </form>

    <script>
        function login() {
            var name = document.getElementById("username").value ;
            if(name == ""){
                alert("帐号不能为空!");
                return false; // 阻止表单的提交
            }
            return true; // 放行,让表单提交
        }
    </script>
</body>

 

getElementsByName:通过name属性获得元素节点对象集

  案例:购物车全选效果

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
    <tr>
        <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
       <td>名称</td>
       <td>单价</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" />1</td>
        <td>功能性饮料-尖叫</td>
       <td>4.0</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" />2</td>
        <td>火腿肠</td>
        <td>2.0</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" />3</td>
        <td>包子</td>
        <td>1.5</td>
    </tr>
</table>

  <p>
      <button>提交订单</button>
  </p>

  <script>
      function quan(all) {
          var arr = document.getElementsByName("one");
          for (var i = 0; i < arr.length; i++) {
              arr[i].checked = all.checked; // 将全选框的状态,赋值给每一个复选框
          }
      }
    </script>
</body>

 

getElementsByTagName:通过标签名称获得元素节点对象集

  案例:表格隔行变色

  

<body>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
            <td>名称</td>
           <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
        </tr>
    </table>


    <script>
        var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象
集合
        for (var i = 0; i < rows.length; i++) {
        if(i % 2 == 1){ // 奇数
           rows[i].style.backgroundColor = "pink";
        }
    </script>
</body>

    

 

posted @ 2021-08-12 20:25  Jasper2003  阅读(38)  评论(0编辑  收藏  举报