美文网首页H5^Study
JS基础学习:DOM

JS基础学习:DOM

作者: Merbng | 来源:发表于2019-04-08 22:56 被阅读0次

BOM

  • 浏览器中有个顶级对象:window
  • 页面中的顶级对象:document

页面中所有的内容都是属于浏览器的,页面中的内容也都是window

window.location;

  • 主机名及端口号:host
  • 地址:href
  • 端口号:port
  • 主机名:hostname
  • 文件的路径(绝对路径):pathname
  • 地址栏上面的#及后面的内容:hash
  • 协议:protocol
  • 搜索的内容:search

href /assign /reload

location.href = "http://www.jd.com";//属性
location.assign("http://www.jd.com"); //方法
location.reload();//刷新,重新加载
location.replace("http://www.jd.com");//没有历史记录

<script type="text/javascript">
            var locationObj = window.location;

            console.log("主机名及端口号:" + locationObj.host);
            console.log("地址:" + locationObj.href);
            console.log("端口号:" + locationObj.port);
            console.log("主机名:" + locationObj.hostname);
            console.log("文件的路径(绝对路径):" + locationObj.pathname);
            // 地址栏上面的#及后面的内容
            console.log("#及后面的内容:" + locationObj.hash);
            console.log("协议:" + locationObj.protocol);
            console.log("搜索的内容:" + locationObj.search);
        </script>
        <input type="button" name="" id="btn" value="跳转" />
        <script type="text/javascript">
            document.getElementById('btn').onclick = function() {
                // location.href = "http://www.jd.com";//属性
                // location.assign("http://www.jd.com"); //方法

                // location.reload();//刷新,重新加载
                location.replace("http://www.jd.com");//没有历史记录
                
            };
        </script>

navigator对象

  • 通过platform可以判断浏览器所在的系统平台类型
    window.navigator.platform
  • 浏览器类型
    window.navigator.userAgent
<script type="text/javascript">
            // 通过platform可以判断浏览器所在的系统平台类型
            console.log(window.navigator.platform);
            // 浏览器类型
            console.log(window.navigator.userAgent);
        </script>

定时器

// 参数1:函数
// 参数2:时间---毫秒
// 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过一秒,再执行函数
// 返回值:就是定时器的id值

var timeId = window.setInterval(function() {
alert("我就安静"); //断言
}, 1000);

//停止定时器
// 参数:要清理的定时的id的值
window.clearInterval(timeId);

<input type="button" name="" id="btn" value="停止" />
        <script type="text/javascript">
            // 定时器
            // 参数1:函数
            // 参数2:时间---毫秒
            // 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过一秒,再执行函数
            // 返回值:就是定时器的id值
            var timeId = window.setInterval(function() {
                alert("我就安静"); //断言
            }, 1000);
            document.getElementById('btn').onclick = function() {
                //停止定时器
                // 参数:要清理的定时的id的值
                window.clearInterval(timeId);
            };
        </script>

相关文章

  • DOM

    DOM JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • JS基础学习:DOM

    BOM 浏览器中有个顶级对象:window 页面中的顶级对象:document 页面中所有的内容都是属于浏览器的,...

  • web前端 -- Day23 js高级

    js基础 JavaScript简称:JS JS分三个部分: ECMAScript标准---基础的语法 DOM D...

  • JavaScript 笔记整理

    ~~~ Basis ~~~ JS可以让网页呈现各种动态效果。先学习基础语法和如何使用DOM进行简单操作。 JS代...

  • html基础 持续更新

    html js 基础 js 常见获取dom对象的方法 getElementById() getElementByN...

  • Dom

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • DOM

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • React基础篇之虚拟DOM

    Hello World JS创建虚拟DOM JSX创建虚拟DOM 虚拟DOM与真实DOM 下一篇:React基础篇...

  • js基础之DOM中元素对象的属性方法

    js基础之DOM中元素对象的属性方法

  • 李祖龙-1020-笔记

    node.js js 基础 dom(重点) linux 命令 apt-cache search *** 查询软件...

网友评论

    本文标题:JS基础学习:DOM

    本文链接:https://www.haomeiwen.com/subject/mhimiqtx.html