前端三件套原理遗忘复习（一）

1、BOM事件

事件就是用户或浏览器自身执行的某种动作 . 事件可能是用户在某些内容上的点击、鼠标经

过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说

某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出 响应。

JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、 HTML 事件

2、DOM是啥 

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果， bom 操作远远不够，需要操作 html 才是核心。如何操作

html ，就是 DOM 。

简单的说， dom 提供了用程序动态控制 html 接口。 DOM 即文档对象模型描绘了一个层次化

的节点树，运行开发人员添加、移除和修改页面的某一部分。 dom 处于 javascript 的核心地

位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本

中对 HTML 页面中的所有元素进行访问。 Document 对象是 Window 对象的一部分，可通过

window.document 属性对其进行访问。

3、DOM有哪些api

节点创建型api：

document.createElement()

document,createTextNode()

parent.cloneNode(true)

document.createDocumentFragment() 创建文档片段 , 解决大量添加节点造成的回流问题

页面修改型API：

parent.appendChild(child)

parent.insertBefore(newNode,referenceNode) 将新元素添加到父元素中指定的子元素前

面

parent.removeChild(child)

parent.replcaeChild(newChild,oldChild)

节点查询型API：

document.getElementById()

document.getElementsByTagName() 返回的是一个即时的 HTMLCollection 类型

document.getElementsByName() 根据指定的 name 属性获取元素 , 返回的是一个即时的

NodeList

document.getElementsByClassName() 返回的是一个即时的 HTMLCollection

document.querySelector() 获取匹配到的第一个元素，采用的是深度优先搜索。

docuemnt.querySelectorAll()

返回的是一个非即时的 NodeList ，也就是说结果不会随着文档树的变化而变化

节点关系型 api ：

父关系型：

node.parentNode()

兄弟关系型

node.previouSibling() 返回节点的前一个节点（包括元素节点，文本节点，注释节点）

node.previousElementSibling() 返回前一个元素节点

node.nextSibling() 返回下一个节点

node.nextElementSibling() 返回下一个元素节点

子关系型

parent.childNodes() 返回一个即时的 NodeList ，包括了文本节点和注释节点

parent.children() 一个即时的 HTMLCollection ，子节点都是 Element

parent.firsrtNode()

parent.lastNode()

hasChildNodes()

元素属性型api：

element.setAttribute(“name”,“value”) 为元素添加属性

element.getAtrribute(“name”) 获取元素的属性

元素样式型 api ： window.getComputedStyle(element) 返回一个 CSSStyleDeclaration, 可以从中访问元素

的任意样式属性。

element.getBoundingClientRect() 返回一个 DOMRect 对象，里面 包括了元素相对于可 视区的位置top,left , 以及元素的大小 , 单位为纯数字。可用于判断某元素是否出现在了可视区

域。