JavaScript DOM/JavaScript BOM

栏目: JavaScript · 发布时间: 5年前

内容简介：一、DOM（文档对象模型） HTML DOM的出现使得JavaScript能够创建动态的HTML，改变HTML元素的样式，对HTML事件作出反应。

一、DOM（文档对象模型）

JavaScript DOM/JavaScript BOM HTMLDOM树

HTML DOM的出现使得JavaScript能够创建动态的HTML，改变HTML元素的样式，对HTML事件作出反应。

我们可以通过document.getElementById(). innerHTML 和document.getElementById(). attribute 改变HTML的内容和属性，使得原本的HTML元素更易替换且不会破坏原来代码的结构。同样的方式也可以运用在CSS和事件属性分配上，通过对style属性的控制使得样式变化；通过DOM操作可以对表单，鼠标，按键等事件发生作出反应。

而更为出色的功能在于DOM EventListener，我们可以向指定元素添加一个或多个事件句柄。任何DOM对象都可以添加事件监听，这种方式会更简单的控制事件，无论是内部元素事件先触发的事件冒泡，还是外部事件先触发的事件捕获。”useCapture” 参数即是这两种传递类型的开关。

DOM元素支持新建，替换，删除等操作，但在删除操作时必须知道需要删除的元素和它的父节点才能正确删除。

getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。NodeList 对象是一个从文档中获取的节点列表 (集合)。它们均可使用索引 (0, 1, 2, 3, 4, …) 来获取元素，也都有 length 属性。不同之处是HTMLCollection 元素可以通过 name，id 或索引来获取。而NodeList 只能通过索引来获取。

二、BOM（浏览器对象模型）

BOM主要使得js可以与浏览器”对话“，连接它们的是window对象。通过js对window对象的操作，我们可以改变浏览器中窗口的高度，开闭，查询浏览器的历史列表，存储访问者信息。也可以了解到web主机的一些信息。

在浏览器中我们还比较常用的弹窗和定时跳转等功能同样可以通过window对象的方法和操作实现。