JS\_内置对象\_DOM

洛基鸭luki

已于 2022-09-01 19:30:06 修改

阅读量246

点赞数

文章标签： javascript 前端开发语言

于 2022-08-24 11:09:22 首次发布

本文链接：https://blog.csdn.net/weixin_48006490/article/details/126500647

版权

1. 常见内置对象

1.1. JS构造器创建对象

javascript在早期是没有跟java一样存在类这个概念，通常在创建js对象的时候无法通过类来进行创建，

但是js可以使用构造函数来进行对象的创建,js中的构造函数和普通函数的定义方式没有很大的区别

   //创建一个学生对象,通过构造函数创建
    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(30);
    console.log(s.toString())

    s = new Student(20, "李四", "女", function () {
        console.log("好好学习，天天向上")
    })
    s.handler();
    console.log(s)
    console.log(s.toString())

1.2. 工厂方法创建对象

在之前讲解的时候提到了两个特殊的函数Number()，String(),实际上这两种函数我们称之为

工厂函数(工厂方法,在创建对象时不需要new)，用法如下:

	var s = String(123);
	var stu = Student(1,'张三',30);

以上对象的创建原理如下:

 function Student(sno, sname, sage) {
        //JSON字符串写法
        // let s = {
        //     sno: sno,
        //     sname: sname,
        //     sage: sage
        // }
        // return s;
        let obj = new Object();
        obj.sno = sno;
        obj.sname = sname;
        obj.sage = sage;
        return obj;
    }

总结Js对象的三种形式：

直接使用JSON对象(一次性)
使用构造函数创建
使用工厂函数创建

1.3. 使用JSON对象

 var user={
        id:1,
        name:'softeem'
    }

1.4. 内置对象(类似:java常用类)

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

Number
String
Array:（重点）
Math
Date:（重点）
RegExp
JSON:(重点)

1.4.1. Number

Number对象用于在Js中表示一个数值(浮点值和整数值)对象,创建方式可以用Number的工厂方法创建,

常见的使用方法:

    var n = new Number(10);
    console.log(n)
    n = Number(20);
    console.log(n)

    console.log(Number.isNaN('abc'));
    console.log(Number.isNaN(123));
    console.log(Number.isNaN(Number.NaN))
    console.log(10/3)
    //判断是否无穷尽的
    console.log(Number.isFinite(10/3))

    //判断当前值是否为number类型并且是数字
    console.log(Number.isInteger('123'));
    console.log(Number.isInteger(123));

    //保留几位小数，再去四舍五入
    console.log(3.14154926535.toFixed(1))

    var n1 = new Number(20);
    console.log(n1)
    //获取被Number包装的原始值
    console.log(n1.valueOf())

1.4.2. String

<script>
    var s1 = new String(123);
    var s2 = String(true);
    console.log(s1)
    console.log(s2)

    console.log(s1.toString())
    console.log(s2.toUpperCase())

    console.log(s1.big())
    console.log(s1.anchor("http://www.baidu.com"))

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

    var name = '张三';
    var age = 20;
    var sex = '男';
    //ES6新特性
    //  ``
    console.log(`姓名:${name},年龄:${age},性别:${sex}`);
</script>

1.4.3. Array（重要）

array代表的是任意类型的数组对象，，创建方式有三种:

  //创建一个空数组
    var a1 = [];
    //使用构造函数
    var a2 = new Array();
    //使用工厂方法
    var a3 = Array();

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值
forEach()	对数组对象遍历
reduce()	对数组中元素执行计算操作

 //创建一个空数组
    var a1 = [1,2,3,4,5];
    //使用构造函数
    var a2 = new Array(6,7,8,9,10);
    //使用工厂方法
    var a3 = Array(11,12,13,14,15);

    //concat    合并两个或多个数组,返回一个新的数组
    console.log(a1.concat(a1,a2,a3))

    //join  将一个数组的所有元素连接成一个字符串并返回这个字符串。
    console.log(a1.join('-'))

    //pop   删除数组中的最后一个元素，并将该元素返回出来
    console.log(a1.pop())
    console.log(a1)

    //push  添加一个或者多个元素，并返回添加后的数组的Length属性
    console.log(a1.push(5,6,7,8,9))

    //reverse       数组反转
    console.log(a1)
    console.log(a1.reverse())

    //shift()   删除数组中的第一个元素
    console.log(a1.shift())

    //slice     选中数组的某个区间，并返回新数组
    console.log(a1.slice(3,6))

    //splice()  过删除或替换现有元素或者原地添加新的元素来修改数组
    console.log(a1)
    console.log(a1.splice(0,2,'hello','world'))


    //unshift   在数组开头添加一个或者多个元素，返回的是添加结束后的数组的Length
    console.log(a1)
    console.log(a1.unshift('q','w','e','r'))


    a1.forEach((v,i,a)=>{
        console.log(`当前值:${v},索引:${i},对象:${a}`)
    })


    //reduce    计算数组中所有元素的综合
    // var c = a2.reduce((p,a)=>p*a);
    // console.log(c)


    // console.log('-----------------')
    // console.log('-----------------')
    // console.log('-----------------')
    // console.log('-----------------')
    // var num = a2.reduce(function (p,c,i,a) {
    //     console.log(p)
    //     console.log(c)
    //     console.log(i)
    //     console.log(a)
    //     return p+c;
    // })
    // console.log(num)

