欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js中如何操作BOM对象?js中操作BOM对象的方法

程序员文章站 2022-04-19 22:56:53
...

本篇文章给大家带来的内容是关于js中如何操作BOM对象?js中操作BOM对象的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

三个核心对象:

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>

相关推荐:

js中日期对象data的内容解析(附案例)

编写js组件时需要注意的地方有哪些?(方法介绍)

以上就是js中如何操作BOM对象?js中操作BOM对象的方法的详细内容,更多请关注其它相关文章!

相关标签: BOM对象