javaScript(正则,DOM)

最新推荐文章于 2023-12-21 22:12:42 发布
最新推荐文章于 2023-12-21 22:12:42 发布
阅读量238 收藏 1
点赞数 2
分类专栏： javascript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62520946/article/details/125589260
版权

目录

正则语法

练习

邮件的正则

DOM

 节点

事件

文档的加载

dom查询

获取元素节点

 获取元素节点的子节点

获取父节点和兄弟节点

 练习（轮播图）

正则语法

. 表示任意字符

在正则表达式中使用\作为转义字符

\. 表示 .

var reg=/\./;
        console.log(reg);//   /\./
        console.log(reg.test("basd"));//false

\\  表示 \

reg=/\\/;
        console.log(reg.test("b.\\"));//true
        console.log("b.\\");//b.\

注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中的转义字符，如果要使用\\则需要使用\\来代替

reg=new RegExp("\\.");
        console.log(reg);//     /\./

        reg=new RegExp("\.");
        console.log(reg);//        /./

\w任意数字，字母，_     [A-z 0-9]
\W除了任意数字，字母，_   [^A-z 0-9]
\s空格
\S除了空格
\d任意数字  [0-9]
\D除了数字   [^0-9]
\b单词边界
\B除了单词边界
reg=/\w/;
        console.log(reg.test("abc"));//true
        console.log(reg.test("!@!@#"));//false

        reg=/\s/;
        console.log(reg.test("12 3"));//true
        console.log(reg.test("123"));//false
        console.log(reg.test("    "));//true

        reg=/\S/;
        console.log(reg.test("123"));//true
        console.log(reg.test("    "));//false
        console.log(reg.test("12 3"));//true

//      创建一个正则表达式检查一个字符串是否还有单词child
        reg=/\bchild\b/;

        console.log(reg.test("hello child"));

练习

对用户名去除前边和后边的空格

// 接受一个用户的输入
        // var str=prompt("请输入您的用户名");
        var str="          he  llo      ";
//      去除字符串中的空格
//      去除空格就是使用“”来替代空格
        console.log(str);
        // str=str.replace(/\s/g,"");
        // 缺点：会把单词与单词之间的空格一块省去
        // 所以有以下方法
        // 去除开头的空格
        str=str.replace(/^\s*/,"");
        // 去除结尾的空格
        str=str.replace(/\s*$/,"");

        console.log(str);

邮件的正则

// 任意字母数字下划线  .  任意字母数字下划线  @  
        // 任意字母数字  .  任意字母（2-5位）  . 任意字母（2-5位）
        // \w{3,}  .  (\.\w+)*   @  [A-z0-9]+  .  (\.[A-z]{2,5}){1,2}
        var emailReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

        var email="abc@abc.com";

        console.log(emailReg.test(email));

DOM

简介

全称Document Object Model文档对象模型

文档：整个的HTML网页文档

对象：将网页中的每一个部分转换位了一个对象

模型：使用模型来表示对象之间的关系，这样方便我们获取对象

 节点

Node——构成HTML文档最基本的单元

常用节点分为4类

  1. 文档节点：整个HTML文档
  2. 元素节点：HTML文档中的HTML标签
  3. 属性节点：元素的属性
  4. 文本属性：HTML标签中的文本内容

<body>
    <!-- 浏览器已经为我们提供文档节点对象，这个对象的window属性
    可以在页面中直接使用，文档节点代表的是整个网页 -->
    <button id="btn">我是一个按钮</button>
    <script>
        // console.log(document);

        // 获取到button对象
        var btn=document.getElementById("btn");

        // 修改按钮的文字
        btn.innerHTML="I'm button";
    </script>
</body>

事件

用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口等等

<!--  这种写法我们称为结构和行为耦合，不方便维护，不推荐使用-->
    <button id="btn" onclick="alert('讨厌，点我干嘛');">我是一个按钮</button>

可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被处罚是，其对应的函数将会被调用，像这样为单击事件绑定的函数，我们称为单机响应函数

<body>
    <button id="btn">我是一个按钮</button>
    <script>
        //获取按钮对象
        var btn=document.getElementById("btn");
        // 绑定单击事件
        btn.onclick=function(){
            alert("你还点~~~~~~~");
        }

    </script>
