2021-06-08

最新推荐文章于 2023-03-13 10:35:55 发布

瞧~

最新推荐文章于 2023-03-13 10:35:55 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/qq_52557434/article/details/117705928

版权

一、JS DOM操作

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

getElementById方法

访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id="demo" 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

HTML DOM Document 对象

文档对象代表您的网页。
访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

（1）查找HTML元素

document.getElementById(id)    通过元素 id 来查找元素
document.getElementsByTagName(name)    通过标签名来查找元素
document.getElementsByClassName(name)    通过类名来查找元素

（2）改变HTML元素

element.innerHTML = new html content    改变元素的 inner HTML
element.attribute = new value    改变 HTML 元素的属性值
element.setAttribute(attribute, value)    改变 HTML 元素的属性值
element.style.property = new style    改变 HTML 元素的样式

（3）添加和删除元素

document.createElement(element)    创建 HTML 元素
document.removeChild(element)    删除 HTML 元素
document.appendChild(element)    添加 HTML 元素
document.replaceChild(element)    替换 HTML 元素
document.write(text)    写入 HTML 输出流

（4）添加事件处理程序

document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

查找HTML元素

通过 id 查找 HTML 元素
DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。var myElement = document.getElementById("intro");

通过类名查找 HTML 元素
如果需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()

二、JS 正则表达式

语法

正则表达式是构成搜索模式（search pattern）的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作

/pattern/modifiers;

使用字符串方法

replace() 方法返回模式被替换处修改后的字符串。

search() 方法使用表达式来搜索匹配，然后返回匹配的位置

正则表达式模式

1、括号用于查找一定范围的字符串

[abc]    查找方括号之间的任何字符。    试一试
[0-9]    查找任何从 0 至 9 的数字。    试一试
(x|y)    查找由 | 分隔的任何选项。

2、元字符（Metacharacter）是拥有特殊含义的字符

\d    查找数字。    试一试
\s    查找空白字符。    试一试
\b    匹配单词边界。    试一试
\uxxxx    查找以十六进制数 xxxx 规定的 Unicode 字符。

3、Quantifiers 定义量词

n+    匹配任何包含至少一个 n 的字符串。    试一试
n*    匹配任何包含零个或多个 n 的字符串。    试一试
n?    匹配任何包含零个或一个 n 的字符串。

正则表达式修饰符

i    执行对大小写不敏感的匹配。    试一试
g    执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。    试一试
m    执行多行匹配。

三、练习

练习一：页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

练习二：使用正则表达式，让页面中这段字符串 “我爱你哈哈爱你” 中的”爱“字全变为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关卡14</title>
</head>
<body>
    <button onclick="lesson1()">练习一</button>
    <ul>
        <li class="l1">li+1</li>
        <li class="l1">li+2</li>
        <li class="l1">li+3</li>
        <li class="l1">li+4</li>
        <li class="l1">li+5</li>
    </ul>

    <button onclick="lesson2()">练习二</button>
    <p id="ai">我爱你哈哈爱你</p>

    
</body>
<script>
    function lesson1(){
          var list=document.getElementsByClassName("l1");
          for(i=0;i<5;i++)
          {
              if(i%2==0)
              list[i].style.backgroundColor="green";
              else
              list[i].style.backgroundColor="red";
          }
    }

    function lesson2(){
          var str=document.getElementById("ai").innerHTML;
          var newstr=str.replace(/爱/g,爱=>"<span style='color:red'>"+爱+"</span>");
          document.getElementById("ai").innerHTML=newstr;
    }
</script>
</html>

效果：

练习三：通过Dom操作及正则表单式完成关卡五中《阿里巴巴》注册页面表单验证
要求：电子邮箱必须为xxx@xx.com格式；
会员登录名为11位手机号格式；
密码为必须为六位数字；
验证码须为五位字母。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里巴巴注册</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <center>
    <div class="box">
        <div>
            <img src="images/图片3.png">
        </div>

        <div>
           <form action="success.html" method="post">
               <table border="0">
                   <tr class="center">
                       <td class="direction">电子邮箱：</td>
                       <td><input id="email" type="email" name="email" placeholder="xx@xx.com"></td>
                   </tr>
                   <tr>
                       <td class="direction">会员名登录：</td>
                       <td><input id="username" type="text" name="username" placeholder="11位的手机号格式"></td>
                   </tr>
                   <tr>
                       <td class="direction">密码：</td>
                       <td><input id="password" type="password" name="password" placeholder="输入六位数字"></td>
                    </tr>
                    <tr>
                        <td class="direction">再次输入密码：</td>
                        <td><input type="password" name="password-again" placeholder="输入六位数字"></td>
                    </tr>
                   <tr>
                        <td class="direction">会员身份：</td>
                        <td>
                            <input type="radio" name="radio-id" value="consumer" id="a06045" checked>买家
                            <input type="radio" name="radio-id" value="sale" id="a06046">卖家
                            <input type="radio" name="radio-id" value="both" id="a06047">两者都是
                        </td>
                   </tr>
                   <tr>
                        <td class="direction">验证码：</td>
                        <td>
                            <table>
                                <tr>
                                    <td><input id="yzm" type="text" placeholder="输入五位字母"></td>
                                    <td><img src="images/图片4.png"></td>
                                    <td><a href="#">看不清？换一张</a></td>
                                </tr>
                              </table>
                        </td>
                   </tr>
                   <tr>
                       <td><button type="button" onclick="login()">练习三：登录</button></td>
                        <td><img src="images/图片1.png"></td>
                   </tr>
                   <tr>
                    <td>&nbsp;</td>
                    <td>
                        <div>
                            <iframe src="text.html" frameborder="1" id="text" width="400px" height="100px"></iframe>
                        </div>
                   </td>
                   </tr>
               </table>
           </form>
        </div>

        <div>
            <img src="images/图片2.png">
        </div>
    </div>
</center>
</body>

<script>
    function login(){
        //name是input输入框对象,value属性获取输入框的值
        var email=document.getElementById("email").value;
        var username=document.getElementById("username").value;
        var password=document.getElementById("password").value;
        var yzm=document.getElementById("yzm").value;
         if( !(/^(\w|\d)+@\w+\.com$/.test(email))){
             alert("邮箱输入不合法")
             return;
         }
         if( !( /^\d{11}$/.test(username))){
             alert("用户名输入不合法")
             return;
         }
         if( !( /^\d{6}$/.test(password))){
             alert("密码输入不合法")
             return;
         }
         if(!(/^[A-Za-z]{5}$/.test(yzm))){
             alert("验证码输入不合法")
             return;
         }
         if(username=="12345678910" && password=="123456"){
               alert("登录成功")
                location.href="success.html";//强制跳转页面
           }
    }
</script>

</html>

效果：