首页 >web前端 >js教程 >js中如何操作BOM对象？js中操作BOM对象的方法

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

不言原创: 2018-08-21 15:39:521357浏览

本篇文章给大家带来的内容是关于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(&#39;您确定要删除吗？&#39;);            
            if(flag){
                alert("拜拜");
            } else{
                alert("我们还嫩能够继续。");
            }
        }        function toBaidu(){
            open(&#39;https://www.baidu.com&#39;);
        }    </script></head><body>
    <!--删除按钮-->
    <!--<buttun onclick="javascript:confirm(&#39;您确定要删除吗？&#39;)">删除</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(&#39;./success.html&#39;);

        }    </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(&#39;button&#39;);
            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(&#39;http://www.baidu.com&#39;)">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中如何操作BOM对象？js中操作BOM对象的方法

相关文章