✿✿✿JavaScript --- BOM、DOM对象
创始人
2024-03-04 11:28:17
0

目 

一、BOM浏览器对象模型

1.Window窗口对象

(1)与弹出有关的方法

(2)与定时器有关的方法

(3)与打开关闭有关的方法

(4) 获取其他对象的属性

2.Location地址栏对象 

3.History历史记录对象

二、DOM文档对象模型

1.Document文档对象

(1)获取Element对象

(2)创建其他对象

 2.标签对象的属性

创建删除DOM元素案例:


一、BOM浏览器对象模型

BOM(Browser Object Model) 浏览器对象模型。也就是将浏览器的各个组成部分封装为对象。主要特点就是BOM对象不能由我们程序员自己创建,当文档加载进内存,浏览器自动创建。BOM中常见的对象如下:

1.Window窗口对象

使用方式: window.方法名();   或   方法名();( window 可以省略)。 该对象常用到的方法如下:

(1)与弹出有关的方法

  • alert()                                                 显示带有一段消息和一个确认按钮的警告框。
  • confirm()                                            显示带有一段消息以及确认按钮和取消按钮的对话框。 
  • prompt()                                             显示可提示用户输入的对话框。 

(2)与定时器有关的方法

  • setInterval()                                        按照指定的周期(以毫秒计)来调用函数或计算表达式。 循环执行
  • clearInterval()                                     取消由 setInterval() 设置的 timeout。  
  • setTimeout()                                       在指定的毫秒数后调用函数或计算表达式。 只执行一次
  • clearTimeout()                                    取消由 setTimeout() 方法设置的 timeout。 

(3)与打开关闭有关的方法

  • open()                                                 打开新窗口。参数:打开目标的URL。返回值:返回新打开窗口的window引用
  • close()                                                 关闭窗口。注:谁调用我 , 我关谁

(4) 获取其他对象的属性

  • history                                                 对 History 对象的只读引用。请参数 History 对象。 
  • location                                               用于窗口或框架的 Location 对象。请参阅 Location 对象。 
  • Navigator                                            对 Navigator 对象的只读引用。请参数 Navigator 对象。 
  • Screen                                                对 Screen 对象的只读引用。请参数 Screen 对象。 
  • document                                            对 Document 对象的只读引用。请参阅 Document 对象。 

2.Location地址栏对象 

获取方式:可以用window对象中的属性获取。常用的属性 ---->  href:设置或获取当前的URL。

进入网易进入首页

3.History历史记录对象

获取方式:可以用window对象中的属性获取。 常用的方法:go();注:1表示前进,-1表示后退。

补:Navigator浏览器对象。以及Screen显示器屏幕。基本不用仅作了解!!Screen的属性如下:

  • availHeight                                            获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。     
  • availWidth                                             获取系统屏幕的工作区域宽度,排除 Windows 任务栏。     
  • height                                                    获取屏幕的垂直分辨率。 
  • width                                                      获取屏幕的水平分辨率。 
进入A页面前进

二、DOM文档对象模型

DOM(Document Object Model) 文档对象模型,将标记语言文档的各个组成部分封装为对象。

1.Document文档对象

用window对象中的属性获取,window.document。常用的属性:

  • body                                                        可以获取body标签对象
  • title                                                          属性获取文档标题
  • lastModified                                             获取文档最后一次修改时间
  • URL                                                         获取地址栏中的地址

常用的方法如下:

(1)获取Element对象

  • getElementById()                                    通过id属性值获取唯一的元素
  • getElementsByTagName()                      通过标签名称获取元素对象数组
  • getElementsByName()                            通过name属性值获取元素对象数组
  • getElementsByClassName()                   通过class属性值获取元素对象数组                
  • querySelector()                                        根据css的选择器语法来选择的,获取的是第一个是个单数
  • querySelectorAll(".myclass")                    根据css的选择器语法来选择的,获取的是多个

(2)创建其他对象

  • createElement                                           创建元素对象
  • createAttribute                                           创建属性对象
  • createComment                                         创建注释对象
  • createTextNode                                         创建文本对象
  • setAttribute()                                              给属性对象设置值
  • remove()                                                    删除自己
  • removeChild()                                            移除子元素
  • removeAttribute("align")                             根据属性名来移除标签上的属性
  • removeAttributeNode(attr)                          移除属性对象。传入的是一个属性对象
  • replaceChild(h4,h)                                      站在父元素的角度,替换子元素,值1:新的元素,值2:是要替换的旧元素。
  • insertBefore(h5,h1)                                     站在父标签的角度,在这个h1标签对象的前面插入h5这个标签对象。

aaa

000000001

000000002

000000003

000000004

000000005

000000006

000000007

000000008

000000009

000000010

0000001

0000002

0000003

0000004

0000005

0000006

0000007

0000008

0000009

0000010

 2.标签对象的属性

  • nnerHTML属性                                            获取或设置 元素的 子内容
  • innerTEXT属性                                            获取标签之间的文本内容
学习游戏娱乐音乐

0000001

0000002

0000003

0000004

0000005

0000006

0000007

0000008

0000009

0000010

创建删除DOM元素案例:



(小编也在努力学习更多哟!以后再慢慢分享的啦!)

希望对友友们有所帮助!!!

 

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...