JS-内置对象-DOM

不停奔跑的Javaer

已于 2023-08-17 11:55:30 修改

阅读量86

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-08-16 19:24:50 首次发布

本文链接：https://blog.csdn.net/m0_52913378/article/details/132325665

版权

1 内置对象

1.1 JS构造器创建对象

<script>
    //通过固定格式创建一个学生对象 怎么做
    //创建一个构造器
    function Student(sno, sname, sex, handler) {
        this.sno = sno;
        this.sname = sname;
        this.sex = sex;
        //设置对象的行为
        this.setSno = function (no) {
            sno = no;
        }
        this.toString = function () {
            return sno + '-' + sname + '-' + sex;
        }
        // 回调函数 将一个函数当作另一个函数的参数传递进去
        this.handler = handler;
    }

    //     使用自定义构造器创建对象
    var s = new Student(10,'张三','男');
    console.log(s)
    console.log(s.toString())
    s.setSno(500);
    console.log(s.toString())

    s = new Student(20,'李四','女',function (){
        document.write('回调函数已执行');
    });
    //调用回调函数
    s.handler();
    console.log(s);
    console.log(s.toString())

    s = new Student(30,'王五','男',60);
    console.log(s)

</script>

每个实例都会将所有的属性创建一次，要创建Person()的新实例，必须使用new操作符。以这种方式调用构造函数会经历以下四个步骤：

创建一个新对象；
将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
执行构造函数中的代码（为这个新对象添加属性）；
返回新对象。

1.2 工厂方法创建对象

<script>
    //使用工厂方法创建对象
    //工厂函数
    function Student(sno, sname, sex) {
        let obj = new Object();
        obj.sno = sno;
        obj.sname = sname;
        obj.sex = sex;
        return obj;
    }
    var s = Student(1,'张三','男');
    console.log(s)
    console.log(typeof s)
</script>

1.3 内置对象

javascript提供了很多预定义好的对象，类似于java的常用类，这些内置对象只需要通过构造函数或者工厂函数创建即可以正常使用，常见的js内置对象:

Number(==java-Integer)
String
Array(重要)
Math
Date
RegExp(正则表达式)
JSON

1.3.1 Number

Number对象用于在JS中表示一个数值(浮点和整数)对象，创建方式可以使用Number工厂方法创建，常用使用方式如下:

<script>
    //Number对象两种创建方式
    var n = new Number(10);//构造函数
    n = Number('abc');//工厂函数

    //判断当前值是否=NaN
    console.log(Number.isNaN(n));
    console.log(10/3);
    //判断当前值是否为无穷大
    console.log(Number.isFinite(10/3))
    //保留指定小数位，最后一个小数位遵循四舍五入
    console.log(3.1415926.toFixed(2))
    //将数值转换成字符串
    console.log(typeof n.toString())
    n = new Number(20);
    console.log(n)//Number对象
    // 返回被Number包装的原始值
    console.log(n.valueOf());//20
    //将当前对象中的值格式化为指定长度
   console.log(n.toPrecision(20));
</script>

1.3.2 String

<script>
    var s1 = new String(true);
    console.log(s1.toString());
    console.log(s1.toUpperCase());
    //给当前字符串添加一对big标签
    console.log(s1.big());
    //给当前字符串添加一对a标签，参数为a标签的name属性值
    console.log(s1.anchor('http://www.baidu.com'))

    document.write(s1.big())
    document.write(s1.anchor('http://www.baidu.com'))

    s2 = 'hello world';
    //将字符串切割成字符数组
    console.log(s2.split(' '))

    var name = '张三';
    var age = 18;
    var sex = '男';
    console.log('姓名：' + name + ',年龄：' + age + ',性别:' + sex);

    //ES6新特性
    console.log(`姓名：${name},年龄：${age},性别:${sex}`);

</script>

1.3.3 Array

