BOM-JavaScript是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互,这些对象主要包括window、document、location、navigator和screen等。通常称为浏览器对象模型(Brower Object Model)

Window对象是整个JavaScript脚本运行的顶层对象,它的常用属性如下:

document

返回该窗口内装载的HTML文档

location

返回该窗口装载的HTML文档的URL

navigator

返回浏览当前页面的浏览器,包含了一系列的浏览器属性,包括名称、版本号和平台等。

screen

返回当前浏览者屏幕对象

history

返回该浏览窗口的历史

提示:这些属性都是属于window对象的子对象,每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。

window对象的常用方法:

alert()、confirm()、prompt()

分别用于弹出警告窗口、确认对话框和提示输入对话框。

close()

关闭窗口

scrollBy()、scrollTo()

滚动当前窗口的HTML文档

setInterval()、clearInterval()

设置、删除定时器

DOM是文档对象模型(Document Object Model)的简称。当网页加载时,可以将结构化文档在内存中转换成对象的树。以下是HTML DOM树:

小结:简单的说DOM并不是一种技术,而是一种访问结构化文档的一种思想。借助DOM模型,我们可以对DOM树进行修改、删除、新增等操作,让结构化文档动态化。

DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点:

  1. 元素节点:各种标签就是这些元素节点的名称,例如<p>、<ul>等
  2. 文本节点:文本节点总是被包含在元素节点的内部
  3. 属性节点:一般用来修饰元素节点就称之为属性节点。

为了动态地修改HTML元素,须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素:

  1. 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。

   2.利用节点关系访问HTML元素。常用的属性和方法如下:

parentNode

返回当前节点的父节点

previousSibling

返回当前节点的前一个兄弟节点

nextSibling

返回当前节点的后一个兄弟节点

childNodes

返回当前节点的所有子节点

firstChild

返回当前节点的第一个子节点

lastChild

返回当前节点的最后一个子节点

getElementsByTagName(tagName)

返回当前节点的具有指定标签名的所有子节点

Bom和Dom对象的更多相关文章

  1. javascript的BOM,DOM对象

    BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...

  2. 百万年薪python之路 -- JS的BOM与DOM对象

    BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...

  3. 细看JS中的BOM、DOM对象

                                        DOM对象模型  DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...

  4. 014、BOM与DOM对象的应用

    Screen屏幕对象 Width:屏幕的宽度 Height:屏幕的高度 availWidth:屏幕的有效宽度(不含任务栏) availHeight:屏幕的有效高度(不含任务栏) colorDepth: ...

  5. css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...

    css部分代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  6. 56、jsのBOM对象与DOM对象

    javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 一.BOM对象 1.window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个windo ...

  7. 8、jsのBOM对象与DOM对象

    javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 本篇导航: BOM对象 DOM对象 DOM Event(事件) 实例练习 一.BOM对象 1.window对象 所有浏览 ...

  8. 【Python之路】特别篇--ECMA对象、DOM对象、BOM对象

    ECMA对象 从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词. ECMAScript 定义了“对象定义”,逻辑上等价 ...

  9. JavaScript 参考手册——javascript本地和内置对象、BOM、DOM

    本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript 对象参考手册 本参考手册描述 ...

随机推荐

  1. js中刷新页面的方式总结

    1.window.onload / document.onload 2.history.go(num): (1)num为参数,num为正表示前进几个页面,类似于history.forward(): ( ...

  2. JS作用域和变量提升看这一篇就够了

    作用域是JS中一个很基础但是很重要的概念,面试中也经常出现,本文会详细深入的讲解这个概念及其他相关的概念,包括声明提升,块级作用域,作用域链及作用域链延长等问题. 什么是作用域 第一个问题就是我们要弄 ...

  3. Python --表达式和运算符

    表达式 由一个或者几个数字或者变量和运算符组合成的一行代码 通常会返回一个结果 运算符 由一个以上的值经过变化得到新值的过程就叫做运算 用于运算的符号称为运算符 运算符的分类: 算数运算符 比较或者关 ...

  4. Mockito不能mock final类的解决办法

    Mockito是很常用的测试工具,使用过程中可能会遇到下面的问题: Mockito cannot mock/spy because : - final class 问题重现: 引入该依赖到项目的mav ...

  5. Atcoder Beginner Contest 166

    VP赛况如下: 前言:感觉这一场题目难度还是比较贴近新生的,我一个codeforces小蓝名一小时居然AK了,F题数据有点水(?)暴力dfs居然都能过... A:A?C 题意:给你字符串,如果字符串是 ...

  6. Oracle用decode函数或CASE-WHEN实现自定义排序

    1 问题 对SQL排序,只要在order by后面加字段就可以了,可以通过加desc或asc来选择降序或升序.但排序规则是默认的,数字.时间.字符串等都有自己默认的排序规则.有时候需要按自己的想法来排 ...

  7. 如何将你的node服务放到线上服务器

    最近在用node写后端数据处理,以前虽然也用node写数据来进行测试,但是一直都是处于本地使用, 今天想将node作为后端服务来处理数据, 特此,以此博客记录. 第一步,写node 接口, 在本地我们 ...

  8. POJ1930

    题目链接:http://poj.org/problem?id=1930 题目大意: 给一个无限循环小数(循环节不知),要求你输出当该小数所化成的最简分数分母最小时所对应的最简分数. AC思路: 完全没 ...

  9. SpringBoot2.x快速入门指南(一)

    SpringBoot2.x快速入门指南(一) 准备工作 IDE: IntelliJ IDEA 2020.3 Java环境 jdk1.8 在官网快速创建SpringBoot项目 下面开始进入正题: 进入 ...

  10. el-select检索功能

    使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法, ...