JavaScript学习笔记(四) BOM 与 DOM

这篇文章我们将会简单的介绍 BOM 和 DOM 常用的属性与方法，权且当作是一篇速查手册吧

一、浏览器对象模型

浏览器对象模型（Browser Object Model，BOM）使 JavaScript 可以与浏览器进行交互

1、Window

window 对象表示浏览器窗口，全局变量是 window 对象的属性，全局函数是 window 对象的方法

（1）属性

  • name：窗口的名称
  • closed：窗口是否已被关闭
  • self：对当前窗口的引用
  • parent：对父窗口的引用
  • opener：对创建当前窗口的窗口的引用
  • document：对 Document 对象的只读引用
  • screen：对 Screen 对象的只读引用
  • location：对 Location 对象的只读引用
  • history：对 History 对象的只读引用
  • navigator：对 Navigator 对象的只读引用
  • innerHeight：浏览器窗口的内部高度（文档显示区的高度）
  • innerWidth：浏览器窗口的内部宽度（文档显示区的宽度）
  • outerheight：浏览器窗口的外部高度
  • outerwidth：浏览器窗口的外部宽度

（2）方法

  • open()：打开新窗口
  • close()：关闭当前窗口
  • moveTo()：把窗口的左上角移动到指定的坐标
  • moveBy()：按照指定的像素移动窗口的位置
  • resizeTo()：把窗口的大小调整到指定的宽度和高度
  • resizeBy()：按照指定的像素调整窗口的大小
  • scrollTo()：把内容滚动到指定的坐标
  • scrollBy()：按照指定的像素滚动内容
  • alert()：创建警告框，用于确保用户可以得到某些信息
  • confirm()：创建确认框，用于确保用户可以得到或验证某些信息
  • prompt()：创建提示框，用于提示用户在进入页面前输入某个值
  • setInterval()：按照指定的周期来调用函数或计算表达式
  • clearInterval()：取消由 setInterval() 设置的 interval
  • setTimeout()：按照指定的时间来调用函数或计算表达式
  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout
  • focus()：把键盘焦点给予一个窗口
  • blur()：把键盘焦点从顶层窗口移开

2、Window Screen

window.screen 对象（可以简写为 screen 对象）包含屏幕的信息

（1）属性

  • width：显示器屏幕的宽度

  • height：显示器屏幕的高度

  • availWidth：显示器屏幕的可用宽度

  • availHeight：显示器屏幕的可用高度

  • colorDepth：调色板的比特深度

  • pixelDepth：屏幕的颜色分辨率

  • updateInterval：屏幕的刷新率

  • deviceXDPI：显示屏幕的每英寸水平点数

  • deviceYDPI：显示屏幕的每英寸垂直点数

  • logicalXDPI：显示屏幕每英寸的水平方向的常规点数

  • logicalYDPI：显示屏幕每英寸的垂直方向的常规点数

3、Window Location

window.location 对象（可以简写为 location 对象）包含 URL 的信息

（1）属性

  • href：当前页面的 URL
  • protocol：当前 URL 的协议
  • host：当前 URL 的主机名 和 端口号
  • hostname：当前 URL 的主机名
  • port：当前 URL 的端口号
  • pathname：当前 URL 的路径
  • search：从问号（?）开始的 URL（查询部分）
  • hash：从井号（#）开始的 URL（锚点部分）

（2）方法

  • reload()：重新加载当前文档
  • assign()：加载一个新的文档
  • replace()：用新的文档替换当前文档

4、Window History

window.history 对象（可以简写为 history 对象）包含浏览器的历史

（1）属性

  • length：浏览器历史列表中的 URL 数量

（2）方法

  • back()：加载 history 列表中的前一个 URL
  • forward()：加载 history 列表中的下一个 URL
  • go()：加载 history 列表中指定的 URL

5、Window Navigator

window.navigator 对象（可以简写为 navigator 对象）包含有关访问者浏览器的信息

（1）属性

  • appCodeName：浏览器的代码名
  • appName：浏览器的名称
  • appVersion：浏览器的版本
  • appMinorVersion：浏览器的次级版本
  • browserLanguage：浏览器的语言
  • cpuClass：浏览器的 CPU 等级
  • cookieEnabled：浏览器是否启用 cookie
  • userAgent：User-Agent Header
  • onLine：系统是否处于脱机模式
  • platform：运行浏览器的操作系统平台
  • systemLanguage：操作系统平台使用的默认语言
  • userLanguage：操作系统平台的自然语言设置

二、文档对象模型

文档对象模型（Document Object Model，DOM）使 JavaScript 可以访问和操作 HTML 文档

1、Document

每个载入浏览器的 HTML 文档都会成为 Document 对象

注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

（1）属性

  • body：当前文档的 <body> 元素
  • title：当前文档的标题
  • cookie：与当前文档有关的所有 cookie
  • domain：当前文档的域名
  • URL：当前文档的 URL
  • referrer：载入当前文档的文档的 URL
  • lastModified：当前文档最后修改的时间

（2）方法

  • write()：向文档写 HTML 表达式 或 JavaScript 代码
  • writeln()：向文档写 HTML 表达式 或 JavaScript 代码，并在每个表达式后添加一个换行符
  • getElementById()：返回带有指定 ID 的节点
  • getElementsByTagName()：返回带有指定标签名称的节点列表
  • getElementsByClassName()：返回带有指定类名的节点列表

2、Element

Element 对象表示 HTML 元素

（1）属性

  • nodeName：规定节点名称，只读
