JavaScript（三）常见对象和DOM

最新推荐文章于 2024-07-26 20:46:33 发布

觅远

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量203

点赞数

分类专栏： web前端文章标签： javascript js css html5

本文链接：https://blog.csdn.net/JBY2020/article/details/109864650

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

常用对象

数字对象方法：https://www.w3school.com.cn/js/js_number_methods.asp

字符串对象方法：https://www.w3school.com.cn/js/js_string_methods.asp

自定义对象Object

创建对象的目的：使用变量创建的数据都是独立的，通过对象可以将数据作为一个整体保存，要使用数据的时候就可以通过访问对象来获取。

创建对象的方法

方法一：var 变量名 = new Object();

方法二：var 变量名 = {};

方法三：var 变量名 = {属性名1:属性值,属性名2:属性值,...}; // 同方法二，不同的是在创建对象的时候直接添加了属性。

属性操作

添加：变量名.属性名 = 属性值; // 不存在对应属性名时，会为对象添加这个属性

修改：变量名.属性名 = 属性值; // 已存在对应属性名时会修改属性名对应的属性值

删除：delete 变量名.属性名;

获取属性值：变量名.属性名或者变量名[“属性名”]

<script>
    var person = {
      Name: "小张",
      Age : 23,
      Sex: "男",
      IF : function() {
        return this.Name + "今年" + this.Age + "岁";
      }
    };
    console.log(person.IF(),"，并且他是" + person.Sex + "生。");
</script>

对象中使用对象里面的属性时可以使用关键字this，相当于python class类中的self，用来表示对象本身。属性值可以是一切对象。读取对象中没有的属性不会报错，而是返回一个undefined值

函数对象Function

常用的两种定义函数的方法

方法一：直接使用function关键字定义

语法：function 函数名(形参1,形参2,...){函数体}

调用：函数名(参数)

方法二：通过定义变量的方式定义

语法：var 函数名 = function(形参1,形参2,...){函数体}

获取定义函数形参个数的方法：函数名.length

不同于python，调用函数的时候如果所传的参数个数小于形参个数，不会报错，没有的参数返回的是undefined值。大于形参个数，多余的参数被忽略。

函数的不定长参数，类似于python中*arg，在JS中使用arguments数组对象来传入不定长的参数到函数中，获取传入参数个数的方法：arguments.length

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>
    <script>
        function fun1 (a,b) {
            return a * b;   // 同python中的return，用来结束函数并返回数据
        }
        console.log(fun1.length)  // 通过函数的length方法获取函数的形参数数量
        console.log(fun1(2,9))
        
        var fun2 = function () {
            // 计算任何数的和的函数
            var sum = 0, a = 0;  // 定义在函数内部的变量为局部变量
            for (a; a<arguments.length; a++){
                sum += arguments[a];
            }
            return sum;
        }
        console.log(fun2(1.3,3.7))

    </script>
</body>
</html>

数组对象Array

数组是一种特殊的变量，用来在单一变量中存储多个值。

创建数组

方法一：var arrayname = [item1,item2,...]; // 数组文本方法，推荐使用

方法二：var arrayname = new Array (item1,item2,...); //如果使用Array定义一个数组，里面的参数为一个数字的时候，只是定义了数组的长度，而数组内容为空。

数组对象的操作

访问获取数组元素：数组名[索引]

获取数组的长度：数组名.length

修改元素：数据名[索引] = 新值

追加元素：数组名.push = 值

添加元素：数组名[索引] = 值 // 添加元素并扩容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
    <script>
        var arr1 = new Array(1,2,3);
        var arr2 = new Array(3);  // 如果使用Array定义一个数组，里面的参数为一个数字的时候，只是定义了数组的长度，而数组内容为空
        console.log(arr1);
        console.log(arr2);
        var arr3 = [1,3,5,8];
        console.log(arr3,arr3.length);   // arr3.length获取数组长度
        arr3[0] = 10;   // 修改数组中元素的值
        console.log(arr3);
        arr3[10] = "len";   // 数组扩容,将数组长度扩充到指定长度
        console.log(arr3,arr3.length);
    </script>
</body>
</html>

方法	作用	方法	作用
length	获取数组长度	shift()	删除最后一个元素
push()	追加元素	pop()	删除第一个元素
unshift()	添加元素	splice()	替换
indexOf()	索引	slice()	切片
join()	拼接	reverse()	取反
sort()	排序	concat()	连接多个数组
更多数组方法：https://www.w3school.com.cn/js

日期对象Date

创建日期对象：var date-name = new Date();

方法	作用	方法	作用
getFullYear	获取年	getMonth	获取月
getDate	获取日	getDay	获取周
getHours	获取时	getMinutes	获取分钟
getSeconds	获取秒	Date.now	时间戳
更多数组方法：https://www.w3school.com.cn/js

HTML DOM（文档对象模型）

当网页被加载时会自动创建DOM模型（Document Object Model），JS通过DOM模型可以修改HTML元素、属性、CSS样式，删除已有HTML元素和属性，新建和执行事件。

获取文档元素的方法

方法	描述
getElementById(“”)	通过id属性值获取
getElementsByClassName(“”)	通过class属性值获取元素，获取的元素存放在数组中
getElementsByTagName(“”)	通过标签名获取元素，获取的元素存放在数组中
getElementsByName(“”)	通过name的属性获取元素，一般用于input，获取的元素存放在数组中
querySelector (“”)	通过CSS选择器获取一个
querySelectorAll(“”)	通过CSS选择器获取所有，获取的元素存放在数组中

获取文档中的html内容

方法	描述
innerHTML	从对象的起始位置到终止位置的全部内容,包括Html标签
innerText	从起始位置到终止位置的内容, 但它去除Html标签
textContent	textContent 属性设置或返回指定节点的文本内容，以及它的所有后代,此属性可用于取代 nodeValue 属性，但是此属性同时会返回所有子节点的文本
outerHTML	除了包含innerHTML的全部内容外, 还包含对象标签本身。

DOM文档方法：https://www.w3school.com.cn/js/js_htmldom_document.asp

修改HTML文档

改变HTML的输出流：document.write() 可以直接写入HTML输出流，千万不要在文档加载后使用 document.write()，这样做会覆盖文档。

改变HTML的内容：document.getElementById(id).innerHTML = new text

获取和修改属性值：document.getElementById(id).属性名 = new属性值

获取和修改CSS样式：document.getElementById(id).style.样式名= new样式值

CSS样式操作的注意点：1、如果样式名中有‘-’,需要使用驼峰命名法，去掉‘-’并将‘-’后面的第一个字母大写，因为js会将‘-’当成减号使用产生报错。2、在css中因为存在内联样式和外联样式，修改时优先级高的生效。

获取元素的所有style属性：使用getComputedStyle()，里面的参数为要获取样式的元素和伪元素

觅远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（三）常见对象和DOM

常用对象数字对象方法：https://www.w3school.com.cn/js/js_number_methods.asp字符串对象方法：https://www.w3school.com.cn/js/js_string_methods.asp自定义对象Object创建对象的目的：使用变量创建的数据都是独立的，通过对象可以将数据作为一个整体保存，要使用数据的时候就可以通过访问对象来获取。创建对象的方法方法一：var 变量名 = new Object();方法二：var 变量名
复制链接

扫一扫

专栏目录