DOM和BOM操作

最新推荐文章于 2025-02-21 10:27:09 发布

原创最新推荐文章于 2025-02-21 10:27:09 发布 · 183 阅读

CC 4.0 BY-SA版权

本文深入探讨了DOM（文档对象模型）和BOM（浏览器对象模型）的核心概念及常用方法。详细介绍了document对象的节点操作，如createElement(), appendChild(), createTextNode()等，以及BOM中的window对象属性和方法，包括window.innerWidth, window.open(), navigator.userAgent等，帮助读者全面理解前端开发中的关键API。

DOM

document对象的节点操作

方法	意义
write()	可以把任意字符插入到文本中
createElement()	创建一个元素节点
appendChild()	添加一个新的节点到某个已知节点的末尾
createTextNode()	创建一个文本节点
insertBefore()	创建节点到已知指定节点的前面
removeChild()	删除节点
cloneNode()	复制节点
replaceChild()	替换节点

BOM

window 是 BOM 中的顶层对象

window.innerWidth	浏览器窗口的内部宽度
window.innerHeight	浏览器窗口的内部高度
window.open()	打开新的窗口
window.close()	关闭当前的窗口

其他对象都属于window 子对象

navigator

获取当前浏览器的信息

appName	获取浏览器全称
appVersion	获取浏览器的厂商和版本信息
userAgent	获取到客户端绝大部分信息
platform	获取到浏览器运行所在的操作系统

screen

屏幕对象

availHeight	可用屏幕的高度
availWidth	可用屏幕的宽度

history

获取当前浏览器的历史

window.history;

forward()	前进一页
back()	后退一页

location

包含有关当前 URL 的信息。

window.location;

获取当前的URL

var href = location.href;

跳转到指定地址

location.href = "http://www.baidu.com";

重新加载页面

location.reload();

弹出框
警告框
alert()

alert("警告框");

确认框
confirm()

confirm("确认框");

提示框
prompt()

prompt("请在屏幕下方","你的答案");

案例：定时器
setTimeout() 、clearTimeout()
只执行一次

var timeOut = setTimeout(function () {
     alert("Hello World");
  },3000);
    
    //取消定时器
 clearTimeout(timeOut);

setInterval()、clearInterval()
重复执行

var interval = setInterval(function () {
      var time = new Date();
      console.log(time.toLocaleTimeString());
   },1000);
   
    //取消定时器
 clearInterval(interval);