JavaScript对象

最新推荐文章于 2023-04-15 22:14:21 发布

hepei_i

最新推荐文章于 2023-04-15 22:14:21 发布

阅读量283

点赞数

分类专栏：前端基础文章标签： JavaScript JS对象 DOM

本文链接：https://blog.csdn.net/qq_41787619/article/details/80339247

版权

前端基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

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

JavaScript对象的使用方法

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

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

HTML DOM对象

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

1.DOM操作HTML

改变HTML输出流

    <script>
        document.write("hello");
    </script>

(绝对不要在文档加载完成之后使用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>
      function demo(){
            document.getElementById("pid").innerHTML = "world";

}
</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>

其他属性和方法

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之间随机数

max()：返回其中的最大值

min()：返回其中的最小值

abs()：返回绝对值

浏览器对象

1.Window对象

window对象指当前的浏览器窗口，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员，全局变量是window对象的属性，全局函数是window对象的方法

window尺寸：

window.innerHeight 浏览器窗口的内部高度

window.innerWidth 浏览器窗口的内部宽度

window方法：

window.open()：打开新窗口

window.close()：关闭当前窗口

2.计时器

通过JavaScript，可以做到在一个设定的时间间隔之后执行代码，称之为计时事件

计时方法：

setInterval()：间隔指定毫秒数不停地执行指定代码

clearInterval()：用于停止setInterval()方法

setTimeout()：暂停指定的毫秒数后执行指定的代码

clearTimeout()：用于停止执行setTimeout()

3.History对象

window.history对象包含浏览器的历史的集合

History方法：

history.back()：与在浏览器中点击后退按钮相同

history.forward()：与在浏览器中点击向前按钮相同

history.go()：进入历史中的某个页面

4.Location对象

用于获取当前页面的地址，并把浏览器重定向到新的页面

Location对象的属性：

Location.hostname 返回主机的域名

Location.pathname 返回当前页面的路径和文件名

Location.port返回web主机的端口

Location.protocol 返回所使用的文web协议

Location.href 返回当前页面的URL

Location.assign() 方法加载新的文档

5.Screen对象

包含有关用户屏幕的信息

属性：

screen.availWidth 可用的屏幕宽度

screen.availHeight 可用的屏幕高度

screen.Height 屏幕高度

screen.Width 屏幕宽度

hepei_i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对象

JavaScript是一种基于对象的语言，对象是JS中最重要的元素JavaScript中包含有：HTML DOM对象、内置对象、浏览器对象、ActiveX对象JavaScript对象的使用方法对象是由属性和方法封装而成的，所以属性的引用就是使用“.”，通过上下标的方式引用对象方法的引用:ObjectName.methods();HTML DOM对象当网页被加载时，浏览器会创建页面的...
复制链接

扫一扫

专栏目录