<script>
    //数组创建的三种方式
    //创建空数组
    var a1 = [10,20,30,40,50];
    var a2 = new Array('jack','jack','rose','lily');
    var a3 = Array(true,false,false,true);

    //数组合并
    console.log(a1.concat(a2,a3))
    //使用特定的分隔符将数组元素拼接成一个字符串
    console.log(a1.join('-'))
    //取出数组末尾的元素，并将其移除出数组
    console.log(a1.pop())
    console.log(a1)//10,20,30,40
    //取出数组开头的元素。将其移除数组
    console.log(a1.shift());
    console.log(a1)//20,30,40
    //向数组末尾追加元素,并且返回新的数组长度
    console.log(a1.push(80));
    console.log(a1)//20,30,40,80
    //向数组开头追加元素，返回新的数组长度
    console.log(a1.unshift(1,2,3,4))
    console.log(a1)//[1, 2, 3, 4, 20, 30, 40, 80]
    //从数组中取出指定新数组 左包右不包
    console.log(a1.slice(1,5));
    //排序(自动排序)
    console.log(a2.sort())
    //自定义排序
    a1.sort(function (i,j){
        return j-i;
    })
    //简化写法
    a1.sort((i,j)=>j-i);
    console.log(a1)
    console.log('---------------------------------')
    a1.reduce(function (p,c,i,a){
        //数组中第一个元素
        console.log(p);
        //数组中除了第一个元素之外的每一个元素
        console.log(c);
        //数组中的索引
        console.log(i);
        //数组中所有元素
        console.log(a);
    });
    //计算数组中所有元素的总和
    var a =a1.reduce((p,a)=>p+a);
    console.log(a)
</script>

1.3.4 Math

Math对象类似java中Math类，该对象包含的函数和java中的Math的方法一致，Math对象不同于其他内置对象，不是一个函数对象，内部所有的函数都是静态的

<script>
    //获取绝对值
    console.log(Math.abs(-10));
    //从一个数组中获取最大值
    console.log(Math.max(1,2,5,90,5,74,86,100,169));
    //从一个数组中获取最小值
    console.log(Math.min(1,2,5,90,5,74,86,100,169));

    //求指定数n的m次方
    console.log(Math.pow(2,5));
    //向上取整
    console.log(Math.ceil(3.14));
    //向下取整
    console.log(Math.floor(3.99));
    //获取随机数     (最大值-最小值+1)+最小值
    //因为js没有整数小数之分，所以生成随机数时一定会有小数
    console.log(parseInt(Math.random()*(100-10+1)+10));
</script>

1.3.5 Date

<script>
//获取一个日期对象
var d = new Date();
console.log(d);
//获取年份
console.log(d.getUTCFullYear());
console.log(d.getFullYear());
//获取月份  从0开始(0-11)
console.log(d.getMonth()+1);
//获取日期
console.log(d.getDate());
//获取小时
console.log(d.getHours())
//获取分钟
console.log(d.getMinutes())
//获取秒
console.log(d.getSeconds())
// 获取当前时间毫秒数
console.log(d.getTime())

