JavaScript 的 BOM对象与 DOM对象

最新推荐文章于 2024-02-12 08:00:00 发布

§九千七§

最新推荐文章于 2024-02-12 08:00:00 发布

阅读量278

点赞数

分类专栏： JavaWeb 文章标签： js javascript java

本文链接：https://blog.youkuaiyun.com/chuli0327/article/details/109393206

版权

JavaWeb 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了JavaScript中的BOM对象，包括其作用、消息框、定时器和location对象。此外，还详细讲解了DOM对象，包括DOM的定义、DOM树的生成、获取元素的四种方法以及元素对象的常见属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM对象： Brower Object Model 浏览器对象模型

1.作用：用来执行浏览器的相关操作 eg ：浏览器的地址，弹出消息

一般情况下，window代表了BOM对象 - - window 对象是JavaScript 的内置对象，使用window 对象调用方法时可以省略window不写

2.消息框

alert() ：警告框，用来弹出警告消息
注：不同浏览器显示的组件样式不同，这里我们无需关注组件样式

confim() ：确认框：用于告知用户信息并收集用户的选择
该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值

3.定时器

循环定时器的设置和取消
启动 - setInterval() ：循环定时器，调用一次就会创建并循环执行一个定时器
格式： setInterval(调用方法，毫秒值);
效果：每隔一段时间就会弹出一次对话框
取消 - clearInterval(循环定时器的ID)；
启动一次性定时器：一次性定时器，调用一次就会创建并执行一个定时器一次
setTimeout 方法在创建一个定时器的同时，还会返回一个定时器ID，该ID就代表这个定时器
此定时器ID在当前页面是不重复的
格式： setTimeout()调用方法，毫秒值;
停止： clearTimeout(定时器ID);

4.location对象

location对象包含浏览器地址栏的信息
常用属性： href 设置或返回完整的URL
eg ：执行路径跳转 location.href = "http://www.baidu.com";

DOM对象

1 . 简述

是什么： Document Object Model 文档对象模型
作用： DOM是将标记型文档中所有内容（标签，文本，属性）都封装成对象，通过操作对对象的属性或者方法，来达到操作或者改变HTML展示效果的目的

2 . DOM 树介绍

上述文档会被浏览器由上到下依次加载并解析，加载到浏览器的内存

2.DOM树生成
每个标签会被加载成DOM树上的一个元素节点对象
每个标签的属性会被加载成DOM树上的一个属性节点对象
每个标签的内容体会被加载称DOM树上的一个文本节点对象
整个DOM树，是一个文档节点对象，即DOM对象
一个HTML文档加载到内存中就会形成一个DOM对象

3.DOM树特点
必定会有一个根节点
每一个节点都是节点对象
常见的节点关系，父子节点关系
文本节点对象没有子节点 --叶子节点
每个节点都有一个父亲节点，零到多个子节点
只有根节点没有父亲节点

3.获取元素对象四种方式

在JavaScript 中，我们可以通过DOM对象的4种方式获取对应的元素对象
getElementById();    通过元素ID获取对应元素对象
找不到则返回null
getElementByName();     通过元素的name 属性获取符合要求的所有元素
返回的是一个元素节点对象的数组，找不到则返回空数组
   getElementByTagname();  通过元素的元素名属性获取符合要求的所有元素对象
getElementByClassName();  通过元素的class属性获取符合要求的所有元素对象
注：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中

4.元素对象常见属性

value
元素对象 . value ,获取元素对象的value属性值
元素对象 . value = 属性值设置元素对象的value属性值
className
元素对象 . className ，获取元素对象的class'属性值
元素对象 . className = 属性值设置元素对象的class属性值
checked
元素对象 . checked 获取元素对象的 checked 属性值
元素对象 . checked = 属性值设置元素对象的checked属性值
注： HTML 中 checked = “checked” , Javascript 中返回 true false
innerHTML
元素对象 . innerHTML ，获取元素对象的内容体
元素对象 . innerHTML = 值设置元素对象的内容体
操作元素的内容体