十八，宿主对象DOM

一，DOM简介

在JS中对象分为3类：内建对象，宿主对象，自定义对象。

宿主对象：浏览器（运行环境）提供的对象。

DOM：文档对象模型，JS 中通过DOM来对HTML文档进行操作，操作WEB页面。

Doumnet文档：表示整个HTML网页的文档

Objec对象：表示将网页中的每一个部分转换为一个对象

Model模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

节点Node：是构成网页最基本的组成部分，网页中的每个部分都可以称为节点。比如：html标签，属性，文本，注释，整个文档等都是一个节点。虽然都是节点，但是实际上他们的具体类型是不同的。节点的类型不同，属性和方法也不尽相同。

构成HTML文档最基本的单元。

常用节点分类：

文档节点：整个HTML文档

元素节点：HTML文档中的HTML标签

属性节点：元素的属性

文本节点：HTML标签中的文本内容

四种对象。

二，DOM事件

DOM是用来操作网页的，如：网页中有一个按钮，我想通过JS来操作这个按钮，我们应该怎么做呢？

首先要 先获取按钮这个对象，获取对象以后我们就可以任意的去控制它。获取对象离不开模型，如果浏览器一个对象都不给我们提供，我们 就没有入口无法获取对象，此时就需要浏览器为我们提供现成的对象来查找，就把模型的根节点提供给我们。浏览器以及为我们提供了文档节点 document对象这个对象是window属性，是一个全局变量，文档节点代表的是整个网页。

接着上面的按钮案列来讲，浏览器为我们提供了document文档对象，那我们接下来就要获取button对象了。‘

三，事件

1，事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间，

JS 与HTML之间的交互是通过事件来实现的

对于web应用来说，有下面这些代表性的事件：点击，鼠标移动，按下键盘等。

将事件写在元素内部，是属于结构和行为的耦合，不推荐使用。我们可以将元素对应的事件绑定处理函数的形式响应事件。事件被触发时，函数被调用。

2，文档的加载

浏览器在加载页面时是按照自上向下的顺序加载的，读取一行就运行一行。如果将script标签写在前面，在代码执行时，页面还没有加载，此时获取页面中的元素值是 null 给null添加属性或方法是会报错的。我们可以将JS代码写在元素标签的后面，这样可以在页面加载完毕以后再执行JS代码，如果非要写在前面我们可以等页面加载完成后再执行。

onload（）：事件 会在整个页面加载完成之后才执行。该事件对应的响应函数将会在页面加载完成之后再执行，这样可以确保我们得到代码执行时所有的DOM对象已经加载完毕。

采用两种方式都可以，但在具体开=开发过程中，我们根据公司的要求来。从性能方面来比较的话，将JS代码写在标签的后面性能较优，因为写在前面会先被加载，但是又不会立即执行。

四， 获取元素节点

五，DOM查询练习

文件的样式和结构

1.查找 #bj节点

获取元素节点，通过document对象调用。

innerHTML 属性：获取元素（标签）内部的html代码

2.查找所有li节点

通过getElementsByTagName获取到的是一个类数组。

3.查找name = gender的所有节点

innerHTML :获取标签内部的html代码，对于自结束标签没有意义，自结束标签没有内部内容。

当我们需要读取元素节点的属性时，可以使用：元素.属性名，所有的属性都可以使用这个方法。但注意class属性不能使用这个方法，读取class属性：元素.className,因为class是保留字，不让我们使用。

4.查找#city下所有的li节点

获取元素节点的子节点，通过具体的元素节点调用。

5.查找#city所有的子节点

childNodes属性：获取包括文本节点，注释在内的所有子节点。根据DOM标准，标签间的空白也会当成子节点。但是在IE8及以下浏览器中不会将空白文档和注释当成子节点。

children：可以获取当前元素的所有子元素（标签）不是所有的子节点，不包括空白文本节点。所有浏览器都支持。

6.查找#phone的第一个子节点

子节点包括空白文本，元素（标签）就不包括空白文本。firstChild获取当前元素的第一个子节点，包括空白文本节点。

firstElementChild获取当前元素的第一个子元素，不包括空白文本，但是IE8及以下浏览器不支持。

lastChild跟firstChild情况一样。

7.返回#bj的父亲节点

parentNode：获取父元素，不包括空白文本，

innerHTML 属性获取元素内部的内容，自结束标签里面没有内容，不可以用它获取，innerText也是获取元素内部内容，不同的是innerText会自动将html标签去掉。

8.返回#android的前一个兄弟节点

previousSibling获取元素的前一个兄弟节点，前面存在换行（空白文本）就会输出undefined ，

previousElementSibling不包括空白文本但是IE8 及以下浏览器不支持。

9.读取#username的value属性

读取属性用.点

10.设置#username的value属性

11.返回#bj的文本值

12.代码优化

我们在获取这11个按钮时 采用的是getElementsByTagName,当然我们也可以采用getElementById。

但在使用getElementById 时 我们用到一个按钮时就需要调用一次，这样写起来代码重复性很高，我们可以把代码优化一下。

使用getElementById 每次需要传递不同的id，函数也不一样，所以需要传入两个参数，