DOM

发布时间 : 2021-04-14 11:26

阅读 :

关于 DOM 对象的操作
1. 获取节点
2. 更新节点
DOM表单操作
1. 获取和设置表单的值
2. 前端表单提交验证及密码MD5加密
事件
1. oncalik

关于 DOM 对象的操作

获取节点

更新节点

（1）修改指定节点的文内容:

1	节点属性.innerText="修改后的文本内容";

(2) 解析 HTML 文本标签：

1	文本加粗 eg: 节点属性.innerHTML="<strong>需要加粗的文本内容</strong>"

(3) 追加标签:

（4）在前面添加节点:

            let h01=document.getElementById("h01");
            let p01=document.getElementById("p01");
            let outId=document.getElementById("outId");
            outId.insertBefore(p01,h01);
````
## 删除节点
 (1）直接通过该节点的父节点删除该节点:
```html
            父节点.removeChild(选择删除的子节点);

(2) 通过子节点获取父节点，然后通过父节点删除子节点:

1
2
3

<!--设置一个变量用来获取父节点-->    
let out=子节点.parentElement;
 out.removeChild(字节点);

(3) 通过索引删除子节点:

1	父节点.removeChild(父节点.children[索引]);

DOM表单操作

获取和设置表单的值

    <title>guolulude</title>
<p>
        <span>用户名</span> <input type="password",name="密码" id="passwords">
    </p>
   <p>
       <input type="radio" name="sex" id="jizhumima" value="1"> 记住密码
       <input type="radio" name="sex" id="wangjimima" value="2"> 忘记密码
   </p>
    <script>
    "use strict";
    let remember=document.getElementById("jizhumima");
    let forget=document.getElementById("wangjimima");
    let password=document.getElementById("passwords");
    <!--修改密码-->
    password.value="guolulu";
    <!--获得密码-->
    let pwd=password.value;
    <!--获取单选框的值-->
    let rememberValue=remember.value;
    <!--获取单选框的状态，返回值为boolean值,ture表示选中,false表示未选中-->
     forget.checked;
    </script>

前端表单提交验证及密码MD5加密

"https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js " 该加密脚本不是我写的！！
            <!DOCTYPE html>
        <html lang="en">
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
        <head>
            <meta charset="UTF-8">
            <title>guolulude</title>
            <form action="https://froginthewell.github.io/"  method="post"  onsubmit="return shout()">
                <p>
                    <span>用户名</span> <input type="text",name="name" id="name">
                </p>
                <p>
                    <span>用户密码</span> <input type="password",name="password" id="passwords">
                    <button type="submit" >登录</button>
                </p>
                <p>
                    <input type="radio" name="sex" id="jizhumima" value="1"> 记住密码
                    <input type="radio" name="sex" id="wangjimima" value="2"> 忘记密码
                </p>
                <input type="hidden" name="password" id="hide">
            </form>
            <script>
                "use strict";
                let name=document.getElementById("name");
                let password=document.getElementById("passwords");
                let hisepwd=document.getElementById("hide");
                let pwd=md5("123456");
                /**
                 * function 用来定义方法的变量
                */
                function shout(){
                    if(name.value=="2356645209"&&md5(password.value)==pwd){
                        hide.value=md5(password.value);
                        return true;
                    }else {
                        alert("用户名或密码错误请重新输入！")
                        return false;
                    }
                }
            </script>
        </head>
        <body>
        <!--<script>alert("javaScript")</script>-->
        </body>
        </html>

事件

oncalik

oncalik 单击事件
当被点击时触发被绑定的事件
基本语法：

1	onclik="被点击时触发的事件事件"

例如：当一个图片被点击时切换的事件：

<body>
<img  id="imgT" width="400px" height="300px" src="https://cdn.jsdelivr.net/gh/FrogInTheWell/image/img/1.png">
<script>
    /**
     * 获取被绑定对象
     */
    var  imgchange=document.getElementById("imgT");
    /**
     * judgment用来判断被绑定事件当前状态
     */
    var judgment=false;

    /**
     * 创建单击事件方法
     */
    imgchange.onclick=function () {
        if(judgment){
            imgchange.src="https://cdn.jsdelivr.net/gh/FrogInTheWell/image/img/1.png";
            judgment=false;
        }else {
            imgchange.src="https://cdn.jsdelivr.net/gh/FrogInTheWell/image/img/2.png";
            judgment=true;
        }
    }

</script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com