// 新特性(超级有用！！！)
var time = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日
${d.getHours()}时${d.getMinutes()<10?String('0'+d.getMinutes()):d.getMinutes()}分${d.getSeconds()}秒`;
console.log(time)

</script>

1.3.6 RegExp(正则表达式)

<script>
    //手机号匹配 (简单的写一下>.<)
    var phone = '1[356789]\\d{9}';
    //创建正则表达式对象
    var reg = new RegExp(phone);
    console.log(reg.test('15345678910'));
	
	// 'blur'--->失去焦点
    document.getElementById('num').addEventListener('blur', function () {
        //进行文本框内容的正则验证
        var reg2 = new RegExp('^[^0]\\d{5,9}$');
        console.log(this.value)
        if (reg2.test(this.value)) {
            alert('成功')
        }else {
            alert('失败')
        }
    });

</script>

1.3.7 JSON

一种数据交换格式

JSON序列化 JSON.stringify()

json序列化指的是将一个JS对象转换为一个JSON字符串

<script>
    var user = {
        id:1,
        name:'张三',
        marry:true,
        group:{
            gid:1,
            gname:'vip1'
        }
    }
    //序列化
    let json = JSON.stringify(user);
    console.log(json)
    //{"id":1,"name":"张三","marry":true,"group":{"gid":1,"gname":"vip1"}}
</script>

JSON反序列化 JSON.paese()

<script>
    var user = {
        id:1,
        name:'张三',
        marry:true,
        group:{
            gid:1,
            gname:'vip1'
        }
    }
    //序列化
    let json = JSON.stringify(user);
    console.log(json)
    //{"id":1,"name":"张三","marry":true,"group":{"gid":1,"gname":"vip1"}}
    //反序列化
    json = JSON.parse(json);
    console.log(json)
</script>

2 DOM

2.1 DOM概述

javascript支持DOM编程，DOM：Document Object Model;对于任何一个html网页，都可以将网页中的所有内容当作一颗倒置的文档书理解

名词解释:

元素(Element)：html中任意一个标签从开始到结束，之间的内容(包括标签本身)都称之为元素，一个元素在文档树也为一个节点
属性：属性是开始标签中属性名和属性值构造的一个键值对结构

对于DOM中document实际上指的是整合html文档对象，可以理解为<html></html>

2.2 常见DOM操作

<div id="app">
    <!--    头部-->
    <div class="header">
        <h1>爱坤管理系统</h1>
    </div>
    <!--    身体-->
    <div class="body">
        <div class="menu">
            <ul>
                <li>菜单项1</li>
                <li>菜单项2</li>
                <li>菜单项3</li>
                <li>菜单项4</li>
                <li>菜单项5
                    <ul class="submenu">
                        <li>子菜单1</li>
                        <li>子菜单2</li>
                    </ul>
                </li>
                <li>菜单项6
                    <ul class="submenu">
                        <li>子菜单1</li>
                        <li>子菜单2</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="content">
            <h1>这里显示内容</h1>
            <form action="">
                <input type="checkbox" name="fav">ID
                <input type="checkbox" name="fav">Name
                <input type="checkbox" name="fav">Sex
                <input type="checkbox" name="fav">Age
            </form>
        </div>
    </div>
</div>

2.2.1 查找DOM

获取单个元素
1、根据元素id获取

	let app = document.getElementById('app');
    console.log(app)

2、根据css选择器获取

	let head = document.querySelector('.header>h1')
    console.log(head)

获取多个元素

  //根据标签名获取元素(元素集合)
    let li = document.getElementsByTagName('li');
    console.log(li)

    //根据元素的name属性值获取元素(集合)
    let input = document.getElementsByName('fav');
    console.log(input);

    //根据元素的class属性值获取元素(集合)
    let ul = document.getElementsByClassName('submenu');
    console.log(ul);

    //根据CSS选择器来进行元素获取
    let div = document.querySelectorAll('div');
    console.log(div)

2.2.2 插入DOM

creatElement():
appednChild():
insertBefore();

// 将文本节点添加到节点p上
  let p = document.createElement('p');
  p.innerText = "卡拉飞机迪斯科例如回复";

  // 向节点的子节点列表的末尾添加新的子节点。
  document.querySelector('.header').appendChild(p);
  console.log(document.getElementsByTagName('p'));

  // insertBefore();需要两个参数
  // 第一个参数：新节点（插入的元素对象）
  // 第二个参数：参考节点（插入的元素对象）
  // 先找到父标签，再插入
  let h1 = document.querySelector('.header');
  h1.insertBefore(p, document.querySelector('.header>h1'));

  let body = document.querySelector('.body');
  body.insertBefore(p, document.querySelector('.content'));

  // 插入到父节点的最后
  document.getElementById('app').insertBefore(p, null);

2.2.3 更新DOM

innerText
innerHtml

 //更新  修改指定元素的内部值
    //获取当前需要进行更新的元素
    p = document.querySelector('p');
    //将一段HTML代码插入到指定位置，(浏览器不会对其进行渲染)
    p.innerText='<span>进行一次更新</span>';//适用于修改元素内部的文本
    //将class为header的元素内部的内容进行替换 (浏览其会进行渲染)
    document.querySelector('.header').innerHTML = '<h3>我现在是H3标签</h3>'

2.2.4 删除DOM

JS-DOM中的删除：只需要获取需要删除的节点对象，通过其父类标签进行删除

removeChild()
parentElemt/parentNode:获取指定节点的父节点
chidren:获取指定节点下的所有子节点(集合)

// 删除
  // 获取需要删除的节点
  p = document.querySelector('p');
  // 找父节点
  document.getElementById('app').removeChild(p);
  h1 = document.querySelector('h1');
  h1.parentNode.removeChild(h1);

  // 获取id为app下的所有子节点
  div = document.getElementById('app').children;
  console.log(div);

  // 获取当前元素下的所有一级子节点（包括空文本节点）
  div = document.getElementById('app').childNodes;
  console.log(div);

  // 获取当前元素下的所有节点个数
  div = document.getElementById('app').childElementCount;
  console.log(div);

总结：
添加，修改，都是基于当前元素的子元素做操作
删除，必须通过父元素进行操作

2.3 使用DOM控制CSS样式

css中的所有属性基本都能在js中使用，方式如下,（所有的CSS样式对应的脚本属性都必须取出中间的-。例如:css:border-radius ---- js:borderRadius）

 //使用DOM对象添加样式
    div = document.getElementById('app');
    //添加边框
    div.style.border = '5px solid red';
    //添加宽高
    div.style.width = '500px';
    div.style.height = '600px';
    div.style.backgroundColor='green';
    div.style.borderRadius='5px'

3 练习

验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .body{
      width: 800px;
      height: 800px;
    }
    #yzm{
      width: 88px;
      height: 30px;
      background-color: black;
      display: inline-block;
      /*text-decoration-color: pink;*/
      text-align: center;
    }
  </style>
</head>
<body>
<div class="body">
  <label for="in">
    <input type="text" placeholder="请输入验证码" id="in">
    <span id="yzm"><font color="#ffc0cb">jiao</font></span>
    <button type="submit" id="sm">验证</button>
  </label>
</div>
</body>
<script>
    function getCode() {
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'];
        var str = [];
        for (let i = 0; i < 4; i++) {
            str[i] = arr[parseInt(Math.random() * 35)];
        }
        return str.join('');
    }
    function randomColor() {
        var r = parseInt(Math.random() * (256));
        var g = parseInt(Math.random() * (256));
        var b = parseInt(Math.random() * (256));
        return `rgb(${r},${g},${b})`;
    }
  let yzm = document.getElementById('yzm');
  // console.log(yzm.innerText);
  yzm.addEventListener('click', function () {
    // var arr = [1,2,3,4,5,6,7,8,9,'q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'];
    // var str = [];
    // for (let i = 0; i < 4; i++) {
    //   str[i] = arr[parseInt(Math.random()*35)];
    // }
    // yzm.value = str.join('');
    // console.log(yzm.value);
    // yzm.innerText = yzm.value;
    // yzm.style.color = 'pink';
    yzm.innerHTML = `<span id="yzm" style="color: ${randomColor()};background-color: ${randomColor()}">${getCode()}</span>`;
  });
  let button = document.getElementById('sm');
  button.addEventListener("click", function () {
    let input = document.getElementById('in');
    if (input.value === yzm.innerText) {
      alert("正确");
    } else {
      alert("错误");
    }
  })

</script>
</html>

运行截图：
验证码

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*form{*/
      /*    width: 550px;*/
      /*    height: 590px;*/
      /*    text-align: center;*/
      /*    cursor: pointer;*/
      /*}*/
    fieldset{
      display: flex;
      width: 550px;
      height: 590px;
      margin: auto;
      flex-direction: column;

    }
    #leg{
      background-color:#7a5636;
      height: 30px;
      width: 200px;
    }
    #leg>span{
      color: white;
    }
    .box{
      display: flex;
      /*border: 1px solid red;*/
      width: 540px;
      padding: 10px;
      justify-content: space-between;
      height: 50px;
    }
    .box>input{
      width: 400px;
      font-size: 20px;
      text-align: center;
    }
    #box2{
      padding: 0;
      margin: 0;
      justify-content: center;
    }
    #agree{
      height: 20px;
      width: 20px;
    }
    #p2{
      width: 138px;
      height: 20px;
      padding: 0;
      margin: 0;
      color: #7a5636;
    }
    a{
      width: 200px;
      height: 20px;
    }
    #box3{
      justify-content: right;
    }
    #box3>button{
      width: 80px;
      background-color: #7a5636;
      color: white;
    }

  </style>
</head>
<body>
<form>
  <fieldset>
    <legend id="leg"><span> create new account</span></legend>
    <div class="box"><p>Username:</p><input type="text" id="username"></div>
    <div class="box"><p>password:</p><input type="password" id="password"></div>
    <div class="box"><p>Email:</p><input type="text" id="email"></div>
    <div class="box"><p>Phone:</p><input type="text" id="phone"></div>
    <div class="box"><p>Company:</p><input type="text" id="company"></div>
    <div class="box"><p>Adrres:</p><input type="text" id="adrres"></div>
    <div class="box" id="box2">
      <input type="checkbox" id="agree">
      <p id="p2">I agree to the</p>
      <a href="http://www.baidu.com">term & condition</a>
    </div>
    <div class="box" id="box3">
      <button type="submit" id="submit">register</button>
    </div>
  </fieldset>
</form>
</body>
<script>

  let button = document.querySelector('button');
  button.addEventListener('click', function () {
    if (document.getElementById('username').value === "") {
      alert("请填写用户名")
    }
    var pwd = '^\\d{8,16}$';
    var reg1 = new RegExp(pwd);
    if (!reg1.test(document.getElementById('password').value)) {
      alert("密码错误");
    }
    var email = '[\\w-]+(\\.[\\w-]+)*@([\\w-]+\\.)+\\w{2,14}';
    var reg2 = new RegExp(email);
    if (!reg2.test(document.getElementById('email').value)) {
      alert("邮箱输入错误");
    }
    var phone = '1[356789]\\d{9}';
    var reg2 = new RegExp(phone);
    if (!reg2.test(document.getElementById('email').value)) {
      alert("手机号输入错误");
    }
    let checked = document.getElementById('agree');
    if (!checked.checked) {
      alert("请勾选复选框");
    }
  })
</script>
</html>