综合练习

//有一个复合类型的数组对象
/*
*  function User(id,name,sex,age){
* }
* var u1 = new User(1,'softeem','男',18)
* ...
* var a = new Array(u1,u2,u3...)
*
* 对数组遍历，将用户的信息在页面上以表格的形式显示
*
*/

1.4.4. Math

//获取一个绝对值
    console.log(Math.abs(-100));
    //获取一个Number数组中的最大值
    console.log(Math.max(100,29,490,12,32,541,1231,890));

    //求指定数的N次方
    console.log(Math.pow(2,4));

    //向上取整
    console.log(Math.ceil(3.01));
    //向下取整
    console.log(Math.floor(3.99));

    //获取随机数
    console.log(parseInt(Math.random()*(20-10+1)+10))

1.4.5. Date（重要）

   var d = new Date();
    console.log(d)

    //获取年份
    console.log(d.getFullYear())
    console.log(d.getUTCFullYear())

    //获取月份  范围(0-11)
    console.log(d.getMonth()+1)
    console.log(d.getUTCMonth()+1)

    //获取当前日期
    console.log(d.getDate())

    //获取当前星期几
    console.log(d.getDay())
    //获取小时  当前的小时数
    console.log(d.getHours())

    //获取分钟
    console.log(d.getMinutes())
    //获取秒钟
    console.log(d.getSeconds())

    console.log(d.toTimeString())
    console.log(d.toDateString())
    console.log(d.toLocaleDateString())
    console.log(`${d.toLocaleDateString()}  ${d.toTimeString()}  `)

1.4.6. RegExp（正则表达式）

    var phone = "1[356789]\\d{9}"
    var reg = new RegExp(phone);
    console.log(reg.test("13456789912"))

    //从字符串中选出匹配的字串
    console.log("134567899151274892789418473210931345719512162471451725".match(phone));

1.4.7.JSON

在目前的软件开发中，很多软件都采用的是一种异构模式(通过不同的语言实现不同功能的模块)，因此不同平台之间涉及到了数据交换的问题，在交换过程中需要一项通用的数据格式来进行数据交换，此时，JSON字符串的出现为该需求提供了解决方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NuWof85B-1661310500097)(img/image-20210827145931390.png)]

JSON序列化

  var user = {
        id: 1,
        name: 'admin',
        pwd: '123456',
        marry: true,
        group: {
            id: 1,
            gname: '火箭班'
        }
    }
    //此时user是一个js对象
    console.log(user)
    //序列化
    let json = JSON.stringify(user)
    console.log(json);

JSON反序列化

//反序列化
    let js = JSON.parse(json);
    console.log(js)

2. DOM（重要）

2.1 DOM概述

javascript中支持DOM变成，DOM即:Document Object Model,对于任何一个html网页来说，

都可以将页面中的所有内容看作是一个倒置的文档树,可以通过js的dom操作去对树上的任意节点进行访问

(添加，修改，查询，删除),倒置的文档树如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sTaPWBRc-1661310500098)(img/Snipaste_2022-08-23_14-52-03.png)]

对应HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1></h1>
<div>
    <div></div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>

名词解释:

元素(element):html中任意一个标签开始到标签结束，之间的内容(包括标签本身)都称之为元素，一个元素也称之为一个节点
属性(Attribute)：属性是开始标签中，由属性名和属性值构成，是一个键值对结构
对于DOM中Document，实际指的是整个html文档对象，可以理解为即<html>元素