</body>

文档的加载

  • 将js代码编写到页面的下部就是未来可以在页面加载完毕以后再执行js代码
  • onload事件会在整个页面加载完成之后才出发，为window绑定一个onload事件,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
  • 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载Dom对象也没有加载，会导致无法获取到Dom对象
<!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>
    <script>
      window.onload = function () {
        // 获取id为btn的按钮
        var btn = document.getElementById("btn");
        //      为按钮绑定一个单机响应函数
        btn.onclick = function () {
          alert("hello");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>
  </body>
</html>

dom查询

获取元素节点

  • 通过document对象调用
getElementById()通过id属性获取一个元素节点对象
getElementsByTagName()通过标签名获取一组元素节点对象
getElementsByName()通过name属性获取一组元素节点对象

innerHTML用于获取元素内部的HTML代码

如果需要读取元素节点属性，直接使用元素.属性名

例子：元素.id    元素.name   元素.value

注意：class属性不能采用这种方式，读取class属性时需要使用   元素.className

 获取元素节点的子节点

  • 通过具体的元素节点调用

getElementByTagName()

方法，返回当前节点的指定标签名代节点

childNodes

属性，表示当前节点的所有子节点

childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签间的空白也会当成文本节点

注意：在IE8及以下的浏览器中，不会将空白文本当成子节点

children

属性，可以获取当前元素的所有子元素

firstChild

属性，表示当前节点的第一个子节点（包括空白文本节点）

firstElementChild

获取当前元素的第一个子元素

不支持IE8以下的浏览器

lastChild

属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

  • 通过具体的节点调用

parentNode

属性，表示当前节点的父节点

previousSibling

属性，表示当前节点的前一个兄弟节点

nextSibling

属性，表示当前节点的后一个兄弟节点

<!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>
    <script>
      window.onload = function () {
        // 定义一个函数，专门用来为指定元素绑定单击响应函数
        // 参数：
        // idStr   要绑定单击响应函数的对象的id属性值
        // fun     事件的回调函数，当单击元素是，该函数将会被触发
        function myClick(idStr, fun) {
          var btn = document.getElementById(idStr);
          btn.onclick = fun;
        }

        // 为id为btn01的按钮绑定一个单击响应函数
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          // alert("hello");
          // 查找#bj节点
          var bj = document.getElementById("bj");
          // 打印bj
          //   alert(bj);//[object HTMLLIElement]
          // innerHTML，通过这个属性可以获取到元素内部的html代码
          alert(bj.innerHTML);
        };

        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
          // 查找所有li节点
          // getElementByTagName()可以根据标签名来获取一组元素节点对象
          // 这个方法会给我们返回一个类数组对象，所有查询到的元素会封装到对象中
          var lis = document.getElementsByTagName("li");
          // 打印lis
          // alert(lis.length);

          // 变量lis
          for (var i = 0; i < lis.length; i++) {
            alert(lis[i].innerHTML);
          }
        };

        var btn03 = Document.getElementById("btn03");
        btn03.onclick = function () {
          // 查找name=gender的所有节点
          var inputs = document.getElementsByName("gender");

          // alert(inputs.length);
          for (var i = 0; i < inputs.length; i++) {
            // alert(inputs[i].innerHTML);
            //              innerHTML用于获取元素内部的HTML代码的
            //              对于自结束标签，这个属性没有意义
            // 如果读取元素节点属性
            // 直接使用  元素.属性名
            alert(inputs[i].className);
          }
        };

        var btn04 = document.getElementById("btn04");
        btn04.onclick = function () {
          // 获取id为city都元素
          var city = document.getElementById("city");
          // 查找#city下所有li节点
          var lis = city.getElementsByTagName("li");
          for (var i = 0; i < lis.lenth; i++) {
            alert(lis[i].innerHTML);
          }
        };

        var btn05 = document.getElementById("btn05");
        btn05.onclick = function () {
          var city = document.getElementById("city");
          // 返回#city的所有子节点
          var cns = city.childNodes;
          // alert(cns.length);
          for (var i = 0; i < cns.length; i++) {
            alert(cns[i]);
          }

          var cns2 = city.children;
          alert(cns2.length);
        };

        var btn06 = document.getElementById("btn06");
        btn06.onclick = function () {
          // 获取id为phone的元素
          var phone = document.getElementById("phone");
          // 返回#phone的第一个子节点
          phone.childNodes[0];

          var fir = phone.firstChild;
          alert(fir);
        };
        //为id为btn07的按钮绑定一个单击响应函数
        myClick("btn07", function () {
          //获取id为bj的节点
          var bj = document.getElementById("bj");

          //返回#bj的父节点
          var pn = bj.parentNode;

          alert(pn.innerHTML);
        });

        //为id为btn08的按钮绑定一个单击响应函数
        myClick("btn08", function () {
          //获取id为android的元素
          var and = document.getElementById("android");

          //返回#android的前一个兄弟节点（也可能获取到空白的文本）
          var ps = and.previousSibling;

          //previousElementSibling获取前一个兄弟元素，IE8及以下不支持
          //var pe = and.previousElementSibling;

          alert(ps);
        });

        //读取#username的value属性值
        myClick("btn09", function () {
          //获取id为username的元素
          var um = document.getElementById("username");
          //读取um的value属性值
          //文本框的value属性值，就是文本框中填写的内容
          alert(um.value);
        });

        //设置#username的value属性值
        myClick("btn10", function () {
          //获取id为username的元素
          var um = document.getElementById("username");

          um.value = "今天天气真不错~~~";
        });

        //返回#bj的文本值
        myClick("btn11", function () {
          //获取id为bj的元素
          var bj = document.getElementById("bj");

          //alert(bj.innerHTML);
          //alert(bj.innerText);

          //获取bj中的文本节点
          /*var fc = bj.firstChild;
					alert(fc.nodeValue);*/

          alert(bj.firstChild.nodeValue);
        });
      };
    </script>
  </head>
  <body>
    <div class="total">
      <div class="inner">
        <p>你喜欢哪个城市？</p>
        <ul id="city">
          <li id="bj">北京</li>
          <li>上海</li>
          <li>东京</li>
          <li>首尔</li>
        </ul>
        <br />
        <br />
        <p>你喜欢哪款单机游戏？</p>
        <ul id="game">
          <li class="rl">红警</li>
          <li>实况</li>
          <li>极品飞车</li>
          <li>魔兽</li>
        </ul>
        <br />
        <br />
        <p>你手机的操作系统是？</p>
        <ul id="phone">
          <li>IOS</li>
          <li id="android">Android</li>
          <li>Windows Phone</li>
        </ul>
      </div>
      <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male" />
        Male
        <input class="hello" type="radio" name="gender" value="female" />
        Female
        <br />
        <br />
        name:
        <input type="text" name="name" id="username" value="abcde" />
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">查找#bj节点</button></div>
      <div><button id="btn02">查找所有li节点</button></div>
      <div><button id="btn03">查找name=gender的所有节点</button></div>
      <div><button id="btn04">查找#city下所有li节点</button></div>
      <div><button id="btn05">返回#city的所有子节点</button></div>
      <div><button id="btn06">返回#phone的第一个子节点</button></div>
      <div><button id="btn07">返回#bj的父节点</button></div>
      <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
      <div><button id="btn09">返回#username的value属性值</button></div>
      <div><button id="btn10">设置#username的value属性值</button></div>
      <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
  </body>