nodeName 值
元素节点 与标签名相同
属性节点 与属性名相同
文本节点 #text
文档节点 #document
  • nodeValue：规定节点的值
nodeValue 值
元素节点 undefined 或 null
属性节点 属性值
文本节点 文本本身
  • nodeType：规定节点类型，只读
nodeType 值
元素节点 1
属性节点 2
文本节点 3
注释节点 8
文档节点 9
  • innerHTML：元素的内容
  • id：元素的 id 属性
  • title：元素的 title 属性
  • style：元素的 style 属性
  • className：元素的 class 名称
  • tagName：元素的 tag 名称
  • attributes：元素属性的 NamedNodeMap（元素属性节点的无序集合）
  • ownerDocument：元素的根元素（文档对象）
  • parentNode：元素的父元素
  • firstChild：元素的第一个子元素
  • lastChild：元素的最后一个子元素
  • nextSibling：元素的后一个相邻兄弟元素
  • previousSibling：元素的前一个相邻兄弟元素
  • childNodes：元素子节点的 NodeList
  • clientHeight：元素的可见高度（padding + height）
  • clientWidth：元素的可见宽度（padding + width）
  • offsetHeight：元素的高度（padding + height + border）
  • offsetWidth：元素的宽度（padding + width + border）
  • offsetLeft：元素的水平偏移位置（该元素左外边距到包含元素左内边距之间的距离）
  • offsetTop：元素的垂直偏移位置（该元素上外边距到包含元素上内边距之间的距离）
  • offsetParent：元素的偏移容器
  • tabIndex：元素的 tab 键控制次序
  • accessKey：元素的快捷键

（2）方法

  • cloneNode()：克隆节点
  • appendChild()：添加子节点
  • removeChild()：移除子节点
  • replaceChild()：替换子节点
  • insertBefore()：插入新节点
  • hasChildNodes()：元素是否拥有子节点
  • normalize()：合并元素中相邻的文本节点，并移除空的文本节点
  • hasAttribute()：元素是否拥有指定属性
  • hasAttributes()：元素是否拥有属性
  • getAttribute()：返回元素的属性值
  • setAttribute()：设置元素的属性值
  • removeAttribute()：移除元素的属性
  • getAttributeNode()：返回指定的属性节点
  • setAttributeNode()：设置指定的属性节点
  • removeAttributeNode()：移除指定的属性节点，并返回被移除的节点
  • isDefaultNamespace()：检查 namespaceURI 是否为默认的
  • isEqualNode()：检查两个元素是否相等
  • isSameNode()：检查两个元素是否为相同节点
  • isSupported()：检查元素是否支持某一特性
  • toString()：把元素转换为字符串

3、Attribute

Attribute 对象表示 HTML 元素的属性

（1）属性

  • name：属性名称
  • value：属性值
  • length：NamedNodeMap 中的节点数
  • isId：属性是否为 id 类型
  • specified：属性是否为 已指定

（2）方法

  • item()：NamedNodeMap 中位于指定下标的节点
  • getNamedItem()：获取指定的属性节点
  • setNamedItem()：设置指定的属性节点
  • removeNamedItem()：移除指定的属性节点

4、Event

Event 对象表示事件的状态，通常与函数结合使用

（1）事件句柄

  • onclick：鼠标点击
  • ondblclick：鼠标双击
  • onmousedown：鼠标按键被按下
  • onmouseup：鼠标按键被松开
  • onmousemove：鼠标被移动
  • onmouseout：鼠标从某元素移开
  • onmouseover：鼠标移到某元素上
  • onkeydown：键盘按键被按下
  • onkeyup：键盘的键被松开
  • onkeypress：键盘按键被按下或按住
  • onload：加载文档或图像
  • onunload：退出页面
  • onerror：加载文档或图像时发生错误
  • onabort：加载图像时被中断
  • onfocus：获得焦点
  • onblur：失去焦点
  • onselect：文本被选定
  • onsubmit：提交按钮被点击
  • onchange：用户改变域的内容
  • onreset：重置按钮被点击
  • onresize：窗口或框架被调整尺寸

（2）鼠标 / 键盘属性

  • button：当事件被触发时，鼠标的哪个按钮被点击
  • clientX：当事件被触发时，鼠标指针相对于浏览器页面的水平坐标
  • clientY：当事件被触发时，鼠标指针相对于浏览器页面的垂直坐标
  • screenX：当事件被触发时，鼠标指针相对于屏幕的水平坐标
  • screenY：当事件被触发时，鼠标指针相对于屏幕的垂直坐标
  • ctrlKey：当事件被触发时，“CTRL” 键是否被按下
  • altKey：当事件被触发时，“ALT” 键是否被按下
  • shiftKey：当事件被触发时，“SHIFT” 键是否被按下
  • metaKey：当事件被触发时，“meta” 键是否被按下

（3）标准属性

  • bubbles：事件是否为冒泡事件类型
  • cancelable：事件是否可取消默认动作
  • currentTarget：返回其事件监听器触发此事件的元素
  • target：返回触发此事件的元素
  • eventPhase：返回事件传播的当前阶段
  • timeStamp：返回事件生成的时间
  • type：返回事件的名称

（4）标准方法

  • initEvent()：初始化属性
  • preventDefault()：不再执行默认动作
  • stopPropagation()：不再派发事件

【 阅读更多 JavaScript 系列文章，请看 JavaScript学习笔记 】

posted @ 2019-11-12 10:07  半虹  阅读(172)  评论(0)  编辑  收藏  举报