首頁 > 文章 > web前端 > js中如何操作BOM物件？ js中操作BOM物件的方法

js中如何操作BOM物件？ js中操作BOM物件的方法

不言原創: 2018-08-21 15:39:521299瀏覽

這篇文章帶給大家的內容是關於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物件的方法

相關文章