JavaScript用DOM实现弹窗

最新推荐文章于 2023-09-26 18:33:00 发布

「已注销」

最新推荐文章于 2023-09-26 18:33:00 发布

阅读量1.7k

点赞数

分类专栏： # 六 web前端+vue 文章标签：前端

本文链接：https://blog.csdn.net/CNMBZY/article/details/123855927

版权

六 web前端+vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
一、DOM是什么？
二、使用步骤
总结

前言

在一个html页面中，经常需要很多DOM，来实现页面的动态提交效果

一、DOM是什么？

   JavaScript中，经常需要操作DOM。所谓DOM指的是文档对象模型(Document Object Model)。提供了对文档结构化的描述，HTML页面与脚本、程序语言联系起来。
   DOM模型被构造为对象的树，该树的根节点是文档(Document)对象，该对象有一个documentElement属性的引用，表示文档根元素的Element对象.
   HTML模型被构造为对象的树，该树的根元素的Element对象是HTML元素，head和body元素可以看做树的树干。
在这里插入图片描述
图中每个元素称为一个节点，直接位于一个节点之下的的节点称为该节点的子节点(ChildNode)，位于该节点之上的节点称为父节点parentNode，具有相同父节点的两个节点被称为兄弟节点(siblingNode)

二、使用步骤

1.通过元素中的ID获取元素

代码如下（示例）：主要是在没有输入账号时返回一个弹窗，getElementID通过元素的ID属性获取元素，本文中获取了名为username的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="xxx" onsubmit="return login()">
        <p>账号：<input id="username"></p>
        <p>电话：<input id="phone"></p>
        <p><button>登录</button></p>
    </form>
    <script>
        //getElementById  ,通过ID属性获取元素节点对象
        function login(){
            var name=document.getElementById("username").value;
            if(name==""){
                alert("账号不能为空：");
                return false;//组织表单的提交
            }
            return true;//放行，让表单提交
        }
    </script>
</body>

</html>

在这里插入图片描述

2.通过元素的name属性获取元素

代码如下（示例）：通过元素的name属性获取元素，由于多个元素可能有相同的name值，该方法的返回值是一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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"></td>
            <td>冰红茶</td>
            <td>4</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one"></td>
            <td>火腿肠</td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one"></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>
</html>

在这里插入图片描述

3.表格隔行变色

代码如下（示例）：主要是返回一个购物车效果，隔行可以设置颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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"></td>
            <td>冰红茶</td>
            <td>4</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one"></td>
            <td>火腿肠</td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one"></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;
            }
        }
        var rows =document.getElementsByTagName("tr");
        for(var i=0;i<rows.length;i++){
            if(i%2==1){
                rows[i].style.backgroundColor="pink";
            }
        }
    </script>
</body>
</html>