码农武：JS最重要的俩个对象Bom和Dom

一、DOM

1.HTML/DOM(文档对象模型)

1) 文档对象模型（Document Object Model，DOM）是表示和操作 HTML 和 XML 文档内容的基础 API。

2) 当网页被加载时，浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML） 解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

3) Document 和 Element 是两个重要的 DOM 类。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档 的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本 和属性。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

. JavaScript 能够改变页面中的所有 HTML 元素

. JavaScript 能够改变页面中的所有 HTML 属性

. JavaScript 能够改变页面中的所有 CSS 样式

. JavaScript 能够对页面中的所有事件做出反应

2、 获取和设置HTML元素内容和属性

1)获取 HTML元素：

通常，通过 JavaScript 可以操作 HTML 元素。

为了做到这件事情，必须首先找到该元素。有五种方法来做这件事：

. 用指定 ID 选取元素

. 用指定名字选取元素

. 用指定标签名选取元素

. 用指定 css 类选取元素

. 通过 css 选择器选取元素

a)用指定 ID选取元素

. 任何 HTML 元素都可以有一个 id 元素，但在文档中该值必须唯一，即同一个 文档中的元素不能出现有相同的 ID。可以用 Document 对象的

getElementById()方法选取特定 ID 的元素。返回一个 NodeList 对象（类数 组对象）。

. 如果有多个相同 ID 名的页面元素，只会获取到第一个，所以 id 不可以同名

. 如果没有获取带 id 元素则会返回一个 null。

本例选取 id="intro" 元素：

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。 如果未找到该元素，则 x 将包含 null。

b)用指定名字选取元素

• .一些 HTML 元素拥有 name 属性,name 属性值非唯一，所以多个元素可能有相 同的名字。

• 基于 name 属性的值选取 HTML 元素，可以使用 Document 对象的

getElementsByName()方法，返回一个 NodeList 对象（类数组对象）。

本例选取 name="btn1" 的 button 元素：

c) 用指定标签名选取元素

• 给 getElementsByTagName()传递通配符参数“* ”，将获得一个代表文档中 所有元素的 NodeList 对象。

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

d)用指定类名选取元素

. 在 HTML 文档和 HTML 元素上，我们可以调用 getElementsByClassName()来选 择指定 CSS 类的元素，它返回一个实时的 NodeList 对象，包含文档或元素 所有匹配的后代节点。

. getElementsByClassName()只需要一个字符串参数，但是该字符串可以由多 个空格隔开的标识符组成，只有当元素的 class 属性值包含所有指定的标识 符时才匹配。

. 在 Element 类中也同样定义了 getElementsByClassName()方法，其原理和 Document 版本是一样的，不过它只选取调用该方法的元素的后代元素。

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

e)用 css 选择器选取元素

. querySelectorAll()方法需要一个选择器的字符串作为参数，可以根据 一个 CSS 选择器来查询一个元素节点对象

. 它接受一个 css 选择器的字符串参数，返回一个代表文档中匹配选择器 的所有元素的 NodeList 对象，并不是实时的。

. 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那 么它只会返回第一个。如果没有匹配的元素，则返回一个空的 NodeList 对象。

2)设置 HTML元素的内容：

通过五种不同的方式获取到了 HTML 元素，我们现在可以通过 JavaScript 设置 HTML 元素的内容。

> 文本输出流 **document.write**

JavaScript 能够创建动态的 HTML 内容：

今天的日期是：

Thu Feb 25 2016 19:25:10 GMT+0800

在 JavaScript 中 ，document.write() 可用于直接向 HTML 输出流写内容。

注意：绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

> 改变 **HTML** 内容

修改 HTML 内容是使用 innerHTML 方法和 innerText 方法。

a) innerHTML 方法：

如需改变 HTML 元素的内容，请使用这个语法：

本例改变了 <p>元素的内容：

本例改变了 <h1> 元素的内容：

实例讲解：

上面的 HTML 文档含有 id="header" 的 <h1> 元素

我们使用 HTML DOM 来获得 id="header" 的元素

JavaScript 更改此元素的内容 (innerHTML)

b) innerText方法：

如需改变 HTML 元素的内容，请使用这个语法：

区别：

. innerHtml 可以修改元素的内容，如果在修改的内容里面放 html 标签的话， innerHtml 可以解析 html 标签。

. innerText 可以修改元素的内容，如果在修改的内容里面放 html 标签的话， innerText 不会解析 html 标签而是纯文本输出。

3) 获取和设置 HTML元素的属性

a) 获取 HTML 元素的属性

. 通过 JavaScript 我们不仅可以获取到 HTML 元素，还可以获取到该元素的属 性，这里我们使用的是 getAttribute()方法。

. 语法：getAttribute("属性名") 获取元素的属性值

b) 设置 HTML 元素的属性