</html>

 练习（轮播图）

<!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>
    <style>
      /* 去除原本样式 */
      * {
        margin: 0;
        padding: 0;
      }
      /* 原本像素1000*2000，现在都除以2 */
      img {
        width: 200px;
        height: 400px;
      }
      #outer {
        width: 200px;
        /* 垂直居中 */
        margin: 50px auto;
        /* 四个方向都加边界 */
        padding: 10px;

        background-color: blanchedalmond;
        /* 设置文本居中 */
        text-align: center;
      }
    </style>
    <script>
        window.onload = function () {
          // 点击按钮切换图片
          // 获取两个按钮
          var prev = document.getElementById("prev");
          var next = document.getElementById("next");

          // 要切换为两个按钮绑定单击响应函数
          var img=document.getElementsByTagName("img")[0];
          // 创建一个数组，用来保存图片的路径
          var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

          var index=0;
//      切换图片就是修改img的src属性

//      获取id为info的p元素
            var info=document.getElementById("info");


              //      要修改一个元素的属性元素   元素.属性=属性值
          // 分别为两个按钮绑定单击响应函数
          prev.onclick = function () {
              // 切换到下一张，索引自减
              index--;
              // 判断index是否小于0
          if(index<0){
              index=imgArr.length-1;
          }
          img.src=imgArr[index];
        //   当点击按钮以后，重新设置信息
        //      设置提示文字
        info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";


      };
          next.onclick = function () {
              index++;
              if(index>imgArr.length-1){
                index=0;
              }
              img.src=imgArr[index];

              //      设置提示文字
            info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

          };
      };
    </script>
  </head>
  <body>
    <div id="outer">
        <p id="info">一共5张图片，当前第1张</p>
      <img src="img/1.jpg" alt="1" />
      <button id="prev">上一张</button>
      <button id="next">下一张</button>
    </div>
  </body>
