js-dom_dom定义访问和操作html文档的api-CSDN博客

本文链接：https://blog.csdn.net/Z417031/article/details/127201309

js基础笔记-dom

dom：

DOM对象

document Object Model，文档对象模型，也叫 DOM树
浏览器加载整个HTML文档形成 document对象， document对象是DOM树中所有节点的根节点
DOM定义了访问和操作HTML文档的接口
通过 DOM可以改变网页的内容、结构和样式

DOM树

DOM将文档描述成一个由节点层级构成的树结构
DOM将HTML文档的各个部分都描述成一个对象，我们称之为节点；标签、属性和文本都是节点

document对象

1.当浏览器加载一个HTML文档时，会创建一个document对象，document对象是DOM树中所有节点的根节点。
2.通过document对象可以访问HTML文档中的所有元素

获取元素的方法

document.getElementById()方法根据 id属性获取元素

<!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>获取DOM节点</title>
</head>
<style>
</style>
<body>
    <div id="one" onclick="changeText()" >根据id获取节点</div>
    <!-- <div id="two">这是之前的样式</div> -->
</body>
<script>
    function changeText(){
        // document.getElementById 通过id名获取节点（文本、标签、属性）
        var getone = document.getElementById("one");
        // innerHTML属性：设置元素开始和结束标签中间的文字
        // getone.innerHTML = "这是修改后的文字";
        getone.innerHTML = "<span style='color:red;background-color:aqua'>这是修改后的文字</span>";

    }
    // var gettwo = document.getElementById("two");
</script>
</html>

document.getElementsByName()方法根据元素的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>通过name名获取元素</title>
</head>
<body>
    <input type="text" name="myInput"><br>
    <input type="text" name="myInput"><br>
    <input type="text" name="myInput"><br>
    <input type="button" value="获取元素" onclick="getDom()">
</body>
<script>
    // document.getElementsByName 通过name名获取元素（获取的是数组）
    function getDom(){
        var Doms = document.getElementsByName("myInput");
        for(var i = 0;i < Doms.length;i++){
            console.log(Doms[i]);
        }
    }
    
</script>
</html>

操作元素内容

innerHTML属性用来设置或返回开始和结束标签之间的HTML

操作元素样式

style属性用来设置更改样式

示例：模态框

<!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>模态框</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .div_out{
        position: relative;
    }

    .div_big{
        width: 40%;
        height: 400px;
        background-color: pink;
        border-radius: 10px;
        margin:25px auto;
        text-align: center;
        padding-top: 20px;
    }

    .div_input{
        /* background-color: aqua; */
        width: 70%;
        margin: 50px auto;
        font-size: 20px;
    }

    .div_input>input{
        width: 70%;
        height: 35px;
        border-radius: 10px;
        border: none;
        outline: none;
    }

    input[type="submit"]{
        width: 65%;
        height: 35px;
        border: none;
        border-radius: 10px;
        font-size: 20px;
    }

    /* 模态框样式 */
    #model{
        width: 40%;
        height: 420px;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 2px;
        left: 460px;
    }

    #hide{
        font-size: 25px;
        font-weight: 600;
        position: absolute;
        top: 20px;
        left: 1020px;
    }
</style>
<body>
    <div class="div_out">
        <!-- 登录表单 -->
        <div class="div_big">
            <h1>校园网登录</h1>
            <form action="https://www.baidu.com" method="get" onsubmit="return validity()">
                <div class="div_input">
                    登录账号：<input type="text" name="userName" id="userName">
                </div>
                <div class="div_input">
                    登录密码：<input type="password" name="userPwd" id="userPwd">
                </div>
                <div>
                    <input type="submit">
                </div>
            </form>
        </div>

        <div id="model"></div>
        <div id="hide" onclick="guan()">X</div>
    </div>
</body>
<script>
    // 获取模态框节点
    var model = document.getElementById("model");
    // 获取X的节点
    var hide = document.getElementById("hide");
    // 进入页面时，模态框和X隐藏
    model.style = "display:none";
    hide.style = "display:none";

    // 验证表单
    function validity(){
        // 获取账号节点
        var userName = document.getElementById("userName");
        // 获取密码节点
        var userPwd = document.getElementById("userPwd");
        // 姓名正则
        var nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
        // 密码正则
        var pwdReg = /^[0-9a-zA-Z]{6,12}$/;

        // 判断账号是否为空
        if(userName.value == ""){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>账号不能为空</div>";
            return false;
        }

        // 判断账号格式
        if(!nameReg.test(userName.value)){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>账号格式有误！</div>";
            return false;            
        }

        // 判断密码是否为空
        if(userPwd.value == ""){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>密码不能为空</div>";
            return false;
        }

        // 判断密码格式
        if(!pwdReg.test(userPwd.value)){
            // 当验证为空时，模态框和X都显示出来
            model.style = "display:block";
            hide.style = "display:block";
            model.innerHTML = "<div style='color:red;text-align:center;line-height:420px;font-size:30px;font-weight:600;'>请填写6-12位的密码！</div>";
            return false;            
        }
    }

    // 关闭模态框
    function guan(){
        // 点击关闭按钮时，模态框和X都隐藏
        model.style = "display:none";
        hide.style = "display:none";
    }
</script>
</html>