JavaScript之BOM与DOM操作

GG_Bonin

于 2022-08-27 20:49:17 发布

阅读量311

点赞数

分类专栏：前端开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52596593/article/details/126561160

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.BOM操作

所有的JavaScript全局对象、函数以及变量均自动成为window对象的成员

1.BOM操作

BOM就是浏览器对象模型，通过JS代码实现与浏览器交互，BOM也是window对象的属性之一

常用的Window方法：

         $\bullet$ window.innerHeight                  浏览器窗口内部高度

         $\bullet$ window.innerWidth                 浏览器窗口内部宽度

         $\bullet$ window.open()                 打开新窗口

         $\bullet$ window.close()                  关闭当前窗口

         $\bullet$ window.history()                 浏览历史对象

         $\bullet$ window.history.forward()                  前进一页

         $\bullet$ window.history.back()                  后退一页

         $\bullet$ window.loaction.href                  获取URL

         $\bullet$ window.loaction.href="新网址“ 跳转到新网页

         $\bullet$ window.loaction.reload() 重新加载页面

         $\bullet$ alert() 警告框

         $\bullet$ confirm() 确认框

         $\bullet$ prompt() 提示框

         $\bullet$ setTimeout("JS语句",倒计时间毫秒) 设置计时器
function func1(){
    alert('计数结束，弹出我！')
}
let t = setTimeout(func1,3000)  // 3秒中之后自动执行func1函数
clearTimeout(t)  // 取消上面的定时任务

2.DOM操作

当网页被加载时，浏览器会创建页面的文档对象模型DOM(Document Object Model)是文档对象模型，通过JS代码实现跟html交互，HTML DOM模型被构造为对象的树。

2.1 DOM标准规定HTML文档中的每个成分都是一个节点：
文档节点(document对象)：代表整个文档

元素节点(element对象)：代表一个元素(标签)

文本节点(text对象)：代表元素(标签)中的文本

属性节点(attribute对象)：代表一个属性，元素(标签)才有属性

注释节点(comment对象)
2.2标签节点：
document.getElementById：根据ID获取标签

document.getElementsByClassName：根据class属性获取标签

document.getElementsByTagName：根据标签名获取标签合集

document.createElement()：创建节点

somenode.replaceChild()：删除节点

divEle.innerText：设置文本节点的值
divEle.innerHTML：设置文本节点的值可以设置标签属性