</html>

 效果图：

 

花京院嚯
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript-dom查找返回值练习
主营前端方向，技术栈是vue
01-05 663
dom查找返回值练习(1.1 查找 #bj 节点 1.2 查找所有 li 节点 1.3 查找 name=gender 的所有节点 1.4 查找 #city 下所有 li 节点 1.5 返回 #city 的所有子节点 1.6 返回 #phone 的第一个子节点 1.7 返回 #bj 的父节点 1.8 返回 #android 的前一个兄弟节点 1.9 返回 #username 的 value 属性值 1.10 设置 #username 的 value 属性值 1.11 返回 #bj 的文本值)
DOM第一章 正则表达式
liuzizhoufaith的博客
04-11 150
让计算机检查字符串的格式是否符合标准 我们需要定义一个计算机能看懂的规则,就是正则表达式 计算机可以根据正则表达式检查字符串是否符合规则,或者将符合规则的内容提取出来
正则+js+dom手册大全
04-23
整理了半天，总该值找个价吧，一共11个手册，有js，正则，dom对象，使用于学习js的朋友
【JS】DOM查询
weixin_44782422的博客
03-15 246
DOM查询获取元素节点通过id查找元素查找所有li节点查询name=gender的所有节点获取元素节点的子节点查找#city下所有li节点返回#city的所有子节点返回#phone的第一个子节点获取父节点和兄弟节点获取#bj的父节点返回id为android的前一个兄弟节点读取#username的value属性值设置#username的value属性值获取#bj的文本值 获取元素节点 通过document对象调用 getElementById() - 通过id属性获取一个元素节点对象 getElementBy
JavaScript - dom查询
qq_33962481的博客
04-05 148
文章目录二、通过标签名获取一组元素节点对象1.查找所有li节点2. 查找name=gender的所有节点获取元素节点的子节点一. getElementsByTagName()二. childNodes三. firstChild四. lastChild # 获取元素节点 # 一、查找#bj节点 ```html ``` 二、通过标签名获取一组元素节点对象 使用getElementsByTagName() , 这个方法会返回一个类数组对象, 所有查询到的元素都会封装到对象中 1.查找所有li节点 <s
JavaScript中的DOM查询方法(全)——配合练习熟练掌握dom查询方法
王春燕的博客
04-25 2708
学习JavaScript中的DOM(文本对象模型)就是主要学习它的查询，查询是DOM的核心所在，而它围绕着一个单词—document  一、理解DOM 当HTML加载到内存中时，会形成一个树形结构，包括了四种类型的节点：(如下图) 文档节点==>document 元素节点==>标签 属性节点==>标签的属性 文本节点==>标签体 可以看到处于最上层的文档节点(document)可以访问下面的所有节点来获取对...
10.DOM简介
宋坚强大大~~
04-22 194
DOM - Document Object Model - 文档对象模型，通过DOM可以来任意来修改网页中各个内容 - 文档 - 文档指的是网页，一个网页就是一个文档 - 对象 - 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 - 模型 - 模型用来表示节点和节点之间的关系，方便操作页面 - 节点（Node） - 节点是构成网页的最基...
JavaScript正则表达式验证表单和DOM编程
weixin_42022555的博客
09-15 384
正则表达式 格式 ：  var reg = /正则表达式/[模式]   正则表达式的边界匹配器： 以^开头，以$结尾 如果没有写清边界，则从整段字符串中匹配是否有满足正则表达式的内容 而不是从头开始匹配（类似String的contains()方法） var reg1 = /^[0-9]{4}$/; var reg2 = /[0-9]{4}/; String str = "a5324"...
JavaScript学习笔记（三）Js正则、DOM
一叶知秋
09-23 4371
学习目标 DOM 正则表达式 一、DOM 1、概述 DOM对象：Document　Object  Model 文档对象模型、作用、通过DOM对象可以访问和操作html文件的每个标签、 html文档加载到浏览器的内存中后、我们认为形成了一颗DOM树、而任何一个html签、标签属性和文本都是这个树上的节点元素。 我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容...
JS---正则表达式+DOM
liuwanqing233333的博客
03-03 281
虽然不知道什么时候能学完，但是学的过程很开心，这就足够了 正则表达式 /* 正则表达式----用于定义一些字符串的规则-计算机根据正则表达式，检查一个字符串是否 符合规则 var reg = new RegExp("正则表达式", "匹配模式"); 匹配模式： i忽略大小写 g全局匹配规则 */ var reg = new RegExp("a"); //检查字符串中是否含有a，严格区分大小写 var str = "abc"; consol.
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
Javascript经典正则表达式
07-26
1，正则表达式，可以说是任何一种编程语言都提供的机制，它主要是提供了对字符串的处理能力。 2，正则表达式在页面处理中的使用场景： 1）表单验证。验证某些域符合某种规则，例如邮件输入框必须输入的是邮件、联系...
dom-parser:使用正则表达式的dom解析器支持浏览器，节点，react-native等
05-01
使用javascript正则表达式的dom解析器。 不需要节点环境或特殊的浏览器！！！ 支持react，react-native，vue等... 安装 npm install --save react-native-dom-parser 用法 import DomSelector from 'react-native-...
JAVA、PHP、JS（JAVASCRIPT DOM）、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载－PART2(完)
12-12
JAVA、PHP、JS（JAVASCRIPT DOM）、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载.rar 这里是我个人在WEB开发7年来，收集的CHM工具手册中精选出来的，每个都是精品中的精品，个人认为...
web开发资料集合(ajax css dom html javascript xml 正则表达式 共22本)
05-21
web开发资料集合(ajax css dom html javascript xml 正则表达式 共22本)!! 菜鸟高手都不能错过!!
js正则获取html字符串指定的dom元素和内容
weixin_30882895的博客
02-26 1777
var str = "<div>111<p id='abc'>3333</p></div><div>222<div id='abc'>3333</div><div>" //要求取得dom元素id='abc'的内容和元素 //代码实现 首先获取每个元素内容使用math函数 functi...
JavaScript进阶(4)-dom查询
叫我铁头娃_的博客
03-18 218
通过document对象调用 1、getElementById() 通过id属性获取一个元素节点对象 2、getElementsByTagName() 通过标签名获取一组元素节点对象 3、getElementsByName() 通过name属性获取一组元素节点对象 4、innerHTML 对象通过调用这个属性可以获取到元素内部的html代码 ...
8.JS-DOM
Hermione_m的博客
03-27 1350
DOM DOM简介 DOM ,全称 Document Object Model文档对象模型。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 文档： 文档表示的就是整个的HTML网页文档 对象： 对象表示将网页中的每一个 部分都转换为了一个对象。 模型： 使用模型来表示对象之间的关系,这样方便我们获取对象。 节点 节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。 比如: html标签、属性、文本、
JavaScript中DOM的查询
最新发布
YingHuaBuRuTa的博客
12-21 316
一：Dom查询以下内容都是通过document对象进行调用。通过id属性获取一个元素节点通过标签名获取一组元素节点通过name属性获取一组元素节点对象二：实操。
js 正则匹配dom字符串
09-12
总结来说，通过使用JavaScript的正则表达式，我们可以对DOM字符串进行匹配、提取和替换等操作，实现对DOM字符串的灵活处理。 ### 回答3： JS正则表达式是一种匹配和操作字符串的强大工具。在处理DOM字符串中，通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值