浏览器中的对象总结

最新推荐文章于 2024-06-05 11:07:30 发布

原创最新推荐文章于 2024-06-05 11:07:30 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

这些对象都在下面连接中有介绍，更详细请参考该链接：
https://www.w3school.com.cn/jsref/dom_obj_document.asp

1.Window 对象

浏览器为每一个打开的窗口生成一个window对象，该对象包含了所有窗口的属性。也可以理解成当前窗口的命名空间，所有定义的对象，在window对象中都可以找到，甚至可以不用显示定义。

<script>
   $('.weui-btn').click(function() {
    window.clearInterval(window.pool_test);//停止定时器
    console.log("armwnid");
    alert("start reload");
    location.reload()//重新加载页面
  })
  let count = 0;
  function poll() {
    count++;
    console.log(count);
  }
  function timeout_test() {
    console.log("timeout");
  }
  pool_test = window.setInterval(poll,1000); //循环1s执行poll()，注意这了我没有显示定义pool_test
  console.log("pool_test:%d", pool_test);
  window.setTimeout(timeout_test, 4000);//只会执行一次，4s超时后执行timeouit_test();
</script>

setInterval: 按着设置的时间，周期执行一个函数。定义时返回定时器的handle
clearInterval:停止上面设置的循环定时器。
setTimeout:设置定时器，超时后会执行设置的方法。

就简单实验上面几个方法，其它方法，可在开始贴出的链接中看到。上面执行代码可结合下面效果验证。
在这里插入图片描述

2.Location 对象

这里主要是看中href属性了，该属性可读可写，可设置或返回当前显示的文档的完整 URL。如果改变了当前窗口的location.href，则会跳转到对应的网页。
例子:


  console.log(window.location.href);
  alert("start jump");
  window.location.href='fjweiui2.html';

注意下面的测试结果，一开始我把html修改成了fjweiui.html,可以看到打开后文件路径是fjweui.html,当点击确定后，就会跳转到fjweiui2.html。这是因为我们修改了href属性，导致页面重新跳转了。
在这里插入图片描述

3.Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

window中的document和直接使用document是一个道理，document中包含当前页面中所有html元素。我们可以通过这个对象来操作html元素。