09—DOM和BOM

一、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选取元素

1. 任何HTML元素都可以有一个id元素，但在文档中该值必须唯一，即同一个文档中的元素不能出现有相同的ID。可以用Document对象的getElementById()方法选取特定ID的元素。返回一个NodeList对象（类数组对象）。
2. 如果有多个相同ID名的页面元素，只会获取到第一个，所以id不可以同名
3. 如果没有获取带id元素则会返回一个null。

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

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

如果未找到该元素，则 x 将包含 null。

• 用指定名字选取元素

1. 一些HTML元素拥有name属性,name属性值非唯一，所以多个元素可能有相同的名字。
2. 基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法，返回一个NodeList对象（类数组对象）。

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

• 用指定标签名选取元素

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

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

• 用指定类名选取元素

1. 在HTML文档和HTML元素上，我们可以调用getElementsByClassName()来选择指定CSS类的元素，它返回一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。
2. getElementsByClassName()只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的class属性值包含所有指定的标识符时才匹配。
3. 在Element类中也同样定义了getElementsByClassName()方法，其原理和Document版本是一样的，不过它只选取调用该方法的元素的后代元素。

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

• 用css选择器选取元素

1. querySelectorAll()方法需要一个选择器的字符串作为参数，可以根据一个 CSS 选择器来查询一个元素节点对象
2. 它接受一个css选择器的字符串参数，返回一个代表文档中匹配选择器的所有元素的NodeList对象，并不是实时的。
3. 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个。如果没有匹配的元素，则返回一个空的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方法。

1. innerHTML方法：

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

实例讲解：

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

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

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

innerText方法：

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

区别：

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

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

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

获取HTML元素的属性

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

 

设置HTML元素的属性

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

3、改变 元素的css样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

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

4、DOM 元素的方法

1、JavaScript HTML DOM 元素(节点)

创建新的 HTML 元素

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

1. nodeName : 节点的名称
2. nodeType ：节点的类型
3. nodeValue ：节点的值

 

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

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

3、删除已有的 HTML 元素removeChild

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

二、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提供的对象：

1. window：代表了整个浏览器窗口，同时是全局对象。
2. navigator： 代表的是当前浏览器的信息，可以识别不同浏览器。
3. location：代表浏览器的地址栏信息，可以操控浏览器跳转页面。
4. History：历史记录。
5. screen：代表的是用户的屏幕信息。

1. Window对象的方法和属性

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

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

Window对象的方法：

 1.对话框

2.窗体控制

window对象的常用的属性：

1. innerWidth和innerHeight

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

2. outerheight和outerwidth

1. outerheight 返回窗口的外部高度
2. outerwidth 返回窗口的外部宽度。

Navigator 对象的方法和属性

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

<body>

<div id="example"></div>

<script>

    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";

    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";

    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";

    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";

    txt+= "<p>硬件平台: " + navigator.platform + "</p>"

    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";

    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";

    document.getElementById("example").innerHTML=txt;

</script>

</body>

Location 对象的方法和属性

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

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

 

History对象的方法和属性

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

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

Screen对象的属性