2.2. 常见DOM操作

对于HTML中的dom操作主要包含就是节点的:查询，添加，修改，删除

<div id="app">
    <div class="header">
        <h1>xxx管理系统</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="far">ID
                <input type="checkbox" name="far">NAME
                <input type="checkbox" name="far">SEX
                <input type="checkbox" name="far">AGE
            </form>
        </div>
    </div>

</div>

2.2.1. 查找DOM（重点）

js-DOM对于元素的检索方法有很多:

获取单个元素

根据元素的id属性获取（重要）

//获取单个元素
    let app = document.getElementById('app');
    console.log(app)

根据元素的class选择器来获取单个元素(重要)

   //根据class选择器来获取单个元素
    head = document.querySelector('.header>h1');
    console.log(head)

获取多个元素

如下

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

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

    //通过元素的class属性获取元素(集合)
    let submenu = document.getElementsByClassName('submenu');
    console.log(submenu)

    //通过class选择器获取多个元素
    let div = document.querySelectorAll('div');
    console.log(div)

2.2.2. 插入DOM

createElement:创建一个DOM节点

  let p = document.createElement('p');
    p.innerText = '天青色等烟雨，而我在等你';
    console.log(p)

appendChild:向指定的dom节点中追加子节点

  document.getElementById('app').appendChild(p);

insertBefore:将一个新节点插入到指点节点之前，该函数包含两个参数:

第一个参数代表的是:新节点
第二个参数代表的是参考节点(可以为null,如果为null的话表示插入到父元素的节点末尾)

 //将一个新节点插入到指定节点之前
    //insertBefore 需要两个参数：第一个参数:新节点     第二个参数:参考节点(可以为null，为null则表示插入父节点末尾)
    //先找到header部分,在header部分中h1有一个id为title，在id为title的元素之前加上一个p标签
    document.querySelector('.header').insertBefore(p,document.getElementById('title'))

2.2.3. 更新DOM

innerText:该属性用于获取以及为元素设置文本值

//获取所有的li元素
 let LiAll = document.querySelectorAll('li');
    console.log(LiAll)
//遍历li集合
    for (let i = 0; i < LiAll.length; i++) {
        console.log(LiAll[i].innerText);
        //将每一个li元素的内容替换
        LiAll[i].innerText = '列表'+i;
    }

innerHTML:该属性用于获取以及为元素设置内部的html内容

let OneHead = document.querySelector('.header');
    console.log(OneHead)
    OneHead.innerHTML = `<h2 style="color: red;background-color: yellow">我是替换之后的h2标签</h2>`

innerText和innerHTML的区别

    let box = document.getElementById('box');
    //将一段html代码插入到指定位置(浏览器不会进行渲染)   innerText
    box.innerText=`<span style="color: red;background-color: black">我是一个span标签</span>`
    //将一段html代码插入到指定位置(浏览器会进行渲染)    innerHTML
    box.innerHTML=`<span style="color: red;background-color: black">我是一个span标签</span>`

2.2.4. 删除DOM

js-DOM中删除操作原理:只要获取到了节点对象，然后通过该节点对象的父节点即可删除

removechild:删除指定节点下的子节点

  //找到h2元素
    let h2 = document.querySelector('#app>.header>h2');
    console.log(h2)
    //删除class为header下的h2标签
    document.querySelector('#app>.header').removeChild(h2)

parentElement/parentNode:用于获取指定节点的父节点对象

//找到当前元素的父元素
    // let hp = h2.parentElement;
    let hp = h2.parentNode;
    hp.removeChild(h2)

children:获取指定节点的所有子元素

  let ul = document.querySelector('.menu>ul');
    console.log(ul)
    //返回一个集合，集合中是当前元素的所有子元素
    console.log(ul.children)
    //返回一个集合，集合中是当前的元素所有子节点(包括文本节点以及空的文本节点)
    console.log(ul.childNodes)

2.3.使用DOM控制CSS样式

css中的所有属性几乎在js中都有使用,方式为,调用dom对象的style属性，再通过相应的CSS样式

（所有的CSS样式对应的脚本属性都是去除中间-，将后面的单词的首字母大写），如下

   app = document.getElementById('app');
    app.style.border = '5px solid #f00';
    app.style.width = '800px';
    app.style.height = '600px';
    app.style.backgroundColor = 'pink';
    app.style.borderRadius = '5px';