. 通过 JavaScript 我们不仅可以获取到 HTML 元素，还可以给该元素添加属性 名和属性值，这里我们使用的是 setAttribute ()方法。

. 语法：setAttribute("属性名","属性值") 添加元素的属性名和属性值

3 、 改变 元素的 css 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。 如需改变 HTML 元素的样式，请使用这个语法：

下面的例子会改变 <p> 元素的样式：

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

4,DOM 元素的方法

1)JavaScript HTML DOM 元素(节点)

创建新的 HTML 元素

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属 性，分别是：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

2)创建新的HTML元素 createElement、appendChild

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一 个已存在的元素追加该元素。

例子解析：

这段代码创建新的<p> 元素：

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文 本节点：

然后您必须向 <p> 元素追加这个文本节点：

最后您必须向一个已有的元素追加这个新元素。 这段代码找到一个已有的元素：

以下代码在已存在的元素后添加新元素：

3)删除已有的 HTML元素 removeChild

以下代码将已有的元素删除：

实例解析

这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

找到 id="div1" 的元素：

找到 id="p1" 的 <p> 元素：

从父元素中删除子元素：

如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性 来找到父元素：

二、BOM

1、HTML的BOM(浏览器对象模型)

1 、文档对象模型(Document Object Model ，DOM)是表示和操作 HTML 和 XML 文档内容的基 础 API

2 、当网页被加载时，浏览器会根据 DOM 模型，将结构化文档(比如 HTML 和 XML)解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。

3 、Document 和 Element 是两个重要的 DOM 类

4、能利用 BOM 做什么!

BOM 提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变 窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些 信息如:浏览器品牌版本，屏幕分辨率。但 BOM 最强大的功能是它提供了一个访 问HTML 页面的一入口--document对象，以使得我们可以通过这个入口来使用DOM 的强大功能!!!

2、 BOM提供的对象

BOM 提供了一组对象，用来完成对浏览器的操作。

BOM 提供的对象：

. window：代表了整个浏览器窗口，同时是全局对象。

. navigator： 代表的是当前浏览器的信息，可以识别不同浏览器。

. location：代表浏览器的地址栏信息，可以操控浏览器跳转页面。

. History：历史记录。

. screen：代表的是用户的屏幕信息。

A.Window 对象的方法和属性

window 对象是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览 器窗口，是每一个加载文档的父对象

window 的属性和方法调用方法:window.属性，window.方法 也可以直接调 用省略 window.

**Window** 对象的方法：

常用的方法：

1.对话框

. alert()显示带有一段消息和一个确认按钮的警告框。

. confirm()显示可提示用户输入的对话框。返回值为布尔值

. prompt()显示带有一段消息以及确认按钮和取消按钮的对话框

2.窗体控制

. open ()打开一个新的浏览器窗口或查找一个已命名的窗口。

1.URL:声明了要在新窗口中显示的文档的 URL。

2.name:声明了新窗口的名称或者窗口目标。

3.features 声明了新窗口要显示的标准浏览器的特征。

. colse（） 关闭浏览窗口。

*window* 对象的属性：**

常用的属性：

1.innerWidth 和innerHeight

. innerWidth 返回窗口的文档显示区域的宽度

. innerHeight 返回窗口的文档显示区域的高度。

2.outerheight 和 outerwidth

. outerheight 返回窗口的外部高度

. outerwidth 返回窗口的外部宽度。

B.Navigator 对象的方法和属性

Navigator 对象包含有关浏览器的信息。

**Navigator** 对象的方法

*Navigator* 对象的属性

结果：

C.Location对象的方法和属性

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进 行访问。

Location对象的方法

Location 对象的属性

D.History对象的方法和属性

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行 访问。

History 对象的方法

History对象的属性

E.Screen对象的属性

练习 1

![img](file:///C:\Users删除元素删除元素内容，点击确认删除按钮，删除 div 里面的欣知大数据。删除元素内容，点击确认删除按钮，删除 div 里面的欣知大数据。

练习 2

复制元素内容：点击按钮，上面 div 里面的文本复制粘贴到下面的 div 里面。

练习 3

元素内容移动：点击按钮上面 div 里面的内容移动到下面的 div，再次点击下面 的 div 里面的内容移动到上面的 div。

练习 4

元素内容交换：点击按钮，上面 div 里的内容和下面 div 里的内容交换，再次点 击会交换回来。

练习 5

操作元素尺寸：点击按钮，元素的宽度会增加，再次点击会继续变宽。

练习 6

获取非行内样式：点击按钮，元素的宽度和高度会增加，再次点击会继续变宽变高。

练习 7

元素的显示和隐藏：点击按钮，元素会隐藏，再次点击元素会显示。

练习 8

当打开页面的时候不会显示左右两边的图片，鼠标往下滚的时候左右两边的图片 显示，再次返回到顶部的时候，左右的图片隐藏。

练习 9

点击 div 颜色变成红色，再次点击会变成蓝色。