JavaScript对象

怼烎@ 2022-05-23 23:29 232阅读 0赞

JavaScript是一种基于对象的语言，对象是JS中最重要的元素

JavaScript中包含有：HTML DOM对象、内置对象、浏览器对象、ActiveX对象

JavaScript对象的使用方法

对象是由属性和方法封装而成的，所以属性的引用就是使用“.”，通过上下标的方式引用

对象方法的引用:ObjectName.methods();

HTML DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

1.DOM操作HTML

改变HTML输出流

(绝对不要在文档加载完成之后使用document.write(),这会覆盖该文档)

改变页面中所有HTML元素

通过id寻找HTML元素,改变HTML内容使用innerHTML属性：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
        <body>
        <p id="pid">Hello</p>
        <button οnclick="demo()">按钮</button>

}
    </script>

</body>  
</html>

通过标签名找到HTML元素

document.getElementsByTagName("p");

改变页面中所有HTML属性,直接使用属性名改变属性

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a id="aid" href="http://baidu.com">Hello</p>
        <button οnclick="demo()">按钮</button>
    
        <script>
            function demo(){
                document.getElementById("aid").href = "http://www.sina.com";
            }
        </script>        
    </body>
    </html>

DOM对象控制HTML的方法:

getElementsByName()： 获取name

getElementsByTagName()： 获取元素

getAttribute()：获取元素属性

setAttribute()：设置元素属性

childNodes()：访问子节点

parentNodes()：访问父节点

createElement()：创建元素节点

createTextNode()：创建文本节点

insertBefore()：插入节点

removeChild()：删除节点

offsetHeight()：网页尺寸

scorllHeight()：网页尺寸

2.DOM操作CSS

document.getElementById(id).style.property=new style

3.DOM EventListener

方法：addEventListener("事件名"，"事件处理函数"，"布尔值"); 方法用于向指定元素添加事件句柄 布尔值为true表示事件捕获，为false表示事件冒泡

removeEventListener(); 移除方法添加的事件句柄

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">按钮</button>
        <script>
            document.getElementById("btn").addEventListener("click",function(){
            alert("hello")
        });
    </script>
    </body>
    </html>

使用事件句柄添加可以保证添加多个不被覆盖

JS内置对象

1.String字符串对象 String对象用于处理已有的字符串，字符串可以使用单引号或双引号

length属性： 得到当前字符串的长度

indexOf()： 在字符串中查找字符串，存在返回当前字符串的位置，不存在返回-1

match()： 内容匹配,存在直接返回内容，不存在返回null

replace()： 替换内容

toUpperCase()/toLowerCase()： 字符串大小写转换

strong>split()： 字符串转为数组

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            var str = "hello,welcome,javascript";
            var s = str.split(",");
            document.write(s[1]);
        </script>        
    </body>
    </html>

其他属性和方法

![70][]

2.Data日期对象 用来处理日期和时间

常用方法：

getFullYear()：获取年份

getTime()：获取毫秒

setFullYear()：设置具体日期

getDay()：获取星期

时钟实例

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload = "startTime()">
        <div id="timetxt"></div>
        <script>
            function startTime(){
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
                m = checkTime(m);
                s = checkTime(s);
                document.getElementById("timetxt").innerHTML = h+":"+m+":"+s;
                t = setTimeout(function(){
                    startTime();        //递归调用，重复执行，使时间可以持续刷新
                };500);
            }
            function checkTime(i){
                if(i<10){
                    i = "0"+i;
                }
                return i;
            }
    </script>        
    </body>
    </html>

3.Array数组对象 使用单独的变量名来存储一系列的值

var myArray=\["hello","welcome","javascript"\];

通过指定数组名以及索引号码，可以访问某个特定的元素

数组常用方法：

concat()：合并数组

sort()：排序

push()：末尾追加元素

reverse()：数组元素翻转

4.Math对象 执行常见的算数任务

常用方法：

round()：四舍五入

random()：返回0-1之间随机数