JavaScript操作BOM对象

最新推荐文章于 2022-03-18 23:25:31 发布

筱_智

最新推荐文章于 2022-03-18 23:25:31 发布

阅读量132

点赞数

分类专栏： JavaScript 文章标签： JavaScript三个重要核心对象 window location history 内置对象的函数

本文链接：https://blog.csdn.net/pojpoj/article/details/81870414

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三个核心对象:

window:
[window].alert 只存在提示信息 alert(message)
[window].prompt 允许用户手动输入 var obj=prompt(message)
[window].confirm 帮助用户做判断当用户点击确定的时候返回true，
点击取消的时候返回false
open(url) 打开指定的url地址
close() 关闭当前的标签页
confirm.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>confirm弹层</title>
    <script>
        function del(){
            var flag = confirm('您确定要删除吗？');
            if(flag){
                alert("拜拜");
            } else{
                alert("我们还嫩能够继续。");
            }
        }
        function toBaidu(){
            open('https://www.baidu.com');
        }
    </script>
</head>
<body>
    <!--删除按钮-->
    <!--<buttun onclick="javascript:confirm('您确定要删除吗？')">删除</buttun>-->
    <buttun onclick="del()">删除</buttun>
    <buttun onclick="toBaidu()">百度</buttun>
    <a href="history.html">去history页面</a>
    <button onclick="javascript:history.forward()">前进</button>
</body>
</html>

success.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>欢迎页</title>
    <script>
        function closeThis(){
            close('./success.html');

        }
    </script>
</head>
<body>
    <img src="./img/gaoyuanyuan.png" /> 欢迎您！
    <button onclick="closeThis()">关闭</button>
</body>
</html>

setTimeout(function(){},毫秒) 指定时间延迟操作 只操作一次 

var i=setInterval(function(){},毫秒) 指定时间延迟操作 操作多次(每隔一段时间操作一次)
clearInterval(i) 清空定时特效

onload 事件:等待页面上的所有元素加载完毕

timing.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时函数</title>
    <script>
        function print(){
         setTimeout(
         function(){
         alert("我叫jhz");
         },5000
         );
         }
         print();
    </script>
    </head>
<body>
    <input name="btn" type="button" value="定时" onclick="print();" />
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时函数</title>
    <script>
        window.onload=function(){
            //保证页面上的元素加载完毕后
            var btn=document.getElementsByTagName('button');
            alert(btn);
            // 元素中的文本 innerText
            alert(btn.innerText);
        }
    </script>
    </head>
<body>
    <button id="btn">点击获取验证码</button>
</body>
</html>

history.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
    <!--<button onclick="javascript:history.forward()">前进</button>-->
    <button onclick="javascript:history.back()">后退</button>
</body>
</html>

history:window
history:back() 回退===>go(-1)
forward() 前进 ===> go(1)
go(index) 即可前进又可后退
注：这里的前进后退与浏览器上的前进后退按钮是一样的效果。
当我们从一个网页上访问一个链接后可以后退回网页，然后在网页上可以再次前进到刚才跳转的链接页面。（犹如连续的上一步和下一步似的）
location: window

    host:主机地址+端口号
    hostname:主机名
    port:端口号
    protocol:协议
    href:发送请求到指定URL
    reload() 刷新当前页面
    replace(url) 替换 以新的页面替换当前页面

location.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>location</title>
    <script>
        function toBaidu(){
            //get请求
            location.href="http://www.baidu.com";
            Math
            Date
        }
    </script>
</head>
<body>
    <button onclick="javascript:alert(location.host)">查看主机地址</button>
    <button onclick="javascript:alert(location.hostname)">查看主机名</button>
    <button onclick="javascript:alert(location.port)">查看端口</button>
    <button onclick="javascript:alert(location.protocol)">查看协议</button>
    <button onclick="javascript:alert(location.href)">查看href</button>
    <button onclick="toBaidu()">去百度</button>
    <button onclick="javascript:location.reload()">刷新</button>
    <!--get请求-->
    <button onclick="javascript:location.replace('http://www.baidu.com')">replace百度</button>
</body>
</html>

—文档对象 XML
document.getXXX()
var obj=document.getElementById(“id属性值”) 根据页面元素的id获取元素对象返回的是单个节点对象
—————————–返回的都是节点集合————————-
document.getElementsByName(“name属性值”)根据页面元素的name属性获取元素对象

   document.getElementsByClassName("class属性值")

   document.getElementsByTagName("节点名称")

javascript的内置对象的函数

   **Math对象:**
      Math.ceil(number)向上取整  
      Math.floor(number) 向下取整
      Math.round(number)四舍五入
      Math.random() 生成0~1的随机数

   **Date日期对象:**
    getDate = function() {};  // 获取当前日期(天)
    }
    getDay = function() {};  //一周中的第几天 

    }
    getMonth = function() {};// 一年中的第几月
    }
    getFullYear = function() {};// 返回年份 4位数
    }
    getHours = function() {};  //一天的第几个小时
    }
    getMilliseconds = function() {}; //获取毫秒 当前分钟
    }
    getMinutes = function() {};//分钟 当前小时
    }
    getSeconds = function() {}; //秒 当前分钟
    }
    getTime = function() {}; //时间  1970年1月1日 到现在的毫秒数

date.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>date</title>
    <script>
        window.onload=function(){
            var date = new Date();
            alert(date.getDate());//获取当前日期(天)
            alert(date.getDay());//一周中的第几天
            alert(date.getMonth());//一年中的第几月   0-7（cong0开始）
            alert(date.getFullYear());// 返回年份 4位数
            alert(date.getHours());//一天的第几个小时
            alert(date.getMilliseconds());//获取毫秒 当前分钟
            alert(date.getMinutes ());//分钟 当前小时
            alert(date.getSeconds ());//秒 当前分钟
            alert(date.getTime());//时间  1970年1月1日 到现在的毫秒数
            document.write("结束。");
        }
    </script>
</head>
<body>

</body>
</html>

筱_智

关注

0
点赞
踩
0

收藏

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

三个核心对象:window: [window].alert 只存在提示信息 alert(message) [window].prompt 允许用户手动输入 var obj=prompt(message) [window].confirm 帮助用户做判断当用户点击确定的时候返回true， ...
复制链接

扫一扫